How to increase a CSS value by the value of a JS variable?


Tags: javascript,css,arrays,position

Problem :

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(" "));
        }


Solution :

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


    CSS Howto..

    How can I give a javascript element a CSS class?

    How do you make a menu scroll with the page, but leave the logo

    How to get conditional css to work on Blogger/Blogspot?

    How to set height?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    CSS: How to bring background image to the front?

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How to style a built-in comment box imported from a third party?

    How to make gridview in asp.net scrollable?

    How to make a CSS scroll follow div stop follow at a position

    How can I set the Eclipse JS to edit a file as CSS

    How to apply css hover on multiple elements

    How do I correctly position elements and lay out a page?

    CSS: How to make the padding-right between li even?

    How to skip first N elements with CSS or jQuery?

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How to create equal height columns in pure CSS [duplicate]

    how to place image on image?

    How to let the chrome forget the page scroll position?

    How to render email template in a page?

    How to make a picture hover over others without moving the other pictures?

    How to run PHP through Adobe Muse generated CSS

    Div Title on div border how to [closed]

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How php execute in file with extension .ctp in cakephp?

    How to horizontally stack elements using CSS?

    How to render a hierarchy tree in HTML5/CSS?

    How to Make a Picture rotate Continuously? [closed]

    How to get rid of css inherited from a css file?

    How to create vertical text using only CSS?