DOM Scripted Image Gallery Help Troubleshooting Older Browsers

wyclef · 05-16-2006, 01:38 PM

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>

wyclef · 05-17-2006, 01:40 AM

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?

wyclef · 05-17-2006, 11:43 AM

Apparently, push() is not part of IE 5. Anyone have any ideas how I could work around this?

**MyFriendIsATaco** · 05-17-2006, 12:58 PM

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.

**MyFriendIsATaco** · 05-17-2006, 01:01 PM

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

wyclef · 05-17-2006, 01:10 PM

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.

wyclef · 05-17-2006, 09:21 PM

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...

05-17-2006, 12:58 PM	#4
MyFriendIsATaco 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!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-17-2006, 01:40 AM	#2
wyclef 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); }; 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?

05-17-2006, 11:43 AM	#3
wyclef 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?

05-17-2006, 01:01 PM	#5
MyFriendIsATaco 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!

05-17-2006, 01:10 PM	#6
wyclef 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.

05-17-2006, 09:21 PM	#7
wyclef 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; 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...