Help Needed - HTML / Javascript

[Darren_RSA]

Hi All,

First post here, desperately need assistance with something.
I have a <div> that needs to display 4 different things.
There are buttons on either sides of this and ultimately, by the user clicking on them, should display either the next group or previous group of text and image.

Below is the code I have, I am pretty sure it is the JavaScript. Any help will be hugely appreciated!

<div class="wrapper col2">
  <div id="featured_slide">
    <div id="featured_content">
      <ul>
        <li><img src="image1.jpg" alt=""/>
          <div class="floater">
            <font color="navy"><strong>Text Example</font></strong><p></p>
          </div>
        </li>
        <li><img src="image2.jpg" alt="" />
          <div class="floater">
           <font color="navy"><strong>Text Example</font></strong><p></p>
           </div>
        </li>
        <li><img src="image3.jpg" alt="" />
          <div class="floater">
             <font color="navy"><strong>Text Example</font></strong><p></p>            
          </div>
        </li>
            <li><img src="image4.jpg" alt="" />
          <div class="floater">
             <font color="navy"><strong>Text Example</font></strong><p></p>           
          </div>
        </li>
      </ul>
    </div>
    <a href="javascript:void(0);" id="featured-item-prev"><img src="images/prev.png" alt="" /></a>
<a href="javascript:void(0);" id="featured-item-next"><img src="images/next.png" alt="" /></a> 
    </div>    
</div>

[kromol]

Add id="img-list" to your <ul> and class="active" to the first <li>.
Then add some styles:

	ul#img-list li {
		display: none;
	}
	ul#img-list li.active {
		display: block;
	}

and some javascript code to toggle images:

	function showPrevImage() {
		var current_image = $("#img-list li.active");
		var next_image = current_image.prev();
		if (next_image.length == 0) {
			next_image = $("#img-list li:last");
		}
		current_image.removeClass("active");
		next_image.addClass("active");
		return false;
	}
	
	
	function showNextImage() {
		var current_image = $("#img-list li.active");
		var next_image = current_image.next();
		if (next_image.length == 0) {
			next_image = $("#img-list li:first");
		}
		current_image.removeClass("active");
		next_image.addClass("active");
		return false;
	}

Also don't forget to add these functions to your Next/Prev buttons.

[Darren_RSA]

Thank you so much for the accurate info.
Just one noob question, what do I need to do with the Javascript code? Do I create a Java script? (If so, how?)
Do I just put the code in my HTML body?

Thanks again

[Darren_RSA]

Perfect! Thanks a lot kromol!

[Darren_RSA]

Sorry to get back onto this thread.

For some reason, this works perfectly in Opera, but not in Chrome browser.
Any fixes?

[ZABI]

can you provide a link where can i inspect your code ?

[kromol]

What error did you get in Chrome? I tried in Chrome and it works properly.

[Darren_RSA]

Here is the JavaScript I am using:

<script type="text/javascript">

    function previous() {

        var current_image = $("#img-list li.active");
        var next_image = current_image.prev();
        if (next_image.length == 0) {
            next_image = $("#img-list li:last");
        }
        current_image.removeClass("active");
        next_image.addClass("active");
        

    }

    function next() {

        var current_image = $("#img-list li.active");
        var next_image = current_image.next();
        if (next_image.length == 0) {
            next_image = $("#img-list li:first");
        }
        current_image.removeClass("active");
        next_image.addClass("active");
        

    }


</script>

and the full HTML code:

<div class="wrapper col2">
  <div id="featured_slide">
    <div id="featured_content">
      <ul id="img-list">
        <li class="active"><img src="images/SANY0027.JPG" alt=""/>
          <div class="floater">
            <font color="navy"><strong>Ironman 2012 - Nelson Mandela Bay</font></strong><p></p>
            <p><a href="ironman.html">View our Ironman page</a> </p>
            <p>SIMON SCHOBER WAS THE 45TH MAN TO CROSS THE FINISHING LINE IN IRONMAN 2012! </p>      
          </div>
        </li>
        <li><img src="images/karate-championships/sa-karate-championships.jpg" alt="" />
          <div class="floater">
           <font color="navy"><strong>SA Karate Championships</font></strong><p></p>
            <p>On Saturday 11 June 2011 Juan-Drè competed in the South African Championships, for cadets in the ages between 14 & 15 years.
Juan-Drè won his division for the second year in a row and is once again the South African Champion. Juan-Drè needed the win to secure his place in the National team that will be going to Malaise in October 2011.
LUCA:
5th Individual Kata
2nd Team/Unison Kata</p>
            
          </div>
        </li>
        <li><img src="images/weddings/weddings-port-elizabethmay-2011-003.jpg" alt="" />
          <div class="floater">
             <font color="navy"><strong>CONGRATULATIONS!</font></strong><p></p>
            <p>Algoa Guest House would like to congratulate Nikki & Lance vd Westhuizen on their wedding on the 29th of April 2011.
We wish you both much happiness in your future years together.</p>
          </div>
        </li>
            <li><img src="images/pollockbeach/pollock-beach-pe-091.jpg" alt="" />
          <div class="floater">
             <font color="navy"><strong>Pollock Beach - Summerstrand</font></strong><p></p>
            <p>Safe bathing, beautiful walks along the boardwalk, what more could you ask for?</p>
          </div>
        </li>
      </ul>
    </div>
    <a href="javascript:previous();" id="featured-item-prev"><img src="images/prev.png" alt="" /></a> <a href="javascript:next();" id="featured-item-next"><img src="images/next.png" alt="" /></a> 
    </div>    
</div>

Really hope this info helps you guys, I am seriously stuck on this one.

[Darren_RSA]

Dont know if the code in the Style Sheet would make a difference but here it is:

ul#img-list li {
		display: none;
	}
	
ul#img-list li.active {
		display: block;
	}

[kromol]

What error did you get in Chrome in console?

[Darren_RSA]

I never got an error, it just wont execute.

[kromol]

And what about other browsers? Did you get error only in Chrome?

It works properly in my browsers.

[Darren_RSA]

Only Opera worked with the NEXT and PREVIOUS.
If I opened the website in IE or Chrome then the buttons dont work.

Any idea why it would only work in Opera? I got no idea why its not working.
Kromol, is there a way I can send you a private message? Then I will include all my code.

[kromol]

Enable private messages in your profile settings.

[Darren_RSA]

I cant find it. Do you have skype?