4

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/

jahrichie
  • 1,215
  • 3
  • 17
  • 26
  • Using numerical identifiers for classes/ids are allowed? O_O – hjpotter92 Feb 02 '13 at 04:17
  • 1
    You have JQuery UI properly loaded? – Plynx Feb 02 '13 at 04:19
  • create a demo in jsfiddle.net that replicates the problem. Any solutions without seeing it would simply be a guess – charlietfl Feb 02 '13 at 04:20
  • 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 :-(. – jahrichie Feb 02 '13 at 04:25
  • 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!!! http://jsfiddle.net/XxyjE/1/ – jahrichie Feb 02 '13 at 04:30
  • Check your console, see if you have something like "object [object] has no method 'effect'" – Plynx Feb 02 '13 at 04:32
  • 1
    Your class names are [asking for trouble](http://stackoverflow.com/a/2812097/2005939)! – thordarson Feb 02 '13 at 04:33
  • 1
    No console issues. I think I traced it to a version issue with 1.8.2! – jahrichie Feb 02 '13 at 04:36
  • 2
    @thordarson - That link provides out of date information. HTML5 allows ids and class names to start with or even be entirely composed of digits. – nnnnnn Feb 02 '13 at 05:59
  • +1 @nnnnnn You're right. I didn't know about that change. – thordarson Feb 02 '13 at 06:04

4 Answers4

7

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.

trevorgrayson
  • 1,806
  • 1
  • 21
  • 29
  • 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. – Dan Eastwell Jun 22 '17 at 13:21
0
$.fn.highlight = function(){
  this.css("background", "#ffff99")
  var self = this;
  setTimeout(function(){
    self.css("background", "inherit");
  }, 500);
};
grosser
  • 14,707
  • 7
  • 57
  • 61
0

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).

davmac
  • 20,150
  • 1
  • 40
  • 68
0

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

user6300756
  • 1