Question

This code only works based on the size of the browser at the time of loading, just wondering what could I implement for it get the current browser size and work based on that current information.

I have tried wrapping it in resize() but it causes it behave strangely, i.e the toggle goes on and off continuously , or when loading in a shrunk browser it doesnt work at all.

Its a responsive site where the footer menu is just static links on a large screen but turns into drop menu on small screen.

    var myWidth = 0, myHeight = 0;

    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }   

    if(myWidth < 980) {
        $("#footer h3").click(function () {
                $(this).toggleClass("active");
                $(this).parent().find("ul").slideToggle('medium');      
        });
    }

Answer 1

var myWidth = 0, myHeight = 0;


function getSize(){

    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }

}

getSize(); // run first time

$(window).resize(function(){
  getSize(); // do it on resize
});


$("#footer h3").click(function () {

        getSize();  // not needed but good to have

        if(myWidth < 980) {
            $(this).toggleClass("active");
            $(this).parent().find("ul").slideToggle('medium');
        }

});