www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Help Needed - HTML / Javascript

  1. #1
    Join Date
    Sep 2012
    Posts
    22

    Help Needed - HTML / Javascript

    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!
    Code:
    <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>

  2. #2
    Join Date
    Jul 2011
    Posts
    131
    Add id="img-list" to your <ul> and class="active" to the first <li>.
    Then add some styles:
    Code:
    	ul#img-list li {
    		display: none;
    	}
    	ul#img-list li.active {
    		display: block;
    	}
    and some javascript code to toggle images:
    Code:
    	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.

  3. #3
    Join Date
    Sep 2012
    Posts
    22
    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

  4. #4
    Join Date
    Sep 2012
    Posts
    22
    Perfect! Thanks a lot kromol!

  5. #5
    Join Date
    Sep 2012
    Posts
    22
    Sorry to get back onto this thread.

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

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    can you provide a link where can i inspect your code ?

  7. #7
    Join Date
    Jul 2011
    Posts
    131
    What error did you get in Chrome? I tried in Chrome and it works properly.

  8. #8
    Join Date
    Sep 2012
    Posts
    22
    Here is the JavaScript I am using:

    Code:
    <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:

    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.

  9. #9
    Join Date
    Sep 2012
    Posts
    22
    Dont know if the code in the Style Sheet would make a difference but here it is:

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

  10. #10
    Join Date
    Jul 2011
    Posts
    131
    What error did you get in Chrome in console?

  11. #11
    Join Date
    Sep 2012
    Posts
    22
    I never got an error, it just wont execute.

  12. #12
    Join Date
    Jul 2011
    Posts
    131
    And what about other browsers? Did you get error only in Chrome?

    It works properly in my browsers.

  13. #13
    Join Date
    Sep 2012
    Posts
    22
    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.

  14. #14
    Join Date
    Jul 2011
    Posts
    131
    Enable private messages in your profile settings.

  15. #15
    Join Date
    Sep 2012
    Posts
    22
    I cant find it. Do you have skype?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles