I need to let this script run on screen sizes with a width of 794 px or higher. For smaller screen sizes it should not run, because this makes problems with another script.

I have tried different stuff, but I don't really know how to make this happen.

jQuery(document).ready(function ($) {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Can anyone let me know, how I can adjust this to let this script just run on screen width 794 px or higher?

I need to let this script run on screen sizes with a width of 794 px or higher. For smaller screen sizes it should not run, because this makes problems with another script.

I have tried different stuff, but I don't really know how to make this happen.

jQuery(document).ready(function ($) {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Can anyone let me know, how I can adjust this to let this script just run on screen width 794 px or higher?

• javascript
• jquery
• scroll
• width
• screen

6 Answers 6

You can use window.matchMedia() for media queries in javascript.

for example

var mq = window.matchMedia( "(max-width: 570px)" );
if (mq.matches) {
    // window width is at less than 570px
}
else {
    // window width is greater than 570px
}

For web browser support : Please refer "https://hacks.mozilla/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/"

Update

If you want to run the script only once and not on resizing you can use

if($(window).width()>=794)
{
    //do your stuffs here
}

You can use window.width()

ex:

if(!$(window).width()<794)
{
    //do your stuffs here
}

use $(window).width()

if($(window).width() >= yourScreenSize)
{
   // your code goes here
}

A non jQuery solution would look something like this

if (window.innerWidth > 794) {
   myFunc(); //the code that you want to run on bigger screens
}

With jQuery:

$(function(){
    $( window ).resize(function(){
        if( $( window ).width() >= 794 ){
            // Your code here
        }
    });   
    $( window ).resize();    // Trigger window resize to check on load
});

jQuery(document).ready(function ($) {
$('a[href*=#]:not([href=#])').click(function () {
    if( $(window).width() >= 794 )
    {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
    }//window size check ends here
});

});