jquery effect highlight not working

Question

I'm banging my head against the wall using the highlight feature, for which i use quite often.

In the console when I run:

$('.2').effect('highlight', {}, 3000);

It returns:

[​…​​]

Which is the element i'd like to highlight. However it doesn't highlight it and I get no errors.

Funny story, because when this it works; but what I like about highlight, it natively has a duration it removes the highlight.

$(".2").css({ backgroundColor: "#FFFF88" });

Any ideas are welcome!

http://jsfiddle.net/XxyjE/1/

Gombach

Using numerical identifiers for classes/ids are allowed? O_O – Boltrope

You have JQuery UI properly loaded? – Trivandrum

create a demo in jsfiddle.net that replicates the problem. Any solutions without seeing it would simply be a guess – Reproductive

Yeah, integer class names work for sure. I should of mentioned this in the post, this is a rails app. I'm loading jquery from the jquery rails gem so I have jquery-1.8.2.min.js and jquery-ui-1.8.20.custom.min.js by default :-(. – Gombach

Here's a fiddle, obviously working as expected with the same jquery and ui. Something is clearly wrong in my app, any pointers are welcome!!! jsfiddle.net/XxyjE/1 – Gombach

Check your console, see if you have something like "object [object] has no method 'effect'" – Trivandrum

Your class names are asking for trouble! – Ultun

No console issues. I think I traced it to a version issue with 1.8.2! – Gombach

@Ultun - That link provides out of date information. HTML5 allows ids and class names to start with or even be entirely composed of digits. – Byroad

+1 @Byroad You're right. I didn't know about that change. – Ultun

Answer 1

What else do you have setting the background color on that element? On those elements above it?

E.g. I'm noticing this issue occurs with the dark colors on Twitter Bootstrap's .table-striped class. It looks like they are coloring the TDs, which means you can highlight the dark TRs until you're blue in the face, and you still aren't going to see a color change.

Try a:

$('.2 *').effect('highlight', {}, 3000) 

if you want to confirm if that's the issue or not. Then try to find a more specific selector from there.

Worms

This sort of works, but has a background effect of revealing any hidden (opacity: 0) children. On the limited attempt I had, it also just highlighted the children and not the target element. – Lawrencelawrencium

Answer 2

$.fn.highlight = function(){
  this.css("background", "#ffff99")
  var self = this;
  setTimeout(function(){
    self.css("background", "inherit");
  }, 500);
};

Underfeed

Answer 3

This ia an old question I know, but I encountered a similar problem just recently, and wanted to share the fix for any others who are having similar issues.

The problem was that the element I was trying to highlight had the transition CSS property set, and this apparently interfered with the highlight effect (making it completely invisible).

Melissa

Answer 4

I had a style="background:white;" attached to my element. When I removed that, the highlight worked.

Armlet