Question

JS on ios is rather slow. For example in this piece of code, the Js adds the class before being able to add the block style. This breaks an animation i have on the page.

comments.style.display="block";comments.className = "show";

I have a workaround that fixes the issue on ios but just feels wrong:

comments.style.display="block";setTimeout(function(){comments.className = "show";},1)

Is there any way to determine if the block style has been set and only then trigger the second part?

Thanks for your suggestions!

Answer 1

Can’t you just use an if?

<div id="foo" style="display: none;">foo</div>

var div = document.getElementById( "foo"  );
if ( div.style.display == "none" ) {
    div.style.display = "block";
}

If you want to listen to a class change (or a style change) “event”, you can try these links:

• Event detect when css property changed using Jquery <= this solves the problem without jQuery
• jQuery – Fire event if CSS class changed
• Trigger event using Jquery on CSS change?
• Is it possible to listen to a "style change" event?

I think the first one will solve your problem. Here is the code:

document.documentElement.addEventListener( "DOMAttrModified", function( evt ){
    if ( evt.attrName === "style" ) {
        if ( evt.newValue.indexOf( "block" ) != -1 ) {
            alert( "do something!" );
        }
    }
}, false );

document.getElementById( "foo" ).style.display = "block";