While this post actually has nothing to do with ASP.NET MVC directly, the only common denominator is that I came up with this technique while working on the platform.
To be a true 1:1 copy of the previous website I would be converting to ASP.NET MVC, I had to come up with a way to reintroduce the <blink> tag to XHTML. While you are perfectly able to use <blink> it doesn't actually do any blinking in IE8 or Firefox. To show that properly, jQuery comes to the rescue.
The technique is really pretty simple:
<div id="#alertheader">)setInterval(function() {
jQuery.each(jQuery.browser, function(i) {
if ($.browser.msie) {
$('#alertheader').css({ opacity: '0' }).stop().animate({ opacity: '1' }, "fast", "swing");
}
if ($.browser.mozilla) {
$('#alertheader').stop().animate({ opacity: '1' }, "fast", "swing");
}
});
}, 600);You should hopefully notice the caveat I ran into immediately. IE and Firefox animate their opacity changes differently so it required special handling. An easy exercise for the reader would be to optimize this code to remove the IE/Mozilla check during the setInterval call.
You can achieve similar results by using a series of .fadeOut(x).fadeIn(x) calls but I had to make sure the sum of all calls didn't become less than the setInterval "loop" or it would blink wildly. The other problem it introduces is when text "fades" it can often look weird in either browser if you use a relatively fast interval. This became a headache very early on.
While I can't take whole credit for the technique, the primary Stack Overflow problem that got me started can be found here: https://stackoverflow.com/questions/1375646/jquery-animate-opacity-doesnt-work-properly-on-ie. In the post the user Eric states that jQuery should handle the opacity support for you. It does. For some reason to produce output I felt was adequate, no one definition would work across both browsers.