715 posts
  • Exclusive Author
  • Sold between 100 and 1 000 dollars
  • Belgium
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
Yaeko says

Hi guys,

I’ve been Googling for some time now to find a way to use a callback when CSS is being applied with jQuery to an element.

I need this because I’m putting dynamically CSS to an element and if that applied CSS property is applied another function has to be triggered.

I thought using a setTimeout, which works, but I find the too unstable.

Anyone has another idea?

Thanks!

5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 more
CodingJack says

I need this because I’m putting dynamically CSS to an element and if that applied CSS property is applied another function has to be triggered.

If you’re applying the CSS through script (addClass, .css, etc.), could you not call whatever function you need to at the same time?

900 posts
  • Sold between 1 000 and 5 000 dollars
  • Most Wanted Bounty Winner
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Microlancer Beta Tester
  • Serbia
  • Exclusive Author
aleluja says

You can’t create an onStyleChange event in jQuery unless you edit the jquery.js file itself, and it would be a bad practice (caching, updates and so on). You can write a plugin that overrides the .css function and does your callback.

Check out this – the answer is in the question.

But still, I would stick to calling the callback where I call the css change in code.

715 posts
  • Exclusive Author
  • Sold between 100 and 1 000 dollars
  • Belgium
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
Yaeko says

You can’t create an onStyleChange event in jQuery unless you edit the jquery.js file itself, and it would be a bad practice (caching, updates and so on). You can write a plugin that overrides the .css function and does your callback.

Check out this – the answer is in the question.

But still, I would stick to calling the callback where I call the css change in code.

This looks great, I’ll try out. Thanks!

576 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

Applying CSS to an element with jQuery has no callback because it an instant action which is executed simultaneously when reading the line – and thus you can have you next action, aka ‘callback’, simply on the next line of the script.

715 posts
  • Exclusive Author
  • Sold between 100 and 1 000 dollars
  • Belgium
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
Yaeko says

You’re absolutely correct.

But when you apply some CSS to any element via .css() and you execute another whatever function and there you add a log of that one element, in Chrome the CSS isn’t always correct, sometimes it’s applied before the log, sometimes after … this is because Chrome executes it to quickly.

That’s why I would like to work with a callback, changing $(document).ready() to $(window).load() works, but then you’re elements are ‘glitching’ if you know what I mean.

Just tested it with a custom event, for the moment it seems to be working.

by
by
by
by
by
by