Changing javascripts using media queries

Hello,

I would like to have a vertical jquery accordeon menu when the website is viewed in mobile size (320px) and a horizontal jquery dropdown-menu when viewed in bigger screen-sizes. So I guess we are talking about conditional javascript here, not just about css rules, but adding javascript to separate screen sizes. Can anyone tell me or point to a tutorial how to do this?

thanks in advance!

Rather than trying to include different scripts for different screen sizes, it would probably be a better idea to monitor the window’s resize event and execute different code based on how wide the screen is.

In terms of pseudo code, you’d have something like this:


on window resize {
  if (window width >= 500) {
    if (the horizontal accordion has NOT been initialized) {
      set up regular accordion 
    }
  }
  else {
    if (the vertical accordion has NOT been initialized) {
      set up regular accordion 
    }
  }  
}