Call jQuery function on small devices only

Question

I've fairly new to javascript and jQuery so help would be greatly appreciated.

I've designed a site from mobile up and used a slider to display a my block of image for small screens (< 500px).

The provided jQuery function placed in the head works fine:

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>

but works all the time.

I've found an example of javascript to write a script to the head based on the window width that works pretty well:

var script = document.createElement('script');
script.type="text/javascript";

if(window.matchMedia("(max-width:499px)").matches) {
  jQuery(function($) {$(".slider").sss();});
}

document.getElementsByTagName('head')[0].appendChild(script);

But this doesn't respond to a changing window size. Once the function is loaded, it remains loaded and needs a manual refresh to either load or not load the function.

There must be a way to do this dynamically without having to refresh the page manually.

Answer 1

You can run your code on the resize event, like this:

function getDeviceDimension() {
    return {
        width: $(window).width()
    };
}

function setSliderSss() {
    var dd = getDeviceDimension();
    if (dd.width < 500) {
        $('.slider').sss();
    }
}

$(window).on('load resize', function() {
    setSliderSss();
});

Answer 2

Weave: http://kodeweave.sourceforge.net/editor/#3769a18794a75c3973ad798812bf0ad2

You can call your function using the .on event listener; with this you can add in .load and .resize and by using say .width inside an if else statement $(this).width() < 500 you can change the .html of whatever element you want for mobile and for desktop.

Here's a simple example!

$(window).on("load resize", function() {
  if ($(this).width() < 500) {
    $("[data-action=change]").html("Mobile")
  } else {
    $("[data-action=change]").html("Desktop")
  }
})

body {
  padding: 1em;
  text-align: center;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 data-action="change">
  Desktop
</h1>

My advise here is if you're just styling the page for this effect. Don't use JS, Instead use CSS Media Queries.

You can change HTML content with CSS using the content property however I would only recommend doing so if you're making something simple like an On/Off switch.

BTW: In JavaScript there's something called Conditional (ternary) Operator now I wouldn't use it for this particular purpose, but it's something to note. I made a video tutorial on it, in the past, but basically you have <condition> ? <true-value> : <false-value>. In some cases you may want to use a ternary operator over an if else statement. Here's an example of using a ternary operator for your problem. (I'm using Vanilla/Pure JS for this demo)

Hope this helps.

Answer 3

Created a simple screen detection that uses setInterval()... just to be different.

$_currentScreenWidth = $(window).width();
var screenDetection = setInterval(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): /** do something(); */  break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): /** do something(); */ break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): /** do something(); */  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): /** do something(); */  break;
            case ($_newScreenWidth >= 960): /** do something(); */  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
}, 200); // adjust this value to control the interval rate, in milliseconds; the lower the rate, the greater the responsiveness.

But the resize() event was built for this kind of use-case:

$_currentScreenWidth = $(window).width();
$(window).resize(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): console.log('<= 320'); break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): console.log('> 320 <= 480'); break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): console.log('> 480 <= 768');  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): console.log('> 768 < 960');  break;
            case ($_newScreenWidth >= 960): console.log('>= 960');  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
});