defining background element using jQuery based on current width

Question

I need to implement a multi- if...else if...else statement in a jQuery plugin for a responsive parallax background image and its position.

The code I have so far is:

if ($thirdBG.hasClass("inview")){
  //call the newPos function and change the background position
  $thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2550, 0)});
  //$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
  if (current_width < 960) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 768) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 480) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else if (current_width < 320) {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
  }
  else {
    bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
  }
  //bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
  //call the newPos function and change the second background position
}

However, that isn't exactly what I want. This code defines if a width is less than a certain size. I would like it to say something like

if (current_width > 320 and < 480) {
  bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}

What I want is basically:

Display bg3 at position X for the following size ranges:

Greater than 320 but less than or equal to 480 Greater than 480 but less than or equal to 768 Greater than 768 but less than or equal to 960 Greater than 960

Not sure of what the syntax would need to be.

And is there a more efficient way of writing that code than the multiple if...else if...else statements I have?

Finally, I was wondering how I can echo back the current vertical scroll position on screen so I can get an idea of where to position the images without having to save and reload the page 1000 times.

---

Adding the full nbw-parallax.js plugin code here:

/*
Demo: Despiration Tutorial Parallax Demo
Author: Elias Ghosn - Despiration.com
Author URL: http://www.despiration.com/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Despiration.com simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.despiration.com/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

$(document).ready(function() { //when the document is ready...
    var current_width = $(window).width();
     //do something with the width value here!
     //jQuery('nav').removeClass("is-sticky");
    if(current_width < 960){
      jQuery('nav').addClass("is-sticky");

    }
    $(".menusel").click(function () {   $(".mobico").fadeIn('slow');});
    $(".mobico a").click(function () {   $(".mobico").fadeOut('slow');});
    //save selectors as variables to increase performance
    var $window = $(window);
    var $firstBG = $('#intro');
    var bg1 = $("#intro .bg1");
    var $secondBG = $('#separator1');
    var bg2 = $("#separator1 .bg2");
    var $thirdBG = $('#separator2');
    var bg3 = $("#separator2 .bg3");
    var $fourthBG = $('#separator3');
    var bg4 = $("#separator3 .bg4");

    var windowHeight = $window.height(); //get the height of the window


    //apply the class "inview" to a section that is in the viewport
    $('#intro, #separator1, #separator2, #separator3').bind('inview', function (event, visible) {
            if (visible == true) {
            $(this).addClass("inview");
            } else {
            $(this).removeClass("inview");
            }
        });


    //function that places the navigation in the center of the window
    function RepositionNav(){
        var windowHeight = $window.height(); //get the height of the window
        var navHeight = $('#nav').height() / 2;
        var windowCenter = (windowHeight / 2);
        var newtop = windowCenter - navHeight;
        $('#nav').css({"top": newtop}); //set the new top position of the navigation list
    }

    //function that is called for every pixel the user scrolls. Determines the position of the background
    /*arguments:
        x = horizontal position of background
        windowHeight = height of the viewport
        pos = position of the scrollbar
        adjuster = adjust the position of the background
        inertia = how fast the background moves in relation to scrolling
    */
    function newPos(x, windowHeight, pos, adjuster, inertia){
        return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
    }

    //function to be called whenever the window is scrolled or resized
    function Move(){
        var pos = $window.scrollTop(); //position of the scrollbar

        //if the first section is in view...
        if($firstBG.hasClass("inview")){
            //call the newPos function and change the background position
            $firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 500, 0)});
            //call the newPos function and change the second background position
            bg1.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.2)});
        }

        //if the second section is in view...
        if($secondBG.hasClass("inview")){
            //call the newPos function and change the background position
            $secondBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 1550, 0)});
            //$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
            bg2.css({'backgroundPosition': newPos(90, windowHeight, pos, 2610, 0.2)});
            //call the newPos function and change the second background position
        }

        if ($thirdBG.hasClass("inview")){
            //call the newPos function and change the background position
            $thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2550, 0)});
            //$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
            if (current_width < 320) {
                bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
            }
            else if (current_width = 320 && < 480) {
                bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
            }
            else if (current_width = 480 && < 768) {
                bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
            }
            else if (current_width = 768 && < 960) {
                bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
            }
            else {
                bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
            }
            //bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
            //call the newPos function and change the second background position
        }

        if ($fourthBG.hasClass("inview")){
            //call the newPos function and change the background position
            $fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 5850, 0)});
            //$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
            //call the newPos function and change the second background position
            if (current_width < 320) {
                bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
            }
            else if (current_width = 320 && < 480) {
                bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
            }
            else if (current_width = 480 && < 768) {
                bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
            }
            else if (current_width = 768 && < 960) {
                bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
            }
            else {
                bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 6110, 0.20)});
            }
        //bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 6110, 0.20)});
        }

        $('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
    }

    RepositionNav(); //Reposition the Navigation to center it in the window when the script loads

    $window.resize(function(){ //if the user resizes the window...
    var current_width = $(window).width();
     //do something with the width value here!
    // jQuery('nav').removeClass("is-sticky");
    if(current_width < 960){
      jQuery('nav').addClass("is-sticky");

    }
        Move(); //move the background images in relation to the movement of the scrollbar
        RepositionNav(); //reposition the navigation list so it remains vertically central
    });

    $window.bind('scroll', function(){ //when the user is scrolling...
        Move(); //move the background images in relation to the movement of the scrollbar
    });

});

Answer 1

The first thing about the if statement: you can write:

if( width < someval ){
    .
    .
} else if( width > someotherval && width < sometotalotherval ){

} else {

}

so using the && or || operators.

I do not know what you mean with »echo back and save 100o times«.

Greetings...

Edit:

in order to this comment fragment:

What I need to know is where the div starts and ends in the browser window at different widths (and not just the div that is in front, but the bg div that is behind.

Have a look at the:

<element>.getBoundingClientRect()

method. It returns four values: top, left, right and bottom of arbitrary html elements and their origin is the top left corner of the screen. So if an element is not visible because it is at the top and document is scrolled down, than the top value is negative and if the bottom value is negative too, you know that the element is completely invisible. With this method you can easily get the start and end of a div.

Answer 2

If you reverse the order of your statements using lowest value first you won't have the same overlap problem. Only one of the conditions will be true

if( current_width < 320 ){

}else if( current_width < 480){
  /* true when greater or equal to 320 and less than 480 */
}

/* etc*/