CODEWITHSUNDEEP
jquerycsswidth
joe coleman
joe coleman

Reputation: 33

Can i use .outerWidth() with .css() to move it to the right

Edited to make question more concise.

Can i use the outerWidth() value within the .css() method to offset the position of the "#item" by two times it's width.

For example:

$("#item").css("left", - (2 x outerwidth(this)));

The accepted answer, refers heavily to the original (more convoluted and broad) question I asked encompassing a wider set of functions I was developing.

elem.css('left', $(window).width()+'px');

This moved the element suitably, without relying on the outerWidth() value.

Upvotes: 1

Views: 530

Answers (5)

Ram
Ram

Reputation: 144689

Try this:

$("#item").css("left", - (2 * $('#item').outerWidth()));

outerWidth() is a jQuery method and for using that you should at first create a jQuery object (by selecting an element). please note that in JavaScript for multiplication you should use * operator not x.

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Something like this:

var elem = $("#item");

// 1. animate to left
elem.animate({'left': -(2 * elem.outerWidth())+'px'}, function() { 

    // 2. move to outside right border
    elem.css('left', $(window).width()+'px'); 

    // 3. animate to starting position 
    elem.animate({'left': '0px'});
});

Upvotes: 1

Sem
Sem

Reputation: 4669

$("#item").css("left", - (2 * $("#item").outerwidth()));

Should do the trick

Upvotes: 0

Engineer
Engineer

Reputation: 48793

Are you looking for this?

$("#item").css("left", function(i, oldLeft){
    return -2*$(this).outerWidth();
});

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

From the jQuery .css() documentation:

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.

From that, I think what you want is:

$("#item").css("left", "-=" + (2 x outerwidth(this)));

Note: I'm assuming outerwidth is a valid function (likely that you've written yourself) in the above line of code.

Upvotes: 0

Related Questions