adding pixels to jquery .css() left property

Question

This is my code:

var lef=$(this).css("left"); var top=$(this).css("top"); alert(lef); $(this).after("<div class='edit cancel' style='position:absolute;top:"+top+";left:"+lef+"'>Cancel</div>"); 

Now the statement var lef=$(this).css("left") + 150, doesn't seem to work. I want to get the left property and add 150 pixels to it

How can i do this ?

Thanks.

Answer 1

As of jQuery 1.6, you can do this most easily by simply adding or subtracting from the current value. For example, to add 150px:

$(this).css("left", "+=150")

http://api.jquery.com/css/#css-properties

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

Answer 2

Here's the easiest way (for the general case):

$(this).css('left', '+=150'); $(this).css('top', '-=100'); 

http://api.jquery.com/css/#css-properties

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

---

If you need to do it "manually" (for example, as part of creating a new element):

var left = parseInt($(this).css('left')) + 150; var top = parseInt($(this).css('top'));  $(this).after('<div style="top: ' + top + 'px; left: ' + left + 'px; position: absolute">Cancel</div>'); 

You need to use parseInt because .css('left') returns 150px. You then have to put back the px as part of the inline style.