Twitter
2.6
IE6 Upgrade Option
08. February 2010 · Author: Dale Crum
100 Comments

IE6 Upgrade Option

IE6 Upgrade Option utilizes the 25K script created by Free the Foxes: http://www.freethefoxes.com/ as a WordPress plugin. Originally this plugin utilized a smaller 7K script but it’s limits had been met in terms of language support, ease-of-use and options for using the warning messages on browsers other than IE6 (refer to the ie6-upgrade-option.php file for instructions on multiple browser usage).

The warning message is displayed using a Lightbox effect that hovers over the page content. The idea is to display a warning message, simply and politely, informing the user that their browser is out of date while providing links to download newer, more optimal browser choices. Optional browser links included are: IE9, Firefox, Opera, Safari, and Chrome. While this plugin was originally intended for use with IE6 it has now been expanded, due to popular demand, to include a warning message capable of being displayed in any browser. Don’t like Firefox? Simply adjust the FTF rating and ask your users to use IE8. This is not limited to a a single browser either, feel free to use the multi-browser version to display the warning in IE6, IE7 and Chrome simultaneously as a example.

The web page will remain visible through the transparent Lightbox and the user is given the option of closing the window, agreeing that their experience may be severely degraded or downloading a new browser. The javascript then installs a cookie preventing the window from appearing again. The script is loaded in the site footer in two ways: selectively (as in the case of the basic setup) or permanent (if desiring to use this for browsers other than IE6).

To change the text to reflect the language of your choice simply open the “lang” folder and create your own .json file to replace the default message, then be sure to add your new language code to the ie6-upgrade-option.php file. Current translations include: English, French, German, Spanish, Hungarian, Swedish, Brazilian Portuguese, Dutch and Norwegian Bokmâl.

Installation

BASIC INSTALLATION:

  1. Download the plugin and expand it.
  2. Copy the ie6-ppgrade-option folder into your plugins folder ( wp-content/plugins ).
  3. Log-in to the WordPress administration panel and visit the Plugins page.
  4. Locate the ie6-upgrade-option plugin and click on the activate link.
  5. Replace the ie6-upgrade-option with the version from the "multi-browser" folder to enable use of this plugin within more browsers than IE6.
TRANSLATION:
  1. Open the "lang" folder and duplicate one of the language files.
  2. Alter the warning message to the language of your choice.
  3. Change the file name to your language code: "en.json" for English.
  4. Upload the file into the "lang" folder.
  5. Open the "ie6-upgrade-option.php" file.
  6. Change line 60 by replacing the "en.json" url with your new language file name.

Screenshot

doc4design.com - IE6 Upgrade Option - Screenshot

100 Comments

  1. Grollaz says:

    Hi, I have a site in different languages, how can I automatically set the language to use for the alert?
    Thanks.

  2. Hemanth,

    I’m not sure what you mean.

  3. Hemanth says:

    Is there any way to make it have ‘moda’l behaviour?

  4. Sheena,

    Nice website. Okay, I tested it out and it seems to be working I did need to click the “Return to Site” button twice, once on the home page and again on a sub page to get the cookie going. I will look into this.

  5. Hi Doc4,

    Thanks for your reply. No i haven’t changed any code, only changed the warning message text output in the json file. I have clicked on the button but it still appeared on different pages. I’ll try it again and let you know… thanks

  6. Sheena,

    This is the default setting. Have you changed any of the code or is it just not functioning properly out of the box? As a side note, you must click the “continue” button to install the cookie, the user cannot just skip the window by clicking around it.

  7. Hi Doc4,

    Great plugin. I’ve installed it and it works great, except for the fact that the lightbox pops up on every page. Is there any setting which i need to edit to get this to work properly. You mentioned in the description that there is a cookie in place so the lightbox only appears once. I thought this would be the default setting?

    Can you let me know how i can get it to work as it was intended?

    Thanks

  8. TOnin,

    Thank you for the translation. It will be added to the next update.

  9. lang/fr.json

    {
    “text_upgrade_now” : “Mettre à jour maintenant”,
    “text_you” : “TOI”,
    “button_continue” : “Continuer malgré tout”,
    “button_close” : “Fermer”,
    “text_you_are_using” : “”,
    “message_failed” : “Savez-vous que cette version d’Internet Explorer est obsolète ?”,
    “message_acceptable” : “C’est pas grave. Essayer d’utiliser nos autres recommandations.”,
    “message_recommended” : “Bon choix. Adoptez-le.”,
    “message_description” : “Nous ne supportons plus Internet Explorer 6. Des fonctionnalités marchait mal ou était inutilisables. Nous recommandons la mise à jour d’Internet Explorer ou d’utiliser un autre navigateur. Une liste des navigateurs les plus populaires se trouve ci-dessous.”,
    “message_warning” : “Si vous choisissez de continuer sans faire la mise à jour, sachez que l’utilisation du site en sera dégradée.”,
    “message_error” : “Désolé, ça n’a pas marché. Nous allons corriger ce problème.”,
    “status_loading” : “Chargement…”,
    “status_approved” : “Navigateur approuvé.”,
    “status_acceptable” : “Navigateur acceptable.”,
    “status_failed” : “Navigateur défectueux.”,
    “link_check” : “Vérifier”
    }

  10. Lisa,

    I’m currently working on getting better localization in place and a method for selecting which browsers to show the popup for. In the meantime skip through the comments and you will see the answer to your question about removing unwanted browsers.

  11. Thank you for this plugin. 2 questions.

    How do I only show the icons and info for IE8 and FF?

    How can this plugin also be used for IE7 users, with a different message?

  12. Kjetil,

    Thank you for the translation, it has been included in the next release.

  13. Trying out your ie6 plugin I’ve translated the warning text to Norwegian. (Actually, we have two forms of written Norwegian – bokmål and nynorsk. This is the most used form, bokmål – nb_NO )
    Cheers,
    Kjetil

    msg1 = “Visste du at du bruker en eldgammel utgave av Internet Explorer?”,
    msg2 = “Vi støtter ikke lenger Explorer 6. Nettstedet kommer til å vises feil, mye vil ikke fungere – og du får garantert en dårlig opplevelse. Vi anbefaler sterkt at du bruker en annen nettleser eller i hvert fall en nyere utgave av Internet Explorer. Noen av de mest populære nettleserne finnes under”,
    msg3 = “Bare klikk på et ikon, og du kommer rett til nedlastingssiden”,
    msg4 = “Ved å lukke dette vinduet godtar du en slett opplevelse av dette nettstedet”,
    msg5 = “LUKK”;

  14. Marc,

    Thank you, I will include the translation.

  15. I have translated your plugin to the Dutch language for the Netherlands and Belgium (Flanders).
    You can include on the next update. Thanks!

    
    // Dutch
    case  (userLang = "nl") :
    var 
      msg1 = "Wist u dat deze versie van Internet Explorer verouderd is?",
      msg2 = "Deze site biedt geen ondersteuning voor Internet Explorer 6. Sommige functie zullen misschien onbruikbaar zijn. Wij raden aan te upgraden naar een nieuwere versie van Internet Explorer of een andere web browser. Een lijst van de meest populaire webbrowsers kan hieronder worden gevonden.",
      msg3 = "Klik op de icoontjes om naar de download pagina te gaan.",
      msg4 = "Door het sluiten van dit venster, zonder upgrade, zal u problemen blijven ondervinden.",
      msg5 = "SLUITEN";
    break
    

    Great plugin!

  16. THANK YOU so very much for co-creating such a helpful as well as timely WordPress plugin. Please do keep up the great development!

  17. Hi,

    I have just translated your plugin to Portuguese Brazil. Can you include in the next update?
    Here it is:

    // Portuguese Brazil
    default:
    var
    msg1 = “Você sabia que essa versão do Internet Explorer está fora de uso??”,
    msg2 = “Esse website não suporta mais o Internet Explorer 6. Algumas partes do site podem aparecer desconfiguradas ou nem aparecer!. Nós recomendamos que você atualize a sua versão do Internet Explorer ou instale algum outro navegador mais atual. Segue abaixo uma lista com os navegadores mais atuais”,
    msg3 = “É só clicar no ícone para ir para a página de instalação”,
    msg4 = “Se você não quiser instalar, clique no botão fechar. Mas você estará perdendo todas as novidades que temos em nosso site!”,
    msg5 = “FECHAR”;
    break

  18. Sean, I just updated the plugin to version 1.8, a few very minor issues on my part. I noticed I’m not seeing the code show up in the footer at all on your site. Do you see <?php wp_footer(); ?> in the footer.php file just above the </body> tag? You might also double check that you have <?php wp_head(); ?> in the header.php file as well. Let me know if this corrects the issue.

    I also noticed you’re using W3 Total Cache, assuming the IE6 Upgrade Option plugin was recently activated you may not see the results as of yet. Try disabling W3 Total Cache and test the plugin again.

  19. Looks like a great plugin. Unfortunately, I can’t get it to display with my theme.. (Not a WordPress expert here)

    The site is http://roberson.org

    I currently have the plugin enabled.. Any suggestions?

    Thanks!

  20. Robert,

    Thanks for letting me know about this. The image has been replaced.

  21. Robert says:

    Thanks for the plugin! It would be good on your page here to see a demo of the window so we can be sure we want to use it on our client site.

  22. First of: Thanks a bunch, great plugin, great script.

    Secondly, I’ve noticed that the German translation is missing msg4.
    This would be a suiting translation:

    msg4 = “Schliessen Sie dieses Fenster, sollte Ihnen bewusst sein, dass diese Website und viele andere deutlich besser dargestellt werden könnten.”,

  23. Jeferson,

    At this time the language selection is done manually. Open the ie6-upgrade-option plugin folder and look for the warning.js file. Open the warning.js file and change the default message to the language of your choice. Below is the default code you are looking for:

    default:
    var msg1 = "Did you know this version of Internet Explorer is out of date?",
          msg2 = "This website does not support Internet Explorer 6. Things are bound to be broken and perhaps unusable. We recommend an upgrade to a newer version of Internet Explorer or another web browser. A list of the most popular web browsers can be found below",
          msg3 = "Just click on the icons to get to the download page",
          msg4 = "By closing this window you acknowledge that your experience on this website will be degraded",
          msg5 = "CLOSE";
    break
    } 

  24. jeferson says:

    Hello,
    I would like to know how to add my language to file. The language is Brazilian Portuguese

  25. Yo,

    I must have completely missed your comment. To change the background color open the warning.js file and look for lines: 138 and 139. They should look like this:

    _dl.style.filter = "alpha(opacity=50)";
    _dl.style.background = "#FFF";

    Alter the hex code #FFF to any color you wish. #000 for black.

  26. Sorry – I’m SO swamped with work atm :(

  27. Is there any way to change the bg colour to transparent black.. Where would you edit this.
    thx

  28. finid says:

    If you have the time, could you make it possible to have an option for the site admin to configure the plugin to ban IE6 or lower visitors to the site.

    Thanks

  29. Jimmy,

    Thank you for confirming this Flash zindex issue. I have a newer version which includes this setting though it hasn’t been released yet. I would be interested in any help with the language selection, we’re just too busy to get to it at this time. I would be happy to pass along credit to you if you’re interested.

  30. By the way;

    added _dd.style.zIndex = "50"; to my warning.js to force it to stay on top. Thanks for a great plugin!

  31. Proposals for GUI-stuff:

    I would really like to see an option where I could select what IE versions I would like to show this message for – Internet Explorer 7 ie.

    Selecting what browsers should be included / excluded would be cool.

    It would be cool if the user could have language options ;) Keep it simple though, some ppl might like to integrate it with Qtranslate.

    Also, Experiencing the z-index thing, but with “regular” content (adwords) Annoying ;)

  32. Swedish translation:

    var msg1 = “Visste du att denna versionen av Internet Explorer är utdaterad?”,
    msg2 = “Denna webbplats stödjer inte Internet Explorer 6. Sidan kommer sannolikt vara trasig eller till och med oandvändbar. Vi rekommenderar att du uppgraderar till en nyare version av Internet Explorer eller en annan webbläsare. En lista på de mest populära webbläsarna kan ses nedanför”,
    msg3 = “Klicka bara på ikonen för att komma till nedladdningssidan”,
    msg4 = “Genom att stänga detta fönster bekräftar du att du förstår att din upplevelse av denna webbplats inte är optimal.”,
    msg5 = “STÄNG”;

  33. Dan,

    We recently checked your site in IE6 and it appears the lightbox warning is placed over the Flash content. You may need to refresh your browser a few times to see the results. Is this due to the updated warning.js we sent or tweaking of your own? Let us know.

  34. Melvis Leon says:

    Spanish Translation:

    case (userLang = “es”) :
    var msg1 = “¿Sabías que esta versión del Internet Explorer esta desactualizada?”,
    msg2 = “Este sitio web no es compatible con Internet Explorer 6. Algunas cosas podrían ver se mal y tal vez no funcionar. Se recomienda la actualización a una versión más reciente del Internet Explorer u otro navegador web. Debajo se encuentra una lista de los navegadores web más populares.”,
    msg3 = “Solo tienes que hacer clic sobre el icono para ir a la página de descarga”,
    msg4 = “Al cerrar esta ventana usted reconoce que su experiencia en este website será degradada”,
    msg5 = “CERRAR”;
    break

  35. Yael,

    I believe the issue is related to the z-index of 50 on your menu. We’re currently working on an update to resolve this issue along with the Flash related problem.

  36. For my site http://www.millermosaicllc.com which uses the Thesis theme, (according to Browser Sandbox) in IE6 the lightbox appears under the nav bar so part of the message gets covered. What should I do?

  37. Gerry says:

    To Dans’ Question,

    try adding a in your object.
    <param name="wmode" value="transparent" />
    Hope it helps
    ~Gerry

  38. Dan,

    Please send an email address that I can contact you at, by using the contact form on this site. I have an updated file that I would like you to try.

    Thanks,

  39. For some reason, this lightbox pops *under* the Flash element on our front page.

    The flash is called, for IE, using an object type="application/x-shockwave-flash" declaration.

    Any thoughts? There are no Z-position declarations in the site’s CSS.

  40. Doesn’t work with the WP Minify plugin. Took about an hour to figure out before I finally disabled that plugin, which did the trick! :)

  41. hi doc4,

    this is my translation:

    var msg1 = “Sapevi che la tua versione di Internet Explorer è ormai datata?”,
    msg2 = “Questo sito non supporterà più Internet Explorer 6 e ti raccomanda di aggiornare il tuo browser ad uno più recente Ecco una lista dei browser più popolari del momento”,
    msg3 = “Ti basterà cliccare sull’icona del browser da installare per andare alla pagina di download”,
    msg4 = “Con la chiusura di questa finestra sei a conoscenza che la tua esperienza su questo sito non sarà al 100%”,
    msg5 = “Chiudi”;

    greeting from italy

  42. pubarena,

    1. Keep Italian as the default language for now and I will look into the issue. If you don’t mind sharing the translation I would be happy to add it for the next update and pass along credit as well.
    2. The difference between version 1.0 and 1.2 is the default output. We mistakenly left our company name in the message which has been removed in favor of a more general explanation in version 1.2.

  43. hi,

    Thanks for this plugin, i have two question for you:

    1. I modified the plugin and traslate the warning message also in Italian, but I had to put as default because I can not locate it (It, it-IT, IT-it does not work) do you know the right way?

    2. Is it possible to know the differences between the verson 1.0 and 1.2? because i compared the code and it’s look like the older version

    sorry for my english

    thank you

  44. Nonaoco,

    Refer to Kathy’s comment below on altering the browsers.

  45. kathy,

    Open the warning.js file and edit the following to suit your needs even if that means deleting a line or two:

    Lines 40 – 49

    var br1 = "Internet Explorer 8+",
     br2 = "Firefox 3+",
     br3 = "Safari 3+",
     br4 = "Opera 10+",
     br5 = "Chrome 2.0+",
     url1 = "http://www.microsoft.com/windows/Internet-explorer/",
     url2 = "http://www.mozilla.com/firefox/",
     url3 = "http://www.apple.com/safari/download/",
     url4 = "http://www.opera.com/download/",
     url5 = "http://www.google.com/chrome/",

    Then alter the image icons on lines 225 – 229

    _ico1ds.background = "transparent url('"+imgPath+"browser_ie.gif') no-repeat scroll left top";
    _ico2ds.background = "transparent url('"+imgPath+"browser_firefox.gif') no-repeat scroll left top";
    _ico3ds.background = "transparent url('"+imgPath+"browser_safari.gif') no-repeat scroll left top";
    _ico4ds.background = "transparent url('"+imgPath+"browser_opera.gif') no-repeat scroll left top";
    _ico5ds.background = "transparent url('"+imgPath+"browser_chrome.gif') no-repeat scroll left top";

  46. Nonaoco says:

    Howto remove others image web browsers links!! for upgrade?

  47. Can I edit this to recommend FF, Safari, Opera nd Chrome, but not IE?

  48. This seems to only work for IE6. Why not make it more compatible and have it popup for every out of date browser from the ie6 and below era. I also have a small issue, on my site I have a dropdown menu translator bar that is over the top of the lightbox display for this plugin. Great idea though, just doesn’t cover enough browsers to be very useful to me. I have users still using 5.5 and they do not see the message, so its a bit too specific.

  49. Jake,

    What other browsers besides IE 5.5 would you like to see this work with? The plugin name specifies IE6 but maybe we can work out a general plugin to cover a broader base.

  50. Smelling Internet says:

    Thanks for making this awesome Plugin.

    I hate IE :)

Trackbacks

  1. Our top 10 must-have and must-avoid WordPress plugins
  2. Inform users of IE6 to Upgrade Their Browsers
  3. Stop IE6 Users Browsing Your Website | Templaget Get
  4. IE6 Upgrade Option Review – Best Wordpress Plugins
  5. Les nouvelles du Pixel Solitaire » Mise à jour du plugin Wordpress « IE6 Upgrade Option »
  6. Stop IE6 Users Browsing Your Website - WP Mods
  7. WordPress Plugin Releases for 09/05 : UK Asian
  8. WordPress Plugin Releases for 09/17 | Tolly Blog
  9. WordPress Plugin Releases for 09/17 | The best Tutorials
  10. Weblog Tools Collection: WordPress Plugin Releases for 09/17 - Wordpress Creator
  11. WordPress Plugin Releases for 09/17
  12. WordPress Plugin Releases for 09/17 « Weblog Tools Collection
  13. WordPress Wednesday: IE6 Upgrade Option « BlueFur.com
  14. WordPress Plugin Releases for 09/05 » wordpressorg
  15. WordPress Plugin Releases for 09/05 | Tolly Blog
  16. wp-popular.com » Blog Archive » IE6 Upgrade Option | Doc4
  17. WordPress Plugin Releases for 09/05 | The best Tutorials
  18. WordPress Plugin Releases for 09/05 « Weblog Tools Collection
  19. Angry Creative ~ Jimmy Rosén - Multidesciplinär Art Director & Designer i Norrköping
  20. IE6 Upgrade Option | Doc4 | WpMash - WordPress News
  21. Wordpress plugin – Upgrade internet explorer 6 warning | Web Design & SEO Services
  22. IE6 Upgrade Option | Doc4 | Drakz Free Online Service
  23. IE6 Upgrade Option | Doc4 | Drakz Free Online Service
  24. WP IE6 Upgrade Option | WordPress News
  25. IE6 Upgrade Option für WordPress
  26. IE6 Upgrade Option
  27. IE6 Upgrade Option | ByU4U

Leave A Comment

Please wrap any code within the <code> tag to display properly

With CISPA (Cyber Intelligence Sharing and Protection Act) starting to make headlines in recent days I thought it only appropriate to take a look back at how well SOPA (Stop Online...

Welcome back to Doc4 Design's backups for beginners, wherein we continue to break the First Rule of Backups by talking about backups! In part one, we discussed the need for, and...

Backups are something that we all know are important, but sadly, we seldom spend much time on them, especially at home. For most of us data on our home systems isn't expensive or critical,...

Incorporating animals into identities is not a groundbreaking topic by any means but making the design work on a professional level isn't always an easy task. Making use of an artist's...

It's Christmas time, so I thought I would have a little fun with my article this month, not that I don't usually have fun. Since we are all designers, what better topic to discuss than...