Back Shadow code

[dizzle]

Wondering if someone could check this code, trying to find out why it doesn't work in IE... The function takes a table object as an argument, and creates a similarly shaped table and offsets it behind the original for a shadow effect. Works good in Mozilla.

function makeShadow(strTableName) {
var tblOriginal = getElementByBrowser(strTableName);
var tblShadow = document.createElement("TABLE");

tblShadow.id = strTableName + ".shadow";

tblShadow.border = tblOriginal.border;

tblShadow.setAttribute("border","0");

tblShadow.setAttribute("cellPadding",tblOriginal.getAttribute("cellPadding"));
tblShadow.setAttribute("cellSpacing",tblOriginal.getAttribute("cellSpacing"));

tblShadow.setAttribute("height",tblOriginal.clientHeight);
tblShadow.setAttribute("width",tblOriginal.clientWidth);

tblShadow.setAttribute("class","shadow");

for (i=0;i<tblOriginal.rows.length;i++) {
tblShadow.insertRow(i);

tblShadow.rows[i].setAttribute("class",tblOriginal.rows[i].getAttribute("class"));
tblShadow.rows[i].setAttribute("style",tblOriginal.rows[i].getAttribute("style"));
for (j=0;j<tblOriginal.rows[i].cells.length;j++) {
tblShadow.rows[i].insertCell(j);

tblShadow.rows[i].cells[j].setAttribute("class",tblOriginal.rows[i].cells[j].getAttribute("class"));
tblShadow.rows[i].cells[j].setAttribute("style",tblOriginal.rows[i].cells[j].getAttribute("style"));

tblShadow.rows[i].cells[j].bgColor = "#888888";
tblShadow.rows[i].cells[j].bordercolor = "#888888";
tblShadow.rows[i].cells[j].style.background = "#888888";

strBackground = tblOriginal.rows[i].cells[j].style.background;

if (strBackground.indexOf("transparent") > -1) {
tblShadow.rows[i].cells[j].style.background = "transparent";
}

tblShadow.rows[i].cells[j].colSpan = tblOriginal.rows[i].cells[j].colSpan;
tblShadow.rows[i].cells[j].rowSpan = tblOriginal.rows[i].cells[j].rowSpan;

tblShadow.rows[i].cells[j].setAttribute("width",tblOriginal.rows[i].cells[j].clientWidth);
tblShadow.rows[i].cells[j].setAttribute("height",tblOriginal.rows[i].cells[j].clientHeight);
}
}

tblShadow.style.left = DL_GetElementLeft(tblOriginal) + 4;
tblShadow.style.top = DL_GetElementTop(tblOriginal) + 4;

docBody = document.getElementsByTagName("body").item(0);
docBody.appendChild(tblShadow);
}

getElementByBrowser() works, I know this. The problem with IE is that it writes the shadow table, but will not move it behind the original. It ends up being appended to the page. Any suggestions?

[baconbutty]

Some quick thoughts (untested) highlighted in bold



function makeShadow(strTableName) {
var tblOriginal = getElementByBrowser(strTableName);
var tblShadow = document.createElement("TABLE");

tblShadow.id = strTableName + ".shadow";

tblShadow.border = tblOriginal.border;

tblShadow.setAttribute("border","0");

tblShadow.setAttribute("cellPadding",tblOriginal.getAttribute("cellPadding"));
tblShadow.setAttribute("cellSpacing",tblOriginal.getAttribute("cellSpacing"));

tblShadow.setAttribute("height",tblOriginal.clientHeight);
tblShadow.setAttribute("width",tblOriginal.clientWidth);

tblShadow.setAttribute("class","shadow");
Think you need to use tblShadow.className="shadow" in IE

for (i=0;i<tblOriginal.rows.length;i++) {
tblShadow.insertRow(i);

tblShadow.rows[i].setAttribute("class",tblOriginal.rows[i].getAttribute("class"));
Think you need to use className="shadow" in IE

tblShadow.rows[i].setAttribute("style",tblOriginal.rows[i].getAttribute("style"));
Dont think you can get the style object in this way in IE. In IE you would need rows[i].style.cssText=tblOriginal.rows[i].style.cssText


for (j=0;j<tblOriginal.rows[i].cells.length;j++) {
tblShadow.rows[i].insertCell(j);

tblShadow.rows[i].cells[j].setAttribute("class",tblOriginal.rows[i].cells[j].getAttribute("class"));
See above

tblShadow.rows[i].cells[j].setAttribute("style",tblOriginal.rows[i].cells[j].getAttribute("style"));
See above

tblShadow.rows[i].cells[j].bgColor = "#888888";
tblShadow.rows[i].cells[j].bordercolor = "#888888";
tblShadow.rows[i].cells[j].style.background = "#888888";

strBackground = tblOriginal.rows[i].cells[j].style.background;
should be backgroundColor

if (strBackground.indexOf("transparent") > -1) {
tblShadow.rows[i].cells[j].style.background = "transparent";
should be backgroundColor

}

tblShadow.rows[i].cells[j].colSpan = tblOriginal.rows[i].cells[j].colSpan;
tblShadow.rows[i].cells[j].rowSpan = tblOriginal.rows[i].cells[j].rowSpan;

tblShadow.rows[i].cells[j].setAttribute("width",tblOriginal.rows[i].cells[j].clientWidth);
tblShadow.rows[i].cells[j].setAttribute("height",tblOriginal.rows[i].cells[j].clientHeight);
}
}

tblShadow.style.left = DL_GetElementLeft(tblOriginal) + 4;
tblShadow.style.top = DL_GetElementTop(tblOriginal) + 4;
do you not need to set tblShadow.style.position="absolute"?


docBody = document.getElementsByTagName("body").item(0);
docBody.appendChild(tblShadow);
}

[dizzle]

Thank you VERY much. It was the absolute positioning that had me wrong. I had specified position: absolute; in the object's style sheet but since I wasn't specifying the object's class right it didn't work. Works like a charm now! Thanks again.