/** IE-UPDATE - A fake info bar for outdated IE browsers Version 0.4 (2010-02-05) What it does: This script can be loaded in any browser but will only show the fake bar in Internet Explorer browsers below version 8. If a user clicks away the bar this will be memorized by using a cookie and by changing the window.name property (as fallback). Usage: Put the code below in the section of your HTML document. Copyright: This script has been released under the LGPL license. Author: Felix Riesterer (Felix.Riesterer@gmx.net) **/ var IEUpdate = { // default message message : "Internet Explorer is missing updates required to view this site. Click here to update... ", el : false, baseURL : false, oldWinOnLoad : false, icon : false, close : false, hoverIcon : false, hoverClose : false, started : false, init : function () { var p = new RegExp("/ie-update\.js$", "i"), scripts = document.getElementsByTagName("script"), s, css; // set base URL for (s = 0; s < scripts.length; s++) { if (scripts[s].src && scripts[s].src.match(p)) { this.baseURL = scripts[s].src.replace(p, ""); } } /* Set up bar after document has loaded only if it hasn't been clicked away before. If user has clicked away the bar - a cookie will be set (might get prevented by security settings) - window.name will be set to "no-ie-update" (might get overridden by other scripts or frames) */ // Only execute setup if this is an outdated IE browser! if (IEUpdate.baseURL && !window.name.match(/no-ie-update/i) && !document.cookie.match(/IEUpdate/) ) { IEUpdate.oldWinOnLoad = window.onload; window.onload = function () { if (typeof IEUpdate.oldWinOnLoad == "function") { IEUpdate.oldWinOnLoad(); } /*@cc_on /*@if (@_jscript_version < 5.8) { IEUpdate.setup(); } /*@end @*/ }; } }, createElement : function (p) { /* p must be an object of this structure: { : { attributeName : value, attributeName2: value2 } } */ var element, e, a; for (e in p) { if (e) { element = document.createElement(e); for (a in p[e]) { element[a] = p[e][a]; } } } return element; }, setup : function () { // create

element to house the fake info bar and add text and icons var t = this, i, a = t.createElement({ link : { type : "text/css", rel : "stylesheet", type : "text/css", href : t.baseURL + "/ie-update.css", media : "screen, projection" } }); // load necessary CSS document.getElementsByTagName("head")[0].appendChild(a); t.el = t.createElement({ p : { id : "ie-update" } }); // the bar will be a regular hyperlink a = t.createElement({ a : { href : "http://www.microsoft.com/windows/internet-explorer/default.aspx", onclick : function () { var e = window.event; // if the bar has been clicked somewhere... if (e.srcElement.tagName.match(/a/i)) { // ... make sure it was the "link" part... t.slideOut(); } else { // ... or check which icon if (e.srcElement.src && e.srcElement.src.match(/close(-over)?\.png\b/i) ) { // action of the "close" icon t.slideOut(); // prevent other pages of this domain from showing the bar again document.cookie = "IEUpdate=false;"; // using cookie window.name = "no-ie-update"; // using window.name as fallback } // if an icon has been clicked don't follow the link! return false; } } } }); // Extras for IE6 /*@cc_on @if (@_jscript_version < 5.7) { // IE6 doesn't support position:fixed t.el.style.position = "absolute"; // trigger hasLayout property a.style.zoom = "100%"; // get width of the viewport t.correctPosition(); // follow scroll actions and react on resizing window.onresize = function () { t.correctPosition(); }; window.onscroll = function () { t.correctPosition(); }; } /*@end @*/ a.appendChild(document.createTextNode(t.message)); t.el.appendChild(a); t.el.style.top = "-50px"; // hide bar outside viewport // shield icon t.icon = t.createElement({ img : { src : t.baseURL + "/images/icon.png", alt : "" } }); t.icon.style.left = "2px"; a.appendChild(t.icon); // close icon t.close = t.createElement({ img : { src : t.baseURL + "/images/close.png", alt : "" } }); t.close.style.right = "2px"; a.appendChild(t.close); document.body.insertBefore(t.el, document.body.firstChild); /* Old IE doesn't properly support transparency in PNG images so we need to toggle the images' sources to create a perfect hover simulation! */ t.el.onmouseover = function () { var imgs = t.el.getElementsByTagName("img"), i; for (i = 0; i < imgs.length; i++) { imgs[i].src = imgs[i].src.replace(/\.png/i, "-over.png"); } } t.el.onmouseout = function () { var imgs = t.el.getElementsByTagName("img"), i; for (i = 0; i < imgs.length; i++) { imgs[i].src = imgs[i].src.replace(/-over\.png/i, ".png"); } } // preload hover-state shield icon t.hoverIcon = t.createElement({ img : { src : t.baseURL + "/images/icon-over.png", alt : "" } }); a.appendChild(t.hoverIcon); // preload hover-state close icon t.hoverClose = t.createElement({ img : { src : t.baseURL + "/images/close-over.png", alt : "" } }); a.appendChild(t.hoverClose); // slide bar into view? t.checkReady(); }, checkReady : function () { // slide the fake info bar into the viewport when all images have loaded var t = this; if (!t.started) { try { if (t.icon && t.icon.width && t.close && t.close.width && t.hoverIcon && t.hoverIcon.width && t.hoverClose && t.hoverClose.width ) { t.started = true; t.hoverIcon.style.display = "none"; t.hoverClose.style.display = "none"; t.slideIn(); } } catch (e) {}; window.setTimeout(function () { t.checkReady(); }, 100); } }, correctPosition : function () { // This function gets called only in IE6 var t = this, compat = (document.compatMode && document.compatMode == "CSS1Compat"), left, right, top; left = compat ? document.documentElement.scrollLeft : document.body.scrollLeft; t.el.style.left = left.toString() + "px"; // the body's width in IE6 isn't always the same as the viewports's right = compat ? 0 : document.body.offsetWidth - document.body.clientWidth; right += left; t.el.style.right = -right.toString() + "px"; top = compat ? document.documentElement.scrollTop : document.body.scrollTop; t.el.style.top = top.toString() + "px"; }, slideIn : function () { var t = IEUpdate, v = parseFloat(t.el.style.top); if (v < 0) { t.el.style.top = (v +1) + "px"; window.setTimeout(t.slideIn, 30); } }, slideOut : function () { var t = IEUpdate, v = parseFloat(t.el.style.top); if (v > -22) { t.el.style.top = (v -1) + "px"; window.setTimeout(t.slideOut, 10); } } } IEUpdate.init();