715 posts
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Belgium
+1 more
Hy-Studio 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!

5351 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 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?

954 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Won a Most Wanted contest
+3 more
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
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Belgium
+1 more
Hy-Studio 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!

625 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
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
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Belgium
+1 more
Hy-Studio 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