|
|
|||||||
![]() |
|
|
Thread Tools | Search this Thread | Display Modes |
|
|
#1 |
|
Junior Member
Join Date: Feb 2003
Posts: 17
|
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>
|
|
|
|
|
|
#2 |
|
Junior Member
Join Date: Feb 2003
Posts: 17
|
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);
};
Code:
delNodes.push(listNode); |
|
|
|
|
|
#3 |
|
Junior Member
Join Date: Feb 2003
Posts: 17
|
Apparently, push() is not part of IE 5. Anyone have any ideas how I could work around this?
|
|
|
|
|
|
#4 |
|
Bearded (M|G)od
Join Date: Dec 2002
Location: Awesomeville.
Posts: 3,045
|
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.
__________________
[YDEK:] YDEK Productions | Flickr | Twitter | Facebook [Me:] MyFriendIsATaco.com | MattRobenolt.com | 528Hazelwood.com | I can take pictures, too! |
|
|
|
|
|
#5 |
|
Bearded (M|G)od
Join Date: Dec 2002
Location: Awesomeville.
Posts: 3,045
|
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
__________________
[YDEK:] YDEK Productions | Flickr | Twitter | Facebook [Me:] MyFriendIsATaco.com | MattRobenolt.com | 528Hazelwood.com | I can take pictures, too! |
|
|
|
|
|
#6 |
|
Junior Member
Join Date: Feb 2003
Posts: 17
|
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.
|
|
|
|
|
|
#7 |
|
Junior Member
Join Date: Feb 2003
Posts: 17
|
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; Now, what appears to be the FINAL problem has been narrowed down to this line: Code:
thumb.replaceChild(thumb.image, thumb.firstChild); |
|
|
|
![]() |
|
||||||
| Thread Tools | Search this Thread |
| Display Modes | |
|
|