Jump to content

[SOLVED] Has anyone come across this problem before?


spires

Recommended Posts

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.

:-)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

:-)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.