execute jquery below a certain viewport width

Question

hi folks i've found a few answers on this but can't seem to get any of them working . i've got a typical responsive nav that changes to a menu icon below a certain viewport width . i have the anchor tags in the dropdown menu close the menu when clicked as they are executing a scroll to function. however this is not useful when above a certain width . here's my code . i think this may be the way to go but suspect that my syntax is incorrect

<script> if($(window).width() <= 900){ $(document).ready(function(){ $(".trigger , .close").click(function(){ $(".showing ").slideToggle("slow"); }); }); </script>

crowhill · Accepted Answer · 2015-05-07 23:20:00Z

1

First, reverse the order of the width() and ready() lines. Then use the .add() to apply the click to both buttons ($(".trigger, .close") should work, but I think .add() is cleaner)

$(document).ready(function(){ if($(window).width() <= 900){ $(".trigger").add(".close").click(function(){ $(".showing ").slideToggle("slow"); }); } }

Here's a fiddle: http://jsfiddle.net/jm5okh69/6/

(note that $(document).ready() isn't included.

answered May 7, 2015 at 23:20

crowhill

2,6083 gold badges29 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

crowhill Over a year ago

Annnd I broke my answer trying out your code. One moment.

mccavandish Over a year ago

thanks for the reply . it's a weird one this . clearly your fiddle works yet when i add it into my script the trigger and close classes no longer toggle the menu

crowhill Over a year ago

It's probably something stupid. You forgot a period somewhere? A pound sign? Put up more of the code, if possible and I'd be happy to have a look (within reason).

mccavandish Over a year ago

found another way of doing it where the jquery is triggered by a media query . e.g if a fontsize for example is changed below a certain viewport width that media query is used to trigger the jquery . seems to be a much cleaner way to do it as opposed to using window width as there seem to be some inconsistencies between browsers . thanks for the help . hope this is useful if you need to do something similar

crowhill Over a year ago

I think some browsers will interpret the vertical scrollbar as part of the width and some don't--meaning they can all disagree by about 20px. But you can force a scrollbar with css--and I often do if I'm going to have content that can't fill one window. I'm not sure, but I think basing layout on front size is a bad idea. You can't (and don't want) to control the user's experience like that. I'm still not clear what your issue is, but I wouldn't base javascript behavior on font size.

|

Collectives™ on Stack Overflow

execute jquery below a certain viewport width

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related