Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Getting things working with Javascript for the first time

    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!
    Last edited by Democrazy; 09-18-2011 at 01:57 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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.

    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Old Pedant View Post
    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. View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •