www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] hasClass function help

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    resolved [RESOLVED] hasClass function help

    Hi,

    I am using Anything Slider image slider....

    I am basically checking if the <li> id has an "active" class so I can show the relevant div box.

    I have 5 sliding images... each of these sliding images has their own div box with its own information in it.
    I am placing this in a different section of the website otherwise I would have put this information with the image slider...

    This is the list of the image slider

    Code:
       <ul id="slider">
      	<li id="slide1" class="panel active"><a href="#"><img src="images/image1.jpg" /></a></li>
            <li id="slide2" class="panel"><a href="#"><img src="images/image2.jpg" /></a></li>
            <li id="slide3" class="panel"><a href="#"><img src="images/image3.jpg" /></a></li>
      	<li id="slide4" class="panel"><a href="#"><img src="images/image4.jpg" /></a></li>
    	<li id="slide5" class="panel"><a href="#"><img src="images/image5.jpg" /></a></li>
       </ul>
    This is the javascript I am using to show and hide the div box depending on what image is on show on the slider:

    Code:
      function updateDiv(){
    	 if ($('#slide1').hasClass('panel active')) {
    	       document.getElementById('image1-info').style.display="block";
    	       document.getElementById('image2-info').style.display="none";
    	       document.getElementById('image3-info').style.display="none";
    	       document.getElementById('image4-info').style.display="none";
    	       document.getElementById('image5-info').style.display= "none";
              
             if ($('#slide2').hasClass('panel active')) {
    	       document.getElementById('image1-info').style.display="none";
    	       document.getElementById('image2-info').style.display="block";
    	       document.getElementById('image3-info').style.display="none";
    	       document.getElementById('image4-info').style.display="none";
    	       document.getElementById('image5-info').style.display="none";	
    	
    
    ...etc
    	 }
    The slider scrolls through the images automatically ... and you can navigate left to right. I have added the javascript function to these arrows like so:

    Code:
    '<span class="arrow forward"><a href="#" onclick="updateDiv(this)">....'
    '<span class="arrow back"><a href="#"  onclick="updateDiv(this)">....'
    This doesn't work well, as it seems to miss out the first click so the wrong div box appears.

    When I use the function "onmouseover" the right box appears but you have to hover the arrows again and no one will do that. I need the right box to appear on click...

    The image slider begins automatically as soon as you enter the page, so is there a way to check which <li> id and class it is on show/hide the right div box?....

    Can anyone help?

    Hope this all makes sense.
    Many thanks
    Last edited by Kor; 04-25-2012 at 04:39 AM. Reason: needed JQuery prefix

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    just a draft, hope this will help:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>slider</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <style type="text/css">
    .panel{color:Navy;font-weight:bold;}
    .active{border:1px solid Red;}
    #image1-info{display:none;}
    #image2-info{display:none;}
    #image3-info{display:none;}
    #image4-info{display:none;}
    #image5-info{display:none;}
    </style>
    <script type="text/javascript">
    function updateLi(direction){
    var min=1,
    max=$('li[class*=panel]').length,
    active_num = new Number($('li[class="panel active"]').attr('id').replace(/slide/,'')),
    new_active_num=0;
    if(direction=='back'){new_active_num=active_num-1;if(new_active_num==0){new_active_num=max;}}
    if(direction=='forward'){new_active_num=active_num+1;if(new_active_num==(max+1)){new_active_num=min;}}
    $('li[class*=panel]').each(function(){
    if($(this).attr('id')=='slide'+new_active_num){$(this).addClass('active');updateDiv();}
    else{try{$(this).removeClass('active');}catch(e){}}
    });
    }
    
    function updateDiv(){
    // find the numeric part of the id attribute of currently active li
    var active_num = $('li[class="panel active"]').attr('id').replace(/slide/,'');
    $('div[id*="-info"]').each(function(){
    if($(this).attr('id')=='image'+active_num+'-info'){$(this).css('display','block');}
    else{$(this).css('display','none');}
    });
    }
    $(document).ready(function(){updateDiv();});
    </script>
    </head>
    <body>
    <ul id="slider">
      	<li id="slide1" class="panel active"><a href="#"><img src="images/image1.jpg" /></a></li>
        <li id="slide2" class="panel"><a href="#"><img src="images/image2.jpg" /></a></li>
        <li id="slide3" class="panel"><a href="#"><img src="images/image3.jpg" /></a></li>
      	<li id="slide4" class="panel"><a href="#"><img src="images/image4.jpg" /></a></li>
    	<li id="slide5" class="panel"><a href="#"><img src="images/image5.jpg" /></a></li>
    </ul>
    <div id="image1-info">image1-info</div>
    <div id="image2-info">image2-info</div>
    <div id="image3-info">image3-info</div>
    <div id="image4-info">image4-info</div>
    <div id="image5-info">image5-info</div>
    <br /><br /><br />
    <span class="arrow back"><a href="#" onclick="updateLi('back')">arrow back</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="arrow forward"><a href="#"  onclick="updateLi('forward')">arrow forward</a></span>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Dec 2009
    Posts
    51
    wow thanks a lot for the code Padonak!!!
    That has really helped!

    It seems this line

    Code:
    $(document).ready(function(){updateDiv();});
    is clashing with the slider somewhere not sure where!?! but the slider stops working... I'm going to have a look at the code properly now so I'll let you know how I get on!!...

    Thanks so much for the code!!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i did not see the slider script so it may be some conflict i don't know. i just wanted to show how could be li's and div's synchronized
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Dec 2009
    Posts
    51
    Hi Padonak....

    I've tried two integrate your code with the slider and I got the slider working but the div number does not match the active slide.

    Is there any chance you can have a look please? I have attached a zip folder with two files (the html and javascript)

    I can't see where its going wrong... but it seems it doesn't recognise the first click of the back or forward arrow?

    many thanks for all your help
    Attached Files Attached Files

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    1 remove function updateLi() from the script
    2 remove the $(document).ready(function(){updateDiv();}); line also
    3 in the linked script (jquery.slider.js) in the Options section (about the line 776) find the line

    Code:
    onSlideComplete     : function(slider) {},    // Callback when slide completes - no event variable!
    4 uncomment the line and change it this way:

    Code:
    onSlideComplete     : function(slider) {updateDiv();},    // Callback when slide completes - no event variable!
    it seems to work properly for me now
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Dec 2009
    Posts
    51
    Padonak, thanks man it works perfectly! Thanks a lot for taking the time out and solving the problem really appreciate it.

    Many thanks for all your help!!

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    good to hear )) have fun friend )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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