[jQuery] Problem with CSS in clone()
Here is the scenario
I have a div element which which acts like container to other elements
in my page
<div class="container">
<div style=" left: 251px; top: 150px; position: absolute; width:
410px; height: 301px;" id="clonediv1" class="cmenu1 ui-draggable
dragged ui-resizable">
</div>
</div>
Now in a javascrpt method i do this
// Cloning the above container
var htmlClone = $("#container").clone();
// Trying to see if it is cloned
alert("<html><head></head><body>"+htmlClone.html()+"</body></html>");
// Trying to iterate over all children and then decrement their height
with some predefined height
htmlClone.children().each(function(i,v) {
var theTag = v.tagName;
console.log("tag Name:"+theTag);
var topPix = $(this).offset().top; // Current distance dragged
element has traveled vertically
var leftPix = $(this).offset().left; // Current distance dragged
element has traveled horizontally
// <<<<Problem Here>>> I always get top and left as 0 and 0
alert($(this).html());
console.log("top & Left:"+topPix+" "+leftPix);
console.log("componentBarHeight : "+componentBarHeight);
// Try to reduce top value here
$(this).css({"left":leftPix,"top":topPix-componentBarHeight});
});
// Try ti check final HTML. Final HTML is bad because my top and left
are always zero
alert("<html><head></head><body>"+htmlClone.html()+"</body></html>");
Am i doing any mistake???