I'm also having trouble with push() in IE 5. Could someone take a look at this script, specifically the line:
[html]delNodes.push(listNode);[/html]
and give some advice on a workaround?
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dom Gallery</title>
<script type="text/javascript">
var initImageGallery = function () {
var gallery = document.getElementById("imageGallery");
//
var thumbs = document.getElementById("thumbs");
var imageList = document.getElementById("imageList");
//
var view = document.getElementById("view");
var viewDesc = document.getElementById("viewDesc");
var viewImage = document.getElementById("viewImage");
var fullImage = document.createElement("img");
fullImage.setAttribute("id", "fullImage");
// nodes to be deleted array
var delNodes = new Array();
for (var i=0; i<imageList.childNodes.length; i++) {
var listNode = imageList.childNodes[i];
if (listNode.nodeName.toLowerCase() == "dt") {
// link
var thumb = listNode.firstChild;
thumb.src = thumb.getAttribute("href").replace(".", "_thumb.");
thumb.setAttribute("title", thumb.firstChild.nodeValue);
// create desc dl
thumb.desc = document.createElement("dl");
//
thumb.dt = document.createElement("dt");
thumb.dt.appendChild(document.createTextNode(thumb .title));
thumb.desc.appendChild(thumb.dt);
// add thumbnail image
thumb.image = document.createElement("img");
thumb.image.className = "thumbnail";
thumb.image.setAttribute("src", thumb.src);
thumb.image.setAttribute("title", thumb.title);
thumb.image.setAttribute("alt", thumb.title);
//alert(thumb.image.getAttribute("src"));
// replace link text with the image
thumb.replaceChild(thumb.image, thumb.firstChild)
thumb.onclick = function () {
// there is no image in viewImage div
if (!document.getElementById("fullImage")) {
// then add fullImage there
viewImage.appendChild(fullImage);
}
// change fullImages src and title
fullImage.setAttribute("src", this.getAttribute("href"));
fullImage.setAttribute("title", this.getAttribute("title"));
// if description dl exists
// alert(viewDesc.getElementsByTagName);
// alert(viewDesc.appendChild);
if (viewDesc.getElementsByTagName("dl").length != 0) {
// remove it
viewDesc.removeChild(viewDesc.getElementsByTagName ("dl")[0]);
}
viewDesc.appendChild(this.desc);
return false;
};
} else if (listNode.nodeName.toLowerCase() == "dd") {
// add dd's
var tempNode = listNode.cloneNode(true);
thumb.desc.appendChild(tempNode);
// add listNode to the delNodes array
// and remove it later
delNodes.push(listNode);
};
};
// remove nodes (dds from imageList dl)
for (var k in delNodes) {
imageList.removeChild(delNodes[k]);
}
// put the last image and descriptions in place
thumb.onclick();
};
window.onload = function () {
initImageGallery();
}
</script>
<style type="text/css">
* {margin: 0; padding: 0; border: none;}
body { font-family:Arial, Helvetica, sans-serif; font-size:1em; background:#000; color:#9f9f9f;}
#imageGallery {}
#thumbs { width: 40%; float:left;}
#thumbs dl { margin: 20px;}
#thumbs dt {}
#thumbs dd {display:none;}
#thumbs .thumbnail { margin: 4px; padding:4px; background:#313133; float: left;}
#view { width: 60%; float:left;}
#viewDesc { }
#viewDesc dl { margin: 20px;}
#viewDesc dt { font-size:1.1em; font-weight:bold;}
#viewDesc dd {}
#viewImage { }
#viewImage #fullImage { padding:15px; background:#313133;}
h1 {margin: 20px; text-transform:uppercase; font-size:1.2em; color:#5cdd83;}
</style>
</head>
<body>
<div id="imageGallery">
<div id="thumbs">
<h1>Thumbnails</h1>
<dl id="imageList">
<dt><a href="image001.jpg">Image 001</a></dt>
<dd>Description of Image 001 1</dd>
<dd>Description of Image 001 2</dd>
<dd>Description of Image 001 3</dd>
<dd>Description of Image 001 4</dd>
<dt><a href="image002.jpg">Image 002</a></dt>
<dd>Description of Image 002 1</dd>
<dd>Description of Image 002 2</dd>
<dt><a href="image003.jpg">Image 003</a></dt>
<dd>Description of Image 003 1</dd>
<dd>Description of Image 003 2</dd>
<dd>Description of Image 003 3</dd>
<dt><a href="image004.jpg">Image 004</a></dt>
<dd>Description of Image 004 1</dd>
</dl>
</div>
<div id="view">
<div id="viewDesc">
<h1>Title and description</h1>
</div>
<div id="viewImage">
<h1>Artwork</h1>
</div>
</div>
</div>
</body>
</html>
[/html]
