JQuery - Testing for a class

JavaScript
1

Hi everyone,

So I’m currently using Basic jQuery Slider(http://www.basic-slider.com/) in a webpage(www.posturemedic.ca). What I’m trying to do is on hover the first slide would stop for 90 secs and then continue with the slide animation. The rest of the slides would stop for only a few secs and then continue with the slide animation. I was able to stop on hover for 90 seconds by adding setTimeout and the custom function fun. setTimeout delays the animation for 90 seconds, and then runs the fun function, which includes the original animation code.

However, now I included an if statement to distinguish between the first slide and the rest. And I can’t get that to work:

 if($('.first-one').length > 0){
                     var time = setTimeout(fun, 90000);
                    }else{
                     var time = setTimeout(fun, 20);
                    }

Code for banner:

<div id="banner">
<div id="inner-banner">
 <ul class="bjqs"> 
<li><p><iframe width="560" height="277" src="https://www.youtube.com/embed/DFWOyYUQ6ds?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></iframe></li>
<li class="first-one"><a href="index.php?content=exercise-program"><img src="images/banner/PM-Banners-1.jpg" width="758" height="273" alt="Improve your Posture, Improve Your Health. Click Here to find out why" /></a></li>
    
            <li><a href="index.php?content=menu&page=posture-tips"><img src="images/banner/PM-Banners-2.jpg"  width="758" height="273" alt="Improve  your Posture Today! Click here to learn how" /></a></li>
    
            <li><a href="index.php?content=size-guide"><img src="images/banner/PM-Banners-3.jpg"  width="758" height="273"  alt="Stretch, Strenghten and Stabilize. Click here for simple posture exercises that get results" /></a></li>
    
            <li><a href="index.php?content=testimonials"><img src="images/banner/PM-Banners-4.jpg"  width="758" height="273"  alt="All ages sizes and abilities. Click here to find one that is right for you" /></a></li>
    
            <li><a href="#"><img src="images/banner/PM-Banners-5.jpg"  width="758" height="273"  alt="Buy online or locally. click here to find a retailer" /></a></li>
    </ul>
    </div>
    </div>

Code for js:

$wrapper.hover(function () {
                if (!state.paused) {
                    clearInterval(state.interval);
                    state.paused = true;
               }
            }, function () {
                if (state.paused) {
                 var fun = function(){
                     state.interval = setInterval(function () {
                         go(vars.fwd, false);
                     }, settings.animspeed);
                     }
                    if($('.first-one').length > 0){
                     var time = setTimeout(fun, 90000);
                    }else{
                     var time = setTimeout(fun, 20);
                    }
                    state.paused = false;
                }
            });

        };

Any help would be much appreciated.

Thank you,
Aleks

2

Actually, this condition is true when such element is present on the page.
That means, it will always true if your page contains element with class first-one.

If I understood you right, you want to check if element with that class is hovered right now (not just exists).
To do that, pass event object to your hover callback and use event.target property to check class:

$wrapper.hover(function () {
    //...
}, function (event) {
    if ($(event.target).is('.first-one')){    
        //... hovered element has first-one class ...
    }
};
4

That makes sense. But I still can’t get it to work. It seems to be ignoring my event.target.

$wrapper.hover(function () {
        if (!state.paused) {
            clearInterval(state.interval);
            state.paused = true;
       }
    }, function (event) {
    	if (state.paused){
        	var fun = function(){
            	state.interval = setInterval(function () {
                	go(vars.fwd, false);
            	}, settings.animspeed);
            }
            
            if ($(event.target).is('.first-one')){
            	var time = window.setTimeout(fun, 90000);
            }else{
            	var time = window.setTimeout(fun, 200);
            }
            
            state.paused = false;
        }
    });

};

Any idea on what I doing wrong?

Much thanks!!

Aleks

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.