Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Question

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet:

<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 purpose of the "control" link and its associated function is solely to manage the addition and removal of the specified class name.

Currently, the alert pops up upon loading the page, which is not intended. This issue might be due to incorrect syntax usage in my code. Additionally, removing the ui-tabs-hide class from the div containing the "control" link does not trigger the alert as expected. It seems like I need to include some kind of event binder, but my knowledge of event binders is limited.

If anyone can assist me with this problem, I would greatly appreciate it.

jquery css function event-handling

Answer 1

Answer №1

It's uncertain whether detecting an "event" like manipulating a class name on an element is possible.

The reason the alert appears upon page load is because it is inside an if block within jQuery's $(document).ready function, which triggers once when the page loads. Essentially, you have not linked this to any event besides DOM ready, so it activates when the page loads and the DOM is ready, with the if statement being true.

Furthermore, using the .length property in your expression is necessary:

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 want to highlight that the above code relies on what you intend to achieve with your class change detection actions - .length provides the total number of matching elements, so if you have multiple .ui-tabs-panel's, there may be a false positive. If dealing with more than one result, consider using an .each() call on the jQuery outcome or another approach.

One method could involve setting a timeout to verify if the ui-tabs-panel class elements also possess 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 introduced a runCheck() function, placed the .hasClass() call inside it, and initiated a timeout, ensuring that runCheck() repeats, sets the timeout again, creating a continuous loop.

The 5000 millisecond timeout prevents the browser from entering an infinite loop (checking every 5 seconds). Typically, a range between 50 and 500 milliseconds should suffice; 1000 equates to 1 second.

With a 50 millisecond timeout and an alternative method to avoid locking your computer into an alert() loop, here is the updated version:

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

Hover over the control link, hover out, then hover over again to observe it start, stop, and restart.

Answer 2

It's uncertain whether detecting an "event" like manipulating a class name on an element is possible.

The reason the alert appears upon page load is because it is inside an if block within jQuery's $(document).ready function, which triggers once when the page loads. Essentially, you have not linked this to any event besides DOM ready, so it activates when the page loads and the DOM is ready, with the if statement being true.

Furthermore, using the .length property in your expression is necessary:

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 want to highlight that the above code relies on what you intend to achieve with your class change detection actions - .length provides the total number of matching elements, so if you have multiple .ui-tabs-panel's, there may be a false positive. If dealing with more than one result, consider using an .each() call on the jQuery outcome or another approach.

One method could involve setting a timeout to verify if the ui-tabs-panel class elements also possess 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 introduced a runCheck() function, placed the .hasClass() call inside it, and initiated a timeout, ensuring that runCheck() repeats, sets the timeout again, creating a continuous loop.

The 5000 millisecond timeout prevents the browser from entering an infinite loop (checking every 5 seconds). Typically, a range between 50 and 500 milliseconds should suffice; 1000 equates to 1 second.

With a 50 millisecond timeout and an alternative method to avoid locking your computer into an alert() loop, here is the updated version:

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

Hover over the control link, hover out, then hover over again to observe it start, stop, and restart.

Answer 3

Answer №2

If you want to create a custom event, follow these steps:

Check out this demo on how to implement it: 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")});

});

Answer 4

If you want to create a custom event, follow these steps:

Check out this demo on how to implement it: 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")});

});

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Answer №1

Answer №2

Similar questions

When the mouse is moved, display a rectangle on the canvas

Guide to Using Jquery to Locate YouTube or Vimeo Videos Embedded in HTML

Simultaneously sending jQuery.ajax data while submitting a form

Stop the automatic hiding of the sticky header when reaching the bottom of the page

The icon is being displayed as text instead of the actual Fontawesome icon

Retrieve the server code periodically and automatically refresh the form elements

Troubleshooting: jQuery AJAX not Invoking C# Method in ASP.NET MVC Application

What is the best way to use absolute positioning in React Native to align an element with its grandparent?

Unable to create a responsive layout because of the use of inline CSS with "margin"

Appium successfully triggers a click action on an obscured WebElement

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

I am in search of a container that has full height, along with unique footer and content characteristics

Is it possible to access an external website by clicking on a link within a DIV element?

Is it okay to make multiple calls using jQuery/AJAX if confirmed?

Enhancing User Experience in VueJS with Pug Templates and Transitions

"Incorporate Bootstrap drop-down and button together for a stylish group feature

What is the best way to create a responsive grid layout for my form using Bootstrap?

What is the reason behind the reversal of the response list by $.getJSON?

Unable to get jQuery waypoints to function on local server

Load Bootstrap CSS file externally on a website dynamically