Question

I am attempting to create a mobile website from my ‘desktop’ site through CSS media queries.

I have a simple drop down menu(desktop) that can transform into a pushdown menu(mobile). the css is loaded for the desktop at anything over a browser width of 768px and the mobile push down menu is loaded at anything under 767px.

Problem is the pushdown menu requires a js file to function properly. The js file forces the div that contains the menu to be hidden. So upto 767px browser width the pushdown works fine, at 768px the desktop nav is not visible.

I am new to JavaScript and Jquery, but I have tried to get this to operate effectively using my minimal knowledge. I need it to be as simple as possible as the site must be minimal as possible.

At the moment this is the closest I have got it to functioning properly:

function hideDiv(){
    if ($(window).width() < 768) {

        $(".togglebox").hide();

    }else{

        $(".togglebox").show();

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});


$(document).ready(function(){

    $(".togglebox").hide();

    $("h1").click(function(){

    $(this).next(".togglebox").slideToggle("slow");
    return true;
    });
});

Notes:

The togglebox div needs to be hidden for the pushdown menu to work, however the same div needs to be visible at over 768px width in order for the desktop navigation to be visible.

The above code makes it work fine, however when I type in the page url no navigation is present until I attempt to resize the browser width. I am aware I have two (document).ready function’s and maybe this is the problem, but I’ve tried playing with the code but I haven’t had any luck. There must be a simple solution that I am overlooking?

I thought maybe executing the pushdown menu functions at anything upto 767px width only, then anything above that to simply show the togglebox div.

Answer 1

Your code doesn’t work when the page first loads because you are always hiding it when the page first loads. Instead of always hiding it when the page first loads, you just need to call the function you already have hideDiv() and it will determine whether it should be initially visible or not. Change your code to this (removing the .hide() line and letting the one call to hideDiv() do its natural job):

function hideDiv(){
    if ($(window).width() < 768) {
        $(".togglebox").hide();
    }else{
        $(".togglebox").show();
    }
}

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });
});


$(document).ready(function(){
    $("h1").click(function(){
        $(this).next(".togglebox").slideToggle("slow");
        return true;
    });
});