[RESOLVED] hasClass function help

**pc_mac** · 04-23-2012 04:32 AM

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

**Padonak** · 04-23-2012 12:47 PM

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>

**pc_mac** · 04-24-2012 09:58 AM

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

**Padonak** · 04-24-2012 12:20 PM

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

**pc_mac** · 04-25-2012 07:28 AM

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

**Padonak** · 04-25-2012 12:06 PM

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

**pc_mac** · 04-26-2012 11:39 AM

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

**Padonak** · 04-26-2012 11:55 AM

good to hear )) have fun friend )

Thread: [RESOLVED] hasClass function help

Thread Tools

Display

[RESOLVED] hasClass function help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions