0

I have a mobile navigation only running below 1025px. My problem is when a desktop browser is resized (or an orientation change on bigger tablets happend) from over 1024 to below it does not activate the script any more. I have tried with reload on resize, but this is not ideal because it reloads on every resize.

Here's my code:

<script>
    $(window).bind('resize', function(e)
    {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function()
      {
        this.location.reload(false);
      }, 100);
    });

    if (document.documentElement.clientWidth <= 1024) {
      // Initialize mobile nav
    }
</script>

Thanks!

Daniel B
  • 8,770
  • 5
  • 43
  • 76
tinusmile
  • 5
  • 1
  • 5

1 Answers1

0

add classes in every resolution and ask for them.

$( window ).resize(function() {
if(($(window).width()>1024 && $(".navigation").hasClass("mobile")) || ($(window).width()<1025 && $(".navigation").hasClass("desktop")))
this.location.reload();
}

but you should consider not to reload, but to hide/show the navigation via css media queries. reloading is a pain in the user experience:-)

Better solution:

in your css:

.desktop {
    display: block;
}
.mobile {
    display: none;
}
@media only screen and (max-width: 1025px) {
.desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}

In your html:

<div class="navigation desktop">your desktop navigation</div>
<div class="navigation mobile">your mobile navigation</div>

No js needed for that.

cari
  • 2,251
  • 2
  • 18
  • 27
  • The navigation has acutally only one class (.navigation) that I style different with media queries for both, desktop and mobile. Only the mobile nav should be activated with js. How can I add different classes? – tinusmile Feb 16 '15 at 19:21
  • like this? `
    some text
    `     – cari Feb 18 '15 at 09:26