Removing class when window resized

Envato Authors Theme Authors
1

Hi, i’m working on a simple responsive page with superfish implemented in navigation, i want to disable the plugin when the window is resized to 768px and below because the navigation will be replaced by a toggle nav, so i’m trying to remove the .sf-menu class with jQuery but it doesn’t work.

Here’s my code:

function checkWidth(init)
{
<pre>if ($(window).width() < 768) {</pre>

     $('ul').removeClass('.sf-menu');
   }
    else {
        if (init == false) {
            $('ul').addClass('.sf-menu');
        }
    }
}
$(document).ready(function() {
    checkWidth(true);
    $(window).resize(function() {
        checkWidth(false);
    });
});

Any help would be appreciated.

2

It`s hard to help you if i not see the html

3

Try with $(‘body’).innerWidth();

4

try this

	$('body').resize(function () {
	  var width = $(this).width();
		if (width < 769) {
			//do stuff
		}
		else { // do stuff }
	}).resize();
5

always listen to the window object when resizing:

$(window).resize(function(){
   //do stuff here
});
6

Try this:


function your_function_name(){
	
	var windowWidth = jQuery(window).width();
	
	if(windowWidth <= 768) {
		jQuery('ul').removeClass('.sf-menu');
	}else{
	
		jQuery('ul').addClass('.sf-menu');
	}

}

jQuery(document).ready(function($){
	
	your_function_name();
	
	jQuery(window).bind("resize",function(){
		your_function_name();
	});

}
7
revaxarts said

always listen to the window object when resizing:

$(window).resize(function(){
   //do stuff here
});

+1 what I was going to say :slight_smile: