spires Posted November 7, 2007 Share Posted November 7, 2007 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. :-) Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted November 7, 2007 Share Posted November 7, 2007 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. Quote Link to comment Share on other sites More sharing options...
spires Posted November 7, 2007 Author Share Posted November 7, 2007 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. :-) Quote Link to comment Share on other sites More sharing options...
spires Posted November 7, 2007 Author Share Posted November 7, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.