Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

triggering jQuery event on certain browser width resize

I am trying to trigger an event when the browser width is resized from less than 767 to more than 767px. Currently I have the event triggering fine, but it triggers as soon as the browser is resized, and can't quite put my finger on the syntax required with to $(window).resize() function to have it only work when the browser is resized a certain amount. Any tips/help would be greatly appreciated. Here is the code I've got:

var open = false;
  mn = $(".main-nav");
  mns = "main-nav-scrolled";
  hdr = $('.main-header').height() - $('.main-nav').height();
    $('#nav-icon1').on('click',function(){
      if(open == false){
        var width = $(window).width();
        $( window ).resize(function() {
          if(767 - width) {
            $( "#nav-icon1" ).removeClass('open');
            $('.overlay').fadeOut(150);
            open = false;
            $(window).scroll(function() {
              if( $(this).scrollTop() > hdr ) {
                mn.addClass(mns);
              }
            })
          }
        });

the code I'm looking to perefct here is 

var width = $(window).width();
        $( window ).resize(function() {
          if(767 - width) {
                  //do something;
          }

2 Answers

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

Hey Gabriel,

Try this syntax. Hopefully it works as desired. 

$( window ).resize(function() {
          if( width < 768 ) {
                  //do something;
          }
Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi there Anthony,

No luck sorry. Thanks for the suggestion though.