Question

The problem I am having is that I am building a type of slideshow and after a specific behavior, the code to highlight (change the color of the slide number from green to red) the new slide doesn’t work even though it works in all other circumstances.

My example is located at this link for you to look at. Let the slideshow play through the 5 slides. Everything works correctly (the numbers are highlighted when their slide is shown). When you click on a number, it still works and then after an 8 second pause will continue with the slideshow. Now, the problem happens when you click on the “fresh on the block” text and click back onto the “news and events” text. What is supposed to happen is that the slideshow should start at slide 1 (with the number one in red), but the number 1 stays green. When the slide changes, number 2 stays green. The slide changes again and 3 stays green. The slide changes again and 4 turns red. Same with slide 5.

I have tapped my knowledge and am ready to rip the remainder of my hair out. Please help!

Answer 1

Your example has some broken links, for starters, try fixing the URLs for jquery UI which you have as 10.2.24.111/js/jquery-ui-1.9.0.custom.min.js and 10.2.24.111/css/smoothness/jquery-ui-1.9.0.custom.css.

I figured out why the links aren’t working for 1-3 and are for 4 and 5.

It is because your ID’s are id=”1″, id=”2″, etc for each of your slides, once you load the second slide show (which has only 3 slides), now there are two slide shows on the page with the same ID’s of 1,2,and 3.

So the fix is to change each link like this:

<a href="#theFeeds" class="promoNav" id="1">1</a>

To have a prefix like this:

<a href="#theFeeds" class="promoNav" id="feeds_1">1</a>

So you won’t have duplicate ID’s on the same page.