When I first saw sevenup, I thought that was it. It looked good, professional, well made, the holy grail of "IE6 is outdated" notifications. But the nice looks came in a separate file, styles were inline (in the js...), was not using jQuery, and most of all, gave me a nice "object expected" error in... IE6. Not useful.
First, I have to thank the guys for the putting up the looks, content, icons, thought and logic in it. I tried to keep it as close as it was by using real CSS, jQuery goodness and simply nicer code (I'm still not sure about the best way to put quite some html in a js var but what I did seems to work well.)
So, what is it? Well, you're probably not using IE6 if you're reading this and wondering if you'll have to fire up VirtualBox or give another try at some crappy piece of script? I'll spare you all of them (just get firebug ready ;). Ok, enough, just click here to try it out.
jQuery UI now takes care of the "close" button (with extra css from SUY), buttons and the whole overlay / dialog thing as it should (or almost, what is it with that absolute buttonpane mofuk? it should simply get pushed down... anyway, that's why I've given up with the nice rounded bottom for now [not those, those I can't give up...]). Now, back to serious things.
(function($) { /** * Simple IE6 notification based on sevenup (and the sevenup_black theme) * from code.google.com/p/sevenup/ * * Usage: * $.suy({options}); * * Options: * delay: 1000, * delay after $(window).load() before popup * dialogOptions: { * modal: true, * width: 550, * height: 500, * resizable: false * }, * jQuery UI Dialog Options (jqueryui.com/demos/dialog) * enableClosing: true, * Set to false to lock website from IE6- * enableCookie: true, * Set to false to show every time * onLoad: true, * Set to false to fire popup directly * downloadLink: osSupportsUpgrade ? * "microsoft.com/windows/internet-explorer" : * "getfirefox.com", * onClose: function(){} * Callback function that gets called when dialog is closed * * Version: 1.0 (3/05/2009) * Requires: jQuery v1.2.6+ * jQuery UI Core 1.6+ * jQuery UI Dialog 1.6+ * Copyright (c) 2009 Vincent Gariepy * Dual licensed under the MIT (en.wikipedia.org/wiki/MIT_License) * and GPL (en.wikipedia.org/wiki/GNU_General_Public_License) licenses * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. */ $.fn.suy = function(options) { var osSupportsUpgrade = /(Windows NT 5.1|Windows NT 6.0|Windows NT 6.1|)/i.test(navigator.userAgent); // XP, Vista, Win7 var settings = { delay: 1000, dialogOptions: { modal: true, width: 550, height: 500, resizable: false }, enableClosing: true, enableCookie: true, onLoad: true, downloadLink: osSupportsUpgrade ? "microsoft.com/windows/internet-explorer" : "getfirefox.com", onClose: function(){} }; if (options) $.extend(settings, options); if (document.cookie.length > 0 && document.cookie.indexOf("suy=") != -1) return false; $dialogContent = $(' \ <div class="suy"> \ <div class="suy_content"> \ <h1 class="suy_title">Your web browser is outdated and unsupported</h1> \ <p class="suy_subtitle">You can easily upgrade to the latest version</p> \ <div class="suy_eightup"> \ <a href="microsoft.com/windows/internet-explorer" rel="nofollow"> </a> \ </div> \ <p class="suy_eightup_label"><a href="microsoft.com/windows/internet-explorer" rel="nofollow">Internet Explorer 8</a></p> \ <div class="suy_upgrade"> \ <h3>Why should I upgrade?</h3> \ <dl> \ <dt>Websites load faster</dt> \ <dd>often double the speed of this older version.</dd> \ <dt>Websites look better</dt> \ <dd>you see sites they way they were intended.</dd> \ <dt>Websites render correctly</dt> \ <dd>with more web standards compliance.</dd> \ <dt>Tabs Interface</dt> \ <dd>lets you view multiple sites in one window.</dd> \ <dt>Safer browsing</dt> \ <dd>with better security and phishing protection.</dd> \ <dt>Convenient Printing</dt> \ <dd>with fit-to-page capability.</dd> \ </dl> \ </div> \ <div class="suy_browsers"> \ <h3>Explore other browsers</h3> \ <ul> \ <li class="suy_firefox"><a href="getfirefox.com/" rel="nofollow">Mozilla Firefox</a></li> \ <li class="suy_safari"><a href="apple.com/safari/download" rel="nofollow">Apple Safari</a></li> \ <li class="suy_chrome"><a href="google.com/chrome" rel="nofollow">Google Chrome</a></li> \ <li class="suy_opera"><a href="opera.com/download" rel="nofollow">Opera</a></li> \ </ul> \ </div> \ <div class="clear"></div> \ </div> \ </div>'); if (settings.enableClosing) { $closeLinks = {}; if (settings.enableCookie) { $.extend($closeLinks, { 'Do not notify me again': function() { var exp = new Date(); exp.setTime(exp.getTime() + 604800000); document.cookie = "suy=true; expires=" + exp.toUTCString(); $(this).dialog('close'); if (typeof(settings.onClose) == 'function') $(settings.onClose($(this))); } }); } $.extend($closeLinks, { 'Close': function() { $(this).dialog('close'); if (typeof(settings.onClose) == 'function') $(settings.onClose($(this))); } }); $.extend(settings.dialogOptions, { 'buttons': $closeLinks }); } if (settings.onLoad) { $(window).load( function() { setTimeout(( function() { $dialogContent.dialog(settings.dialogOptions); }), settings.delay); }); } else { $dialogContent.dialog(settings.dialogOptions); } }; $.fn.suy(); })(jQuery);
UI files are included in zip file as well as all images used, © or props to sevenup_black
Now, what does it do and how do you use it? Easy. The right way, as you probably know, is using conditional comments. Both CSS and JavaScript files, like this:
<!--[if lt IE 7]>
<script type="text/javascript" src="/scripts/jquery.suy.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="/styles/suy/suy.css" />
<![endif]-->In the hope that 2009 will be the end of IE6. For every shared frustration we, as web developers, designers or anyone that uses the web on a daily basis, for every constant battle on every project, for every web worker that have to endure the pain it causes without probably ever knowing it, for some of those plain stupid clients (I SAID IT!!! feels good), for everyone that IS STILL USING INTERNET EXPLORER 6 and mostly for anyone out there that gets what I mean and might want to use it
Enjoy!
N.B. I don't think going on a craze with anti-IE6 movements, groups and stuff is the way to go. I'm posting my code and opinions here out of good will, and also some desperate need for change in attitude towards, well, change (as in, UPGRADE) :p
| Attachment | Size |
|---|---|
| jquery.suy.js | 6.07 KB |
| suy.css | 2.36 KB |
| suy_1.0.zip | 33.52 KB |
| SUY-1.0-Screenshot.jpg | 38.73 KB |
Comments
Nicely done!
This feedback is great - It's cool you liked SevenUp enough to adapt it. Thought I might address some points while they're up here, for the sake of discussion (SevenUp is by no means finalized so feedback is def. welcome)
When I created SevenUp, I did so making certain design decisions which precluded me from making similar features to those you mentioned:
#1: I wanted the easiest possible integration: one single JS include. One more if you add a plugin.
No Cond. Comments, etc just include the file and SevenUp takes care of the detection for you. (It actually does so using CC's behind the scenes now.) This also precludes me from depending on JQuery, as well as external CSS. I suppose I could've written CSS into the page itself, but I seem to remember that approach causing problems...
#2: I wanted it to be a strong core app, and leave the infinite customization options to the community's plugins.
Combining plugins with the core app seemed to violate the point of plugins in the first place, hence the "good looks" coming in a different file :)
Thanks again for the thoughtful post. Feel free to contact w/ more any time
--Jonathan Howard
http://twitter.com/staringispolite
ps. I would venture to guess you got the JS error because you didn't include the files quite right, mismatched versions, something like that... I definitely don't get the error. Would be happy to debug w/ ya if you like
Sorry if I am a dumbass
but can this be used on ANY website? Do I simply need to have all the files in the zip file on my server and then use the conditional comments you suggested above and then ensure that all targets are pointed in the right direction?
Commendable...
... to say the least! Thanks for keeping us posted on the great work you do!
*Cheers*
Great work!
Would be nice if you can put in support for easy translation t()-tags :)
There's a big bug in that thing:
It still offers IE 8 as an alternative. While in reality, this still is a completely inacceptable piece of shit.
agreed
yea i have to agree
ie8 should be down on the list and recommend an open standards browser like FF or chrome
and upgrading ie can take 20+ mins :/ , while other browsers take like 3 or 4 min
i might use the plugin but with another pic not promoting ie8. Maybe you can have other pics here
also we're doing a service here not an ad so "dont notify me", might be changed to "thank you, am aware" or "no more notifications, thanks!"