I'm looking for a technique that isn't obnoxious like most that I've seen, that will temporarily raise attention to a small notification passage.

I've been clunking around with adding and taking away classes and wrapper divs, without much success thus far.

Suggestions appreciated.

I'm looking for a technique that isn't obnoxious like most that I've seen, that will temporarily raise attention to a small notification passage.

I've been clunking around with adding and taking away classes and wrapper divs, without much success thus far.

Suggestions appreciated.

• javascript
• jquery

• What do you find obnoxious about existing solutions? The Yellow Flash Technique is mon and fairly unobtrusive. – ceejayoz Commented Nov 8, 2010 at 19:06
• I suppose the obnoxious ones I'm thinking of are mostly flash ads. What I've been able to acplish so far hasn't been any better than those, is the problem. – asfsadf Commented Nov 8, 2010 at 19:10

3 Answers 3

I use this and it works really well if you need to highlight a section after a click.

Highlighting Named Anchors with jQuery

// highlight and fade background on named anchors
// requires jquery.color.js http://plugins.jquery./project/color
function highlight(elemId){
    var elem = $(elemId);
    elem.css("backgroundColor", "#ffffff"); // hack for Safari
    elem.animate({ backgroundColor: '#ffffaa' }, 1500);
    setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
}

if (document.location.hash) {
    highlight(document.location.hash);
}
$('a[href*=#]').click(function(){
    var elemId = '#' + $(this).attr('href').split('#')[1];
    highlight(elemId);
});

You could create a CSS class (.highlight, for example) that has your desired color effect, and temporarily apply the style to an element of choice:

$('#foo').addClass('highlight').delay(800).removeClass('highlight');

You are probably on the right track, just use a timer to change, and then remove the new styles that you want applied.

Have a look at the second setTimeout example on this page for inspiration.

http://www.elated./articles/javascript-timers-with-settimeout-and-setinterval/

Edit

What I think you want is a fade in, fade out type effect. This could be acplished by having a couple classes representing states between default and highlighted. Wait a couple seconds after load, move to slightly highlighted, wait a 10th of a second and highlight it a little more, then in another 10th of a second full highlight, keep it there for a second or two, and then in 10th second intervals move backwards through your classes. This is just an example, but with some tuning you could make this as 'gradual' as you like.