Getting things working with Javascript for the first time

Democrazy · 09-18-2011, 01:13 PM

Greetz,

I am new to JS and using code that someone gave me.
I have cleaned up the code, made it standard compliant and tailored it to my need.

The code is for an ultra basic picture gallery. The code is almost perfect, but there is one undesirable effect in which when an image is selected from the thumbnail gallery, the thumbnail dissapears as I am guessing its the same element, just blown up.
What I would like to know is how I can stop it from happening?

I will post the full output of the HTML file. I have also uploaded zip file which contains the HTML file and two images, so one may see the compiled page as I do.

Zip file (Note: STUPID hosting site placed the DOWNLOAD button right under "MP3 ringtones"... Clicking download will not take you to some premium SMS service or anything like that):
http://qfs.mobi/f31666

Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<TITLE></TITLE>

<META content="charset=windows-1252;text/html" http-equiv="content-type">

<SCRIPT  type="text/javascript">
	clickMenu = function(menu) {
		var getEls = document.getElementById(menu).getElementsByTagName("LI");
		var getAgn = getEls;
		for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
					getAgn[x].className=getAgn[x].className.replace("click", "");
				}
				this.className+=" click";
			}
		}
	}
</SCRIPT>
<STYLE type="text/css">

	#gallery ul {
		float:right;
		overflow:auto
	}
	#gallery ul li {
		display:inline;
		width:50px;
		height:50px;
		float:left;
		margin:0 4px 4px 0;
		border:1px solid #444;
		cursor:pointer
	}
	#gallery ul li img {
		display:block;
		height:50px
	}
	#gallery ul li span {
		display:none;
		position:absolute;
		left:447px;
		top:235px;
		font-family:verdana;
		color:#06a
	}
	#gallery ul li.click {
		border-color:#fc0;
		cursor:default
	}
	#gallery ul li.click i {
		position:absolute;
		left:0;
		width:545px
	}
	#gallery ul li.click i img {
		margin:5px auto 0 auto;
		height:auto
	}
	#gallery ul li.click span {
	display:block
	}

</STYLE>

<BODY onload="clickMenu('gallery')">

	<DIV id="gallery">
		<UL>
			<LI><I><IMG src="1.png" title="" alt=""></I><SPAN>Front</SPAN></LI>
			<LI><I><IMG src="2.png" title="" alt=""></I><SPAN>Back</SPAN></LI>
		</UL>

	</DIV>
</BODY>

Much appreciated!

Old Pedant · 09-18-2011, 09:00 PM

Quote:

the thumbnail dissapears as I am guessing its the same element, just blown up.

Nothing "disappears". It just gets bigger or smaller.

Why do you "guess* it is the "same element" when clearly it is?

No place on the page do you have any <img> elements *EXCEPT* in your <li>'s.

So how could you "guess" otherwise. Yes, it is of course the same element. It has to be. That's how you coded it.

Quote:

What I would like to know is how I can stop it from happening?

By throwing out that code and starting over. If you want a large image to appear elsewhere on the page--*NOT* in place of the thumbnail--then you will have to indeed put it someplace else. That means, at a minimum, another <img> tag to hold the larger image.

DaveyErwin · 09-18-2011, 09:07 PM

Quote:

Originally Posted by Old Pedant

Nothing "disappears". It just gets bigger or smaller.

Why do you "guess* it is the "same element" when clearly it is?

No place on the page do you have any <img> elements *EXCEPT* in your <li>'s.

So how could you "guess" otherwise. Yes, it is of course the same element. It has to be. That's how you coded it.

Well , it actually was posted first by Mr.
Democrazy is just starting out with javascript.

Quote:

Originally Posted by Mr.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Photo Gallery</title>


<script>

clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;

	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("click", "");
				}
				this.className+=" click";
				}
			}
		}
</script>

This uses very little script.

Old Pedant · 09-18-2011, 10:20 PM

Didn't see Mr.'s post.

Well, Democrazy, that's what happens when you use any old script you find on the internet. Sometimes it's wonderful. Sometimes it's just okay. Sometimes it is pure crap. But all too often--wonderful or okay or crap--you have to adapt it to your own purposes.

Democrazy · 09-19-2011, 05:45 AM

Quote:

Originally Posted by Old Pedant

By throwing out that code and starting over. If you want a large image to appear elsewhere on the page--*NOT* in place of the thumbnail--then you will have to indeed put it someplace else. That means, at a minimum, another <img> tag to hold the larger image.

Could you give me some example code of how it can be done?
As I said, I am brand new to Javascript. I don't know what I am looking for, but if I had some example code to learn off, my knowledge of Javascript will start to snowball.

Old Pedant · 09-19-2011, 06:45 PM

Demos I have created for others in the past. None are really great, but they demo concepts at least.

http://www.clearviewarts.com/picker.html

http://www.clearviewarts.com/slideshow.html

http://www.clearviewarts.com/fadebigdemo.html