CODEWITHSUNDEEP
javascriptjquery
Richlewis
Richlewis

Reputation: 15374

Detect window width on the fly in jQuery

I am using a template and it come with a jQuery function to detect the window width, but it only works if you open the window up or refresh the page, not when you adjust the window width.. From what IU have read I need to integrate the resize function into my codebase 

$(window).resize(function()

but as my jQuery is limited I'm not sure how to put it in this script

var ww = $(window).width();

/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    }
});

$('body').find(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $('body').find("#mainmenu").toggle();
});
adjustMenu();
});


 $(window).load(function () {
 $('body').find("#mainmenu").css('pointer-events', 'auto');
 });

var adjustMenu = function() {
"use strict";
if (ww < 900) {
    $('body').find(".toggleMenu").css("display", "inline-block");
    if (!$('body').find(".toggleMenu").hasClass("active")) {
        $('body').find("#mainmenu").hide();
    } else {
        $('body').find("#mainmenu").show();
    }
    $('body').find("#mainmenu li").unbind('mouseenter mouseleave');
    $('body').find("#mainmenu li a.parent").unbind('click').bind('click',  function(e) {
        e.preventDefault();
        $(this).parent("li").toggleClass("hover");
    });
} 
else if (ww >= 900) {
    $('body').find(".toggleMenu").css("display", "none");
    $('body').find("#mainmenu").show();
    $('body').find("#mainmenu li").removeClass("hover");
    $('body').find("#mainmenu li a").unbind('click');
    $('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
    $(this).toggleClass('activelink');
    $(this).find("ul").toggleClass('animatedfast');
    $(this).find("ul").toggleClass('fadeInUp');
    });
    $('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');
        $(this).find("ul li").toggleClass('animatedfast');
        $(this).find("ul li").toggleClass('fadeInLeft');
    });
  }
    };

I can see that the logic is taking place in the adjustMenu function, so would I wrap that in the resize function?

Upvotes: 0

Views: 371

Answers (2)

EthanK
EthanK

Reputation: 759

Maybe I'm missing something obvious, but why not pull the whole thing out of 

$(document).ready ()

Place it in a function

Function  doAllOfThis (
//do everything
);

And then call it on document ready? 

$(document).ready(function ({
    doAllOfThis();
});
$(widow).resize (function ({
    doAllOfThis();
});

I don't see anything that would be an issue. But you could just extract the code with "if ww =" conditions and move that to a function, then do as above with the function.

BETTER SOLUTION

Just noticed the 

adjustMenu();

Function is already set for you, so add 

$(window).resize(function({
    var ww = $(window).width();
    adjustMenu();
});

Upvotes: 1

Karl Laurentius Roos
Karl Laurentius Roos

Reputation: 4399

Utilize the resize event.

$(window).resize(function() {
    var ww = $(window).width(); // will contain width after resize

    // your adjust logic here
});

Upvotes: 0

Related Questions