/** 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 : "Wussten Sie schon, dass Ihr Internet Explorer nicht mehr aktuell ist? Um unsere Webseite bestmöglich zu nutzen, empfehlen wir Ihnen Ihren Browser auf eine aktuellere Version zu aktualisieren ... ", 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.byebyeinternetexplorer.org/de", 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 = "20px"; 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, 100); } }, 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();