decibel.places wrote: You

greg — Fri, 20 Feb 2009 19:11:50 +0000

decibel.places wrote:

You mean the repeated IDs are invalid or some other part?

yeah, repeated use of the same ID is not XHTML valid
ID "test" already defined

decibel.places wrote:

sure, why don't we ignore 45% of the viewers who choose or are forced to use IE :P

Can't we just burn them instead? ...

You mean the repeated IDs

decibel.places — Thu, 19 Feb 2009 19:07:58 +0000

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

webwiz wrote:

No. But there is "getElementsByClassName". Supported by the latest version of all major browsers, apart from the usual suspect.

sure, why don't we ignore 45% of the viewers who choose or are forced to use IE

@decibel.places - That

webwiz — Thu, 19 Feb 2009 18:49:19 +0000

@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.(?)

teammatt3 wrote:

There is no built in method for getElementsByClass

No. But there is "getElementsByClassName". Supported by the latest version of all major browsers, apart from the usual suspect.

you can repeat the id on

decibel.places — Thu, 19 Feb 2009 04:45:11 +0000

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>

But still interesting to

teammatt3 — Thu, 19 Feb 2009 03:23:07 +0000

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 be getElementByclass?

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.

teammatt3 wrote: You have

greg — Thu, 19 Feb 2009 03:01:00 +0000

teammatt3 wrote:

You have to hard code the images in the CSS!

My bad I linked to the wrong gallery. I did see that one first but decided against it for the same reason you mentioned
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 be getElementByclass?
(that's a guess as I really know no JS)

I just looked at the

teammatt3 — Wed, 18 Feb 2009 22:25:00 +0000

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.

This issue is no longer

greg — Wed, 18 Feb 2009 20:29:48 +0000

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?

yeah, changed the CSS to

greg — Wed, 18 Feb 2009 18:26:00 +0000

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 gallery2 is?
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....

Did you change your CSS to

teammatt3 — Wed, 18 Feb 2009 17:40:00 +0000

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>