HTML and CSS doesn't work when used twice in same page
I have been altering a CSS and JS based image gallery (kindly provided by Stu Nichols) and while the code works fine the first instance on the page, it doesn't from subsequent usage on the same page.
I use the gallery multiple times on the same page as the portfolio shows several different pieces of work.
The main image and thumbnails all load fine each time, but after the first gallery, the thumbnails do nothing when clicked (supposed to change the main image to the thumb clicked)
I'm also not happy about using ID's multiple times in the same page. but cannot (seemingly) change the CSS ID's to Classes as it doesn't work at all then.
It could be something simple in the JS code, but JS is all ancient Mandarin Chinese to me.
JAVASCRIPT CODE
<?php
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";
}
}
}
?>CSS CODE
<?php
#gallery {width:550px; position:relative; float: left;}
#gallery ul {list-style:none; padding:5px; margin:460px 0px 50px 30px;
width:400px; height: 105px; 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; width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute; left:40px; top:420px;
width:400px;font-family:verdana, arial, sans-serif; color:#06a;
font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li span b {color:#444;}
/* required for IE5.x and IE6 */
#gallery ul li.click i img.default {margin:5px auto 0 auto;
width:500px; height:375px;}
#gallery ul li.off {display:none;}
#gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}
#gallery ul li.click i {position:absolute; left:0; top:0;
width:545px; height:355px;}
#gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto;
border:1px solid #78780e; padding: 5px;}
#gallery ul li.click span {display:block;}
?>HTML
<?php
<body onload="clickMenu('gallery')">
<div id="gallery">
<ul>
<li class="click"><i><img class="default" src="imgs/image1.jpg" title="" alt="" /></i><span><b>Some text</b></span></li>
<li><i><img src="imgs/image2.jpg" title="" alt="" /></i><span><b>Some text</b></span></li>
<li><i><img src="imgs/image3.jpg" title="" alt="" /></i><span><b>Some text</b></span></li>
<li><i><img src="imgs/image4.jpg" title="" alt="" /></i><span><b>Some text</b></span></li>
</ul>
</div>
?>As said, the first instance works fine, but any subsequent use of the above HTML on the same page stops the thumbnails changing the default image when clicked (the first one still works with multiple usage).
(I only declare the <body> once)
Any ideas?
pr0gr4mm3r posted this at 17:30 — 18th February 2009.
He has: 1,502 posts
Joined: Sep 2006
That's probably your problem. Using the same ID for multiple sections is not an option. The ID is a unique identifier.
greg posted this at 17:32 — 18th February 2009.
He has: 1,581 posts
Joined: Nov 2005
Hmm, it's the first thing I changed, but then the gallery didn't work at all using classes.
So
Why does it not work with classes when it does with ID?
teammatt3 posted this at 17:40 — 18th February 2009.
He has: 2,102 posts
Joined: Sep 2003
Did you change your CSS to use dots instead of hashes since you aren't using IDs anymore?
E.g:
#gallery {width:550px; position:relative; float: left;}
needs to be
.gallery {width:550px; position:relative; float: left;}
HTML would look like
<body onload="clickMenu('gallery'); clickMenu('gallery2')"><div id="gallery" class="gallery>
...
<div id="gallery2" class="gallery>
greg posted this at 18:26 — 18th February 2009.
He has: 1,581 posts
Joined: Nov 2005
yeah, changed the CSS to classes and altered HTML accordingly
(there is only one to alter anyway
#gallery)Although I'm not sure why your example has ID and class?
<div id="gallery" class="gallery>Nor what the
gallery2is?Is that a way I can call a second gallery with the JS? If yes, that would mean calling a new one for every gallery....
greg posted this at 20:29 — 18th February 2009.
He has: 1,581 posts
Joined: Nov 2005
This issue is no longer relevant, the client wants a preview of each job then the gallery on a separate page after clicking the preview.
But, I ca';t walk away from issues without figuring them out.. so are there certain CSS things that specifically require ID rather than Class?
Or is there some other reason the code didn't work with a class where it did with ID?
teammatt3 posted this at 22:25 — 18th February 2009.
He has: 2,102 posts
Joined: Sep 2003
I just looked at the script's CSS and it's not pretty. You have to hard code the images in the CSS! You'd have to create a duplicate set of #gallery rules for every single gallery on the page and set all the thumbnail images.
You don't need to modify the JS.
All in all, you need to create a bunch of copies of the #gallery rules and give them unique names (#gallery2, #gallery3, etc) and pass that ID to the JS.
greg posted this at 03:01 — 19th February 2009.
He has: 1,581 posts
Joined: Nov 2005
This is the gallery I use
Which uses the code I pasted above (code in my first post is different to the one you have been viewing from the link)
As I said, the issue is resolved by the galleries being on a second page one at a time. But still interesting to know why it didn't work when I changed the ID to a class.
Could it be something to do with this in the JS -
getElementById? Should begetElementByclass?(that's a guess as I really know no JS)
teammatt3 posted this at 03:23 — 19th February 2009.
He has: 2,102 posts
Joined: Sep 2003
Because the JS wants an ID, not a class (yup, that's why it used getElementById). As I said before, you can modify your CSS to make it use classes instead of IDs, but you still have to pass the Javascript an ID (even though the ID is not referenced by the CSS).
There is no built in method for getElementsByClass
You can write your own though. Or use a framework like jQuery.
decibel.places posted this at 04:45 — 19th February 2009.
He has: 1,494 posts
Joined: Jun 2008
you can repeat the id on elements, but it is not recommended and can lead to confusions
source of attached file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> reuse id </title>
<style>
#test {width: 250px; height: 150px; background: red}
</style>
</head>
<body>
<p id="test">Paragraph1</p>
<p id="test">Paragraph2</p>
<div id="test">
div
</div>
</body>
</html>
webwiz posted this at 18:49 — 19th February 2009.
He has: 629 posts
Joined: May 2007
@decibel.places - That markup is, of course, not valid HTML- but you know that. I'm not sure what "getElementById()" would return in such a case, either.(?)
No. But there is "getElementsByClassName". Supported by the latest version of all major browsers, apart from the usual suspect.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
decibel.places posted this at 19:07 — 19th February 2009.
He has: 1,494 posts
Joined: Jun 2008
You mean the repeated IDs are invalid or some other part?
Yeah, getelementbyid would be pretty meaningless - like on last night's LOST episode - the results would be unpredictable
I suppose the reuse of IDs works in the OP code because the elements with the same ID are the same type of element...
sure, why don't we ignore 45% of the viewers who choose or are forced to use IE
greg posted this at 19:11 — 20th February 2009.
He has: 1,581 posts
Joined: Nov 2005
ID "test" already definedWant to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.