3

I am using www.berriart.com/sidr/ jQuery script that creates side menu from my HTML menu. It works perfectly, but i would like to show the "standard" menu on resolutions bigger than 480px and the sidemenu on resolutions bellow 480px.

I am triggering it with :

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

and i was wondering how can i limit this script to only run when the screen is bellow 480px?

Sorry, JS newbie here :)

Medvjed Jedan
  • 75
  • 1
  • 1
  • 7

4 Answers4

1

You could use

$(window).width() $(window).height()

to get the width and height of the screen and use it accordingly. 

<script>
$(document).ready(function() {
  var width = $(window).width();
   if (width<=480) {
     $('#simple-menu').sidr();
   }
  else
  {
     // you could call the other version of the slider.
   }
});
</script>
Cherry
  • 393
  • 1
  • 4
  • 15
  • Sorry, complete JS newbie here :D If im not asking for too much, how would this code be comined with the one i have so far? – Medvjed Jedan Apr 17 '15 at 13:01
  • @MedvjedJedan I have updated the post, hope it works. – Cherry Apr 17 '15 at 13:18
  • Thanks dude! Works perfectly, only bad thing is that it doesnt change state (show-hide) when i try to resize the window.When i refresh it, then it shows properly. Thanks! – Medvjed Jedan Apr 17 '15 at 13:24
1

The other solutions only work once on page load, if you want a solution that works on page load and page resize or orientation change for mobile. use this one.

var state = 'undefined';
$('#responsive-menu-button').sidr({
  name: 'sidr-main',
  source: '#navigation'
});

$('#responsive-menu-button').off('click').click(function(e){
  e.preventDefault();
  if(state == 'close'){
    $.sidr('open','sidr-main', function(){ state = 'open'; });
  } else {
    $.sidr('close','sidr-main', function(){ state = 'close'; });
  }
});

var deviceWidth = $(window).width();
var breakWidth = 480;
if(state == 'undefined'){
  if(deviceWidth <= breakWidth) {
    state = 'close';
  } else {
    setTimeout(function(){
      $.sidr('open','sidr-main', function(){ state = 'open'; });
    }, 100);
  }
}

$(window).off('resize').bind('resize', function () {
    deviceWidth = $(window).width();
    if(deviceWidth > breakWidth && state == 'close') {
      $.sidr('open','sidr-main', function(){ state = 'open'; });
    }
    if(deviceWidth <= breakWidth && state == 'open') {
      $.sidr('close','sidr-main', function(){ state = 'close'; });
    }
});
deefactorial
  • 293
  • 1
  • 12
0

Look at the below example from the documentation/example page from Sidr: http://berriart.com/sidr/#documentation in the section title "Responsive Menus". It leverages a media query to only show the mobile header when the screen size is below 767px, otherwise it does not display. You could modify this example to achieve the effect you want.

<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }

    #navigation {
        display: none;
    }
}
</style>

<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>

<div id="navigation">
    <nav class="nav">
        <ul>
            <li><a href="#download">Download</a></li>
            <li><a href="#getstarted">Get started</a></li>
            <li><a href="#usage">Demos &amp; Usage</a></li>
            <li><a href="#documentation">Documentation</a></li>
            <li><a href="#themes">Themes</a></li>
            <li><a href="#support">Support</a></li>
        </ul>
    </nav>
</div>

<script>
    $('#responsive-menu-button').sidr({
      name: 'sidr-main',
      source: '#navigation'
    });
</script>
JBzd
  • 715
  • 3
  • 12
  • If i understood this properly, both menu and toggle wont be shown on bigger resolutions, only on smaller ones. But, i need my "standard" menu to be shown above 480px and sidr.js menu bellow that – Medvjed Jedan Apr 17 '15 at 13:00
  • Actually, the problem with their example is that it won't hide the normal navigation at the mobile width. There is nothing that is hiding the #navigation div (that holds the normal navigation) at bigger resolutions, so it will show. What needs to be added is hiding it at smaller resolutions. I've edited it to represent that. – JBzd Apr 17 '15 at 13:09
0

Please check the CSS snippet I used.

Initially, for width>768px the #mobile-header is set to display:none.

Otherwise, #mobile-header will be display:block.

<style>
#mobile-header { display: none; }
@media only screen and (max-width: 768px){
#mobile-header { display: block;}
#nav-wrapper { display: none; }
}
</style>
Syed Priom
  • 1,893
  • 1
  • 21
  • 22