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

    CSS isn't shown when HTML file is opened in Word

    Drupal 7.x: how to apply styles to RSS feed in node?

    How to center field_with_errors class

    How to move some text down in a li tag?

    How to set auto width for the fixed child div, when parent div change width?

    How to change table width using css

    How to debug CSS with Firebug for an element that only appears when clicked?

    how do i remove the tab from this css megamenu

    ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

    How to change header size in css

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    How to represent a Grid with vertical header text in HTML?

    How to make a fixed menu/sidebar while using position:relative?

    GWT - How to create a drop down menu

    How to make the progress bar with html css javascript

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    How to create a slanting border with css

    how to make form input in middle

    How to create and edit a css file in browser Dom by javascript and then download it?

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How can I remove this white space from a table?

    How to make circle thing in CSS? [duplicate]

    How to override a templates default option with javascript and css

    How to toggle visibility of 2 divs after clicking a mailto link?

    How to style