CODEWITHSUNDEEP
javascriptjquery
Leo
Leo

Reputation: 977

making a function works on specific widths

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...

Upvotes: 0

Views: 87

Answers (1)

Sunny Patel
Sunny Patel

Reputation: 8078

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');.

Upvotes: 1

Related Questions