I'm trying to copy a element's dimensions and the position(relative to the document) onto another element.

Ex:

  var SelectedElement = $("div#MyTargetElement");

  // The CopiedButEmpty element is a div with absolute position that is meant to hover/float above the selected element.
  $("div#CopiedButEmpty").css("width", SelectedElement.width()).css("height", SelectedElement.height())
    .css("left", SelectedElement.offset().left).css("top", SelectedElement.offset().top)
    .css("marginTop", SelectedElement.css("marginTop")).css("marginLeft", SelectedElement.css("marginLeft"))
    .css("marginRight", SelectedElement.css("marginRight")).css("marginBottom", SelectedElement.css("marginBottom"))
    .css("paddingLeft", SelectedElement.css("paddingLeft")).css("paddingTop", SelectedElement.css("paddingTop"))
    .css("paddingRight", SelectedElement.css("paddingRight")).css("paddingBottom", SelectedElement.css("paddingBottom"));

But in some cases, it still does not give me the correct position. Am I missing something? Is there any way to easily copy an elements position(relative to the document), so my element "CopiedButEmpty" can hover the element.

I'm trying to copy a element's dimensions and the position(relative to the document) onto another element.

Ex:

  var SelectedElement = $("div#MyTargetElement");

  // The CopiedButEmpty element is a div with absolute position that is meant to hover/float above the selected element.
  $("div#CopiedButEmpty").css("width", SelectedElement.width()).css("height", SelectedElement.height())
    .css("left", SelectedElement.offset().left).css("top", SelectedElement.offset().top)
    .css("marginTop", SelectedElement.css("marginTop")).css("marginLeft", SelectedElement.css("marginLeft"))
    .css("marginRight", SelectedElement.css("marginRight")).css("marginBottom", SelectedElement.css("marginBottom"))
    .css("paddingLeft", SelectedElement.css("paddingLeft")).css("paddingTop", SelectedElement.css("paddingTop"))
    .css("paddingRight", SelectedElement.css("paddingRight")).css("paddingBottom", SelectedElement.css("paddingBottom"));

But in some cases, it still does not give me the correct position. Am I missing something? Is there any way to easily copy an elements position(relative to the document), so my element "CopiedButEmpty" can hover the element.

• javascript
• jquery
• css
• copy
• position

1 Answer 1

I wonder why you didn't chose to use jquery clone().