In order to highlight a certain p element, I've written some JS to make it appear above a darkened background.
In order to do this, I used jQuery to create an overlay, and then clone the information p element and absolutely positioned it over the overlay.
Because it dropped a few CSS properties (not being inherited because of the new position in the page), I used jQuery to add them.
It works almost perfectly. In my Firefox 3.5.6 on Mac OS X, when it fades away, there is a slight disrepencacy of a matter of pixels. I know it's nitpicking, but I'd love to have it disappear and the end user not know the difference.
The test is available here: https://www.ikatanspa.com/book-online/?test
Here is the jQuery function too
var highlightFormSuccess = function() {
var fadeTo = 0.6;
var $info = $('p.information');
if ($info.length) {
// make overlay
var $overlay = $('<div />')
.css({
display: 'none',
width: '100%',
height: $(document).height(),
position: 'absolute',
top: 0,
left: 0,
zIndex: 32767,
opacity: 0
})
.attr({
id: 'overlay'
})
.appendTo('body');
// pull out success block and position above overlay
var left = $info.position().left,
top = $info.position().top,
fontSize = $info.css('font-size'),
width = $info.width(),
color = $info.css('color'),
lineHeight = $info.css('line-height');
var $newInfo = $info.clone()
.css({
position: 'absolute',
top: top,
left: left,
'font-size': fontSize,
'line-height': lineHeight,
width: width,
color: color,
zIndex: 32767
})
.appendTo('body');
$overlay
.show()
.fadeTo(1000, fadeTo);
// wait then fade back out
setTimeout(function() {
$($overlay, $newInfo).fadeOut(1000, function() {
$newInfo.fadeOut(250, function() { $(this).remove(); } );
});
}, 2500);
};
};