jquery window resize breaks after navigation is clicked

Question

For smaller viewports I built an icon which opens on click and shows the navigation. On larger viewports the icon should not be visible. Unfortunately the button only appears/disappears on resizing but not initially when the page is loaded.

jQuery(document).ready(function($) {
 var responsive_viewport = $(window).width();
$(window).resize(function(){
if (responsive_viewport < 768) {
   $('.top-nav').css('display', 'none'),
   $('.menutop').css('display', 'block')
     $(function(){
     $('.menutop').toggle(function(){
     $('.top-nav').show('slow');
     }, function(){
     $('.top-nav').hide('slow');
   });
 });
}
if (responsive_viewport >= 768) {
   $('.menutop').css('display', 'none')
   $('.top-nav').css('display', 'block')
       }    
});  
});

If I do not include the window resize function the .menutop button appears only on smaller viewports. Thanks for looking at it. It seems so simple but why is this button showing up on viewports >768?

As I do not know how to delete my question (and maybe someone stumbles over the same difficulties), I found the solution.

Resize function and responsive window should be seperated: http://jsfiddle.net/MiauMiau/wtzKW/ It still seems a bit laborious?

var windowSize = $(window).width();
if (windowSize < 768) {
    $('.menu-top').css('display', 'block');
    $('.top-nav').css('display', 'none');
        $('.menu-top').click(function () {
            $('.top-nav').toggle('slow');
         });

} else {
    $('.menu-top').css('display', 'none'),
    $('.top-nav').css('display', 'block');
}

$(window).on('resize', function (event) {
    var windowSize = $(window).width();
    if (windowSize < 768) {
        $('.menu-top').css('display', 'block');
        $('.top-nav').css('display', 'none');
    } else {
        $('.menu-top').css('display', 'none'),
        $('.top-nav').css('display', 'block');
    }
});

I rearranged things a bit and ended up with this: jsfiddle.net/MiauMiau/wtzKW The resize window should be in an extra block. I am not sure if this is the best approach, but it worked for me. — MiauMiau

MiauMiau MiauMiau · Accepted Answer · 2013-06-18T15:58:51

I found a solution using modernizr.js:

function doneResizing() {
    if (Modernizr.mq('screen and (max-width:768px)')) {
        $('.menu-top').css('display', 'block');
        $('.top-nav').css('display', 'none');
        $('.menu-item').click(function () {
            $(this).parent().hide('slow');
            $(this).parent().removeClass('isShow');
        });
    } else if (Modernizr.mq('screen and (min-width:767px)')) {
        $('.menu-top').css('display', 'none'),
        $('.top-nav').css('display', 'block');
        $('.menu-item').unbind('click').click();
    }
}

var id;
$(window).resize(function () {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
});

doneResizing();
$('.menu-top').click(function (event) {
    event.preventDefault();
    if ($('.top-nav').hasClass('isShow')) {
        $('.top-nav').hide('slow');
        $('.top-nav').removeClass('isShow');
    } else {
        $('.top-nav').show('slow');
        $('.top-nav').addClass('isShow');
    }
    return false;
});

jquery window resize breaks after navigation is clicked

1 Answers