Need to show your hate for IE6?
Here’s my way of doing it:
A tiny javascript on page load
<!--[if lt IE 7]>
<script type="text/javascript">
$(function() {
var $box = $(".alertbox"),
stateCookieName = 'alertbox_state',
alreadyClosed = $.cookie(stateCookieName);
// The box should already be hidden initially (using CSS preferrably).
// If not, uncomment the line below:
$box.hide();
// Show the box if it hasn't already been closed.
if (alreadyClosed != 1) {
$box.delay(900).fadeIn(900);
}
$box.find('.close').click(function() {
$box.fadeOut("slow");
$.cookie(stateCookieName, 1);
});
});
</script>
<![endif]-->
<div class="alertbox">
<span class="message">You are using an unsafe and outdated browser. For a better experience on our site, please upgrade to FireFox, Google Chrome or Internet Explorer 9. These new browsers are free and run much faster!</span>
<div class="bloc_navigateurs">
<a href="http://www.mozilla.com/products/download.html?product=firefox-3.6.13&os=win&lang=en-US" target="_blank"><img src="includes/themes/default/images/icons/misc/Firefox-16.gif" width="16" height="16" alt="Firefox" /></a>
<a href="http://www.google.com/chrome/intl/en/landing_chrome.html?hl=en" target="_blank"><img src="includes/themes/default/images/icons/misc/Chrome-16.gif" width="16" height="16" alt="Chrome" /></a>
<a href="http://windows.microsoft.com/ie9" target="_blank"><img src="includes/themes/default/images/icons/misc/IE-16.gif" width="16" height="16" alt="Internet Explorer " /></a>
</div>
<span class="close">close</span>
</div>
Obviously you should hide your alertbox div using CSS by default or isolate it with IE conditional comments so it only affects EI6.
This solution relies on
Jquery and the
Jquery Cookie plugin.
With some CSS creativity, you can get the box design that fits you best.
As you can see, this solution only warns the user once. The cookie takes care of not annoying them anymore once they click on the close button.
Some people have different ways of doing this and this works just fine for me.
Last but not least, you need your own icons and you can suggest whatever browser you like. No disrespect to Safari and Opera, convenience sided with the three I recommended.
☆ A M B ☆
☆ A M B ☆
