CODEWITHSUNDEEP
javascripthtmljquerycssvue.js
user15220416
user15220416

Reputation:

How to disable OverlayScrollbars when window width equal 600px?

I use overlayScrollbars to create a <nav></nav> .

When window width less than 600px, then navbar go left like sidebar.

    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
    </ul>

and create a js file and add this line:

$('ul').overlayScrollbars({ });

now when my widnow width less than 600px, overlayScrollbars worke fine but when my window width bigger than 600px, overlayScrollbars still work and element width is like sidebar.

How can I disable overlayScrollbars() when my window width bigger than 600px?

Upvotes: 2

Views: 764

Answers (4)

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

HTML

<ul id="test">
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

JQuery

So you get it onload
--------------------

if($(window).width() < 600) {
    var instance = OverlayScrollbars(document.getElementById("test"), {});
}

$(window).resize(function() {
  var instance = OverlayScrollbars(document.getElementById("test"), {});
  if ($(window).width() > 600) {
    instance.destroy();
  }
});

Upvotes: 1

mohammed alshobaki
mohammed alshobaki

Reputation: 155

Use Media Query to hide elements from any screen!

Try it:

    <style>
      @media (min-width:600px){
        .yourOverlayElement{ display:none; }
      }
    </style>

Upvotes: 1

Makaze
Makaze

Reputation: 1086

You need to:

  1. Store the overlay instances as variables, so you can .destroy() them.
  2. Check the window size when the page is opened, and create it depending on size.
  3. Attach .destroy() and recreation of new instances to an onresize event, with the same check as when the page loads.

Here's an example of how to store and destroy with jQuery.

//initializes plugin and stores the instance into a variable
var instance = $('ul').overlayScrollbars({ }).overlayScrollbars();
instance.destroy();

Upvotes: 1

Ethanolle
Ethanolle

Reputation: 1223

You can use the $(window).height(); $(window).width(); to check the width and height of page and then enable or disable stuffs with a basic if else function.

Upvotes: 0

Related Questions