[SOLVED] Has anyone come across this problem before?

[spires]

Hi Guys.

 

Please check out this site.

Check out http://www.spirestest.com/product2.php

 

HOW IT WORKS:

Whats happens is the 'more information >>' button will start the mootools scroll effect.

There are 7 areas that get scrolled through. The 'more information >>' button only appears

in the first area. After that the button chages to '' = Next area.

 

THE PROBLEM:

Each of the buttons use an 'id' this determines which area will show.

For Example id="link3" will go to 'area 3'.

But whats happening is, I can only use the id="***" once on the page.

If I use it for a second time, only the link that appears first is active.

The second link, does nothing.

 

STRUCTURE:

* = Does not work.

>> = id="link2"

<< = id="link1" | >> = id="link3"

<< = id="link2"* | >> = id="link4"

<< = id="link3"* | >> = id="link5"

<< = id="link4"* | >> = id="link6"

<< = id="link5"* | >> = id="link7"

<< = id="link6"* | >> = id="link1"*

 

As you can see, If the link has all ready been used higher up the list,

the second time it's used, it will not work. Why is this?

 

Please can some one shed some light on this.

I am completely stuck, and would love to hear your thoughts on this.

 

Thanks for all your help.

:-)

[bronzemonkey]

It's a basic css issue...id is a unique identifier and an id can can only be used once per page for this reason. The javascript is going to work on an id that should only appear once in the document, and so once that id has been found, the javascript is not going to work its magic on duplicates of an id when they should not exist. You can use:

 

<a href="#" class="link2"></a>

 

If you need to use "link2" (or whatever) multiple times. I'd assume you just need to change the javascript to look for class rather than id.

 

I'd also recommend that you look into getting your site working for people with javascript turned off...because at the moment it doesn't.

[spires]

Hi bronzemonkey

 

Thanks for your quick reply.

 

That makes perfect sense.

 

However, can you help me with the code?

I'm a little stuck.

 

<!-- Java Script -->
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
		var scroll = new Fx.Scroll('demo-wrapper', {
			wait: false,
			duration: 2500,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});

		$('link1').addEvent('click', function(event) {
			event = new Event(event).stop();
			scroll.toElement('content1');
		});
		$('link2').addEvent('click', function(event) {
			event = new Event(event).stop();
			scroll.toElement('content2');
		});
</script>


<!-- CSS -->
<style type="text/css">
#content1 {
left: 0px; 
top: 0px;
}
#content2 {
left: 0px; 
top: 300px;
}
</style>

<!-- Link -->
<a href="#" class="link2"><img src="page GFX/New_Products/More_info.jpg" border="0"/></a>

 

 

Thanks once again for your help.

:-)

[spires]

Hi bronzemonkey

 

Not to worry.

I've just created more IDs, and had these link to the same content areas.

 

Not the best way. but, it works.

 

 

Thanks anyway.