SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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 
        }
      }  
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •