To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background.
My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it absolutely over the overlay.
Due to some CSS properties being dropped (as they were not inherited in the new position on the page), I utilized jQuery to add them back dynamically.
Although it works almost perfectly, I noticed a minor pixel discrepancy when it fades away on my Firefox 3.5.6 browser running on Mac OS X. While I acknowledge this may seem like nitpicking, I aim for a seamless user experience without any visible differences.
You can test the functionality here:
Below is the jQuery function code:
/* jQuery function for highlighting form success */
var highlightFormSuccess = function() {
var fadeTo = 0.6;
var $info = $('p.information');
if ($info.length) {
// create 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');
/* extract success block and position above the 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 out
setTimeout(function() {
$($overlay, $newInfo).fadeOut(1000, function() {
$newInfo.fadeOut(250, function() { $(this).remove(); } );
});
}, 2500);
};
};