|
-
DOM Scripted Image Gallery Help Troubleshooting Older Browsers
Hey, i've got this DOM Scripted Image Gallery built and it works fine in Firefox and Safari but has major accesibility problems in Mac IE 5.2.3 which i'd like to straighten out and some minor problems in IE 6 I can't pinpoint. If someone can take a look and see if anything stands out that would be great. Thx.
Code:
<!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);
// 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
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 {}
#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>
-
I've narrowed the problem down to this chunk of code.
Code:
} 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);
};
More specifically I think this line:
Code:
delNodes.push(listNode);
Does anyone have any insight why Mac IE 5.2.3 would be choking on this line and how I could fix it?
-
Apparently, push() is not part of IE 5. Anyone have any ideas how I could work around this?
-
Bearded (M|G)od
delNodes[delNodes.length]=listNode;
something along those lines. im not an expert with javascript. basically the logic is putting the item to the end of the delNodes array. the array element you need to add it to is equal to the length of the array currently. for example, if there were 2 things in it already, you need to add the new element to delNodes[2] and delNodes.length is 2.
check into getting the length of an array in javascript.
-
Bearded (M|G)od
ok, i just did a little good search, and delNodes.length is the correct syntax, so change your line to:
delNodes[delNodes.length]=listNode;
i hope that solves your problem
-
That seems to have the same effect as just removing that line altogether. Which has some positive effects, but there is still a minor issue with the way dd and dt elements are inputing the text. That line doesn't seem to make a difference if it's included or not in Firefox.
-
Ok, Mac IE 5.2.3 doesn't support the push() function like you said, that line had to be changed to:
Code:
delNodes[delNodes.length]=listNode;
A bit more code but works in more browsers. Thx for that tip.
Now, what appears to be the FINAL problem has been narrowed down to this line:
Code:
thumb.replaceChild(thumb.image, thumb.firstChild);
Mac IE 5.2.3 does not like. If anyone has any ideas...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|