Question

I have several fixed position divs with the same class at varying distances from the left edge of the window, and I’d like to increase/decrease that distance by an equal amount on each div when a certain action happens (in this case, the window being resized). I’ve tried positioning them with CSS and percentages rather than pixels, but it doesn’t quite do the job.

Is there a way to store the position of each of those divs in an array and then add/subtract a given amount of pixels?

Here’s what I’ve tried so far – I’m still getting my head around JS so this could be really bad for all I know, but here goes:

roomObjects = $('.object-pos');

var objectCount = 0;

for ( var objectCount = 0; objectCount < 10; objectCount++;) {
          roomObjects = rooomObjects[objectCount];
          console.log(roomObjects.css("background-position").split(" "));
        }

Answer 1

Do you mind sharing why percentages wouldn’t work? Usually that’s what I would recommend if you’re wanting the page to scale correctly on window resizes. I guess if you really wanted to you could do something like:

$(window).resize(function() { 
    $('#whateverdiv').style.whateverproperty = $('#whateverdiv').style.whateverproperty.toString() + (newPosition - oldPosition);
    oldPosition = newPosition;
}

this is obviously not the complete code, but you should be able to fill in the blanks. You’ll have to set the oldPosition variable on page load with the original position so that the function works the first time.

edit: you’ll also have to strip off the units from the x.style.property string, so that you’ll be able to add the value to it