making a function works on specific widths

Question

I am trying to make this function works only when the screen size is above 1024px.

//Parallax background image
    var velocity = 0.5;
    function update(){ 
        var pos = $(window).scrollTop(); 
        $('.parallax').each(function() { 
            var $element = $(this);
            var height = $element.height();
            $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
        });
    };$(window).bind('scroll', update); update();

Here is what I have tried to do:

    //Parallax background image
    var velocity = 0.5;
     $(window).on("ready resize", function() {
   if ($(window).width() < 770) {

    function update(){ 
        var pos = $(window).scrollTop(); 
        $('.parallax').each(function() { 
            var $element = $(this);
            var height = $element.height();
            $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
        });
    };});$(window).bind('scroll', update); update();

I really don't know what I am doing wrong...

As per your requirement, your condition should be `if ($(window).width() > 1024) {` — Manoj Yadav, Apr 22 '14 at 18:41
Your code does nothing to unbind the scroll when the width is less than your requirement. — Kevin B, Apr 22 '14 at 20:18

Sunny Patel · Answer 1 · 2014-04-22T20:13:13.247

You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.

//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};

//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
    if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
        update = function () { //Set update to run this function when executed.
            var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/

            //For each element with 'parallax' class, execute the following function
            $('.parallax').each(function () {
                var $element = $(this); //Get the current parallax-classed element
                var height = $element.height(); //Save the current height of this element

                //Set the CSS of this parallax-classed element set the background position 
                $(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
            });
        };
    } else { //Execute if screen width is < 1024px
        update = function () {}; //Set update to do nothing 
    }
});

//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();

Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.

You were missing a + or - within the background-position setting.

So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.

What part isn't working? You need to be more specific. Common method of debugging is to insert `console.log` statements at critical points of the code to see if your statements are getting executed properly. If you don't see the messages, then your problem lies higher up in the code. http://stackoverflow.com/questions/4539253/what-is-console-log — Sunny Patel, Apr 22 '14 at 18:53
Nothing is showing up, I already tried, when I replace the old code with this one, the function stopes working — Leo, Apr 22 '14 at 18:55
That's what the console is for. Open it up in the browser, so you're not blindly adding broken code while wondering what's wrong. You can do this by hitting `Ctrl + Shift + J` in **Chrome**, or `F12` in other browsers. — Sunny Patel, Apr 22 '14 at 18:57
oh! It's showing uncaught reference error - update is not defined — Leo, Apr 22 '14 at 19:01
Because you're scrolling before window is ready.. interesting. That's easily fixed by adding `var update = function() {}` as an initializer to be safe (Hint: Place at the top of your code!). — Sunny Patel, Apr 22 '14 at 19:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51206/discussion-between-leo-and-laughdonor) — Leo, Apr 22 '14 at 19:04

making a function works on specific widths

1 Answers1