Say for instance i have one image inside the <div>. And i have one client side button called "Get Html".
<div id='ParentDIV' style='position:absolute;overflow:hidden;width:500pt; height:500pt'></div>
<img style="left: 333px; position: absolute; top: 152px" src="Tiger.gif" alt="" />
</div>
Now when i click the button, i want to get the <img> tag data.
I am able to do this in IE, but not in firefox.
IE Code:-
var CE_Designer = document.getElementById(CanvasID);
var getDoc = CE_Designer.GetDocument();
var parentDivContent = getDoc.getElementById('ParentDIV').innerHTML;
if (parentDivContent.length == 0)
{
return;
}
var editselection = CE_Designer.GetSelection();
var cloneDIV = null;
var topCoord = "";
var leftCoord = "";
// Firefox
if (CE_Designer.GetSelection().rangeCount > 0)
{
}
// IE
else
{
var range = editselection.createRange();
if (editselection.type == 'Control')
{
if (range.length == 1)
{
var element = range.item(0);
// If the selection is a img
if (element.tagName == 'IMG' && element.id != "BarcodeTypeId")
{
//Fetch the coordinates of the layer which is going to be cloned.
topCoord = element.style.top;
leftCoord = element.style.left;
cloneDIV = element.getAttribute("outerHTML");
//Replace the old top and left coordinates with the new ones.
cloneDIV = cloneDIV.replace(topCoord, "10px");
cloneDIV = cloneDIV.replace(leftCoord, "10px");
//Finally add the cloned IMG to the parent layer and the job is done.
getDoc.getElementById('ParentDIV').innerHTML = parentDivContent + cloneDIV;
}
}
}
}
Karan Singh
(Web Developer)