Turning off js for responsiveness

Question

I've got a jQuery plugin scroll effect on my website, which I would like to turn off for screen sizes under 740px. I found a post that was similar to mine and tried what they suggested there, but all it does is turing off my plugin completely, no matter what screen size. I'm not sure which part of the script is malfunctioning.

Here's the script:

if(screen.width < 740) {
    return;
} else {
    $(function() {
        $.scrollify({
            section : "section",
        });
    });

    $.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {},
        afterResize:function() {}
    });
}

Does anyone have an idea what's wrong with this?

Thanks, Lisa

it's actually a syntax error for having a `return;` statement without wrapping it inside a function, check your console.log after loading the website — Icepickle, Aug 27 '15 at 08:47
I'm getting really tired of people posting Javascript problems without first checking the console for errors. — Barmar, Aug 27 '15 at 08:49
@Barmar At the end of the day, if the user poster is a *complete* beginner, at least you've taught them something — jonny, Aug 27 '15 at 08:50
I may say you will also have a problem when facing the case user resize manually the window. You should hear for the [.resize()](https://api.jquery.com/resize/) event handler instead. — Anwar, Aug 27 '15 at 08:51
I've taken out the return statement, now the plugin is working again but it's not turning off on screen sizes under 740px. — Lisa, Aug 27 '15 at 08:54

score 3 · Accepted Answer · answered Aug 27 '15 at 08:53

Why you call $.scrollify function two times? By the way, can you try this one?

$(function() {
    if($(screen).width() >= 740){
        $.scrollify({
            section : "section",
            sectionName : "section-name",
            easing: "easeOutExpo",
            scrollSpeed: 1100,
            offset : 0,
            scrollbars: true,
            before:function() {},
            after:function() {},
            afterResize:function() {}
        });
    }
});

score 1 · Answer 2 · answered Aug 27 '15 at 08:51

Remove the return that's a syntax error and check for width >= 740 only:

if(screen.width >= 740) {
    $(function() {
        $.scrollify({
            section : "section",
        });
    });

    $.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {},
        afterResize:function() {}
    });
}

score 0 · Answer 3 · answered Aug 27 '15 at 08:52

You should wrap your whole code into a function to make the return; statement work. For example you could make your code be executed when your document is ready:

<script>

$(document).ready(function(){
    if(screen.width < 740) {
        return;
    } else {
        $.scrollify({
            section : "section",
        });
        $.scrollify({
            section : "section",
            sectionName : "section-name",
            easing: "easeOutExpo",
            scrollSpeed: 1100,
            offset : 0,
            scrollbars: true,
            before:function() {},
            after:function() {},
            afterResize:function() {}
        });
    }
});

</script>

Turning off js for responsiveness

3 Answers3