CODEWITHSUNDEEP
jquerycssfunctionevent-handling
Tom
Tom

Reputation: 275

jQuery - Running a Function When Class Names Are Added And/Or Removed

I'm developing a function with a conditional statement that (for now) has to run an alert when a class name is removed from a div layer. Here's the code:

<div class="ui-tabs-panel ui-tabs-hide">panel</div>
<div><a href="#" class="control">control</a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=3.0"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide');
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );
    if ($('.ui-tabs-panel:not(.ui-tabs-hide)')) {
        alert('hello');
    }
});
//-->
</script>

The whole "control" link, and the function connected to it, are just there to trigger the adding and removal of the class name.

Right now, the alert comes up when the page is loaded, and it shouldn't, so I think I must be getting the syntax wrong there. Removing the ui-tabs-hide class from the div with the "control" link does not trigger the alert, and it should. I'm guessing there's some kind of event binder I need to incorporate, but I don't know event binders very well.

Can anyone help me out with this, please?

Upvotes: 2

Views: 3900

Answers (2)

Quincy
Quincy

Reputation: 4433

You can create a custom event

demo http://jsfiddle.net/k44qR/2/

   $(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide').trigger("displayPanel");
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );

    $('.ui-tabs-panel').bind("displayPanel",function(){alert("hello")});

});

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49248

I don't know if you can detect an "event" such as a class name manipulation on an element.

The reason you're seeing the alert on page load is that it's in an if block contained within jQuery's $(document).ready function, which fires once on page load. In essence, you haven't attached this to any event other than the DOM ready event. Therefore, it fires when the page loads and DOM is ready, and the if statement evaluates to true.

You also need to use the .length property in your expression:

if ($('.ui-tabs-panel:not(.ui-tabs-hide)').length) {
    alert('hello');
}

// Or...
if ($('.ui-tabs-panel').not('.ui-tabs-hide').length) {
    alert('hello');
}

NOTE

I'd just like to caution here that the above code will depend on what you are attempting to do with your class change detection activities - .length will give you the total number of matching elements, so if you have more than one .ui-tabs-panel's, this could give you a false positive. You would need to consider something like an .each() call on the jQuery result if you want to do something with the results, or some other thing, in the event of more than one result.

A way could be to run a timeout and attempt to check if the ui-tabs-panel class elements also have the ui-tabs-hide class:

http://jsfiddle.net/userdude/4cF5v/

$(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide');
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );
    runCheck();
});

function runCheck(){
    if ($('.ui-tabs-panel').hasClass('ui-tabs-hide')) {
        alert('hello');
    }
    setTimeout(function(){runCheck()},5000);
}

I created a runCheck() function, put the .hasClass() call in it, and then create a timeout, which will run runCheck() again, set the timeout again, and keep going.

I set the timeout to be 5000 so that your browser wouldn't enter an infinite loop (it checks about every 5 seconds). In practice it should probably be tuned in somewhere between 50 and 500; 1000 is equal to 1000 milliseconds, or 1 second.

Here it is with a 50 millisecond timeout and another method that won't lock your computer into an alert() loop:

http://jsfiddle.net/userdude/k44qR/

Mouseover the control link, mouseout, then mouseover again, and you'll see it start, stop, then start again.

Upvotes: 1

Related Questions