0

My jQuery script collapses content, makes title elements clickable, and shows content. I want to constrain the script to viewports smaller than 700 px.

Here is a codepen with the jQuery:

http://codepen.io/paulbremer/pen/AnyDd?editors=001

Wolfpack'08
  • 3,982
  • 11
  • 46
  • 78
Paul Bremer
  • 73
  • 1
  • 6
  • possible duplicate http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query – Bhushan Kawadkar May 21 '14 at 10:37
  • No, not at all. I tried using the resize() function but the click function gets called on every resize event. I'd like to see how you could only execute the click event on small viewports. – Paul Bremer May 21 '14 at 10:39
  • I updated the codepen, added the resize function, the problem is that if you resize the viewport a few times the click function gets called all the times you resizes the viewport. – Paul Bremer May 21 '14 at 10:55
  • Chances are that any user less than 700px will be on a mobile device and thus trigger onload. Whilst it is nice to be able to randomly resize the window on a larger screen, will any of your users realistically be using the mobile version on a desktop/laptop? – Guy May 21 '14 at 11:03
  • You've got a point there, I thought I could make it work on the resize() function and make it work on mobile and desktop. – Paul Bremer May 21 '14 at 11:08

1 Answers1

3

You can use $( window ).width(); to find the width of the window and then only execute when the width is less than 700px.

Demo - http://codepen.io/guyfedwards/pen/aBChg

If you want it to update as the window is resized you could use .resize(). e.g:

$(window).resize(function(){
    if ($(window).width() <= 700){  
        // do something
    }   
});
Guy
  • 10,931
  • 5
  • 36
  • 47