How to Disable JavaScript for Responsive Design

How to disable javascript for responsive design

As others mentioned, there are plenty of jQuery plugins you can use. However, if all you want to use is just plain vanilla jQuery you can also do what you want.

You can use the resize method in jquery to detect the size of the window.

$(window).resize(function() {
   if ($(this).width() > 480) {
      // call supersize method
   }
});

Then on doc ready, just be sure to call the resize window so it will initially call or not call the method depending on your window's current size:

$(document).ready(function() {
   $(window).resize();
});

PS > If you do not need this script to run every time the window resizes, but rather only when it reaches below 480 pixels, slight modifications can be made to unbind the resize method after your script needs to be disabled or enabled.

How To Disable This JS Function In Responsive Designs

<script type='text/javascript'>
   $(document).ready(function(){
    if ($(window).width() >= 768) {
        $("#mblfloater").sticky({topSpacing:0});
    }
   });
</script>

Only run the script if the window's width is greater than or equal to (i.e. not less than) 768.

Disable Javascript effect based on the screen's size

You could try checking the window width before you run toggle (you'll want to change minWidth to the minimum width you want for your application):

$(document).ready(function() {

    $('.header-search form').on('click', function(e) {

        // If the form (which is turned into the search button) was
        // clicked directly, toggle the visibility of the search box.

        if(e.target == this && window.innerWidth > minWidth) {
            $(this).find('input').toggle();
        }

    });
});

Disable javascript script at a certain screen width

You can attach an event listener to the document DOMContentLoaded and window resize events to query the screen resolution (the window.innerWidth and window.innerHeight properties).

If the resolution falls below your breakpoint, then you can remove the event listeners from each of the paths (you will need a reference to the function in order to do so).

If you don't need to handle resize events and just want to initially disable the script based on the resolution, then you can do something simple like replacing:

init();

with

if (window.innerWidth > 480)
  init();

Disable javascript based on screen size

Could be a hack-job. If this works only if you have a valid adfly_id, then do this:

if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
}

This might fail the adfly stuff you are trying to initialize.

But the right way to do this is:

if(screen.width < 720) { 
  // Bye bye.
} else {
  // do all your cool stuff here for larger screens
  require("awesome.js");
}

ps: The require() function here is a pseudo function that would include and activate the JavaScript file. A sample of that code would be:

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

How to disable some function in javascript when mobile device is use to open my webpage?

You can use matchMedia() for javascript to keep track of the width of the screen. If the screen width meets the specified conditions, then the specified function is disabled by returning a false. Like that:

if (window.matchMedia('(max-width: 767px)').matches) {
    function nameFunction() {
        return false;
    }
} else {}

---

Related Topics