Twitter
2.6
IE6 Upgrade Option
08. February 2010 · Author: Dale Crum
95 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

95 Comments

  1. Lili,

    There may be some compatibility issues with other plugins, though we haven’t run into any yet.

    How are you testing this plugin? I’m finding that these new IE6 testers are not true representations of the original browser. If you want to turn on the plugin I’ll give it a look here and can send over a screen shot for verification. The real question is how important is this plugin, the number of IE6 users is dwindling quickly so I question it’s usefulness. You might take a look at the stats on your website to determine how relevant it still is.

  2. Hello, this seems to be a really great plugin but i can’t make it work at all in wordpress 3.2. It installs correctly but ie does not give me any warning, even in multibrowser mode.
    Do you know of any compatibility issues? How can i see if the js is loaded in explorer?

  3. Yannick,

    Not at this time, the code determines what browser the user is running and highlights that icon for download. If a user decides to upgrade more than likely we will see that user update their current browser shying away from learning new software. They tend to feel more comfortable with what they already know.

  4. Hello and thanks a lot for this cute plugin.
    I managed to configure almost all options i wanted to but I can’t figure how to change the highlighted choice in warning.js

    I’d like to highlight firefox choice event if the visitor come from ie.

    Is there a way to to that?
    Thanks in advance, Yannick

  5. James,

    This is an excellent idea and will be included in the next release.

  6. James says:

    Adding and removing the slashes made the logo on my site disappear. Perhaps I did it incorrectly, particularly on the last part:

    // Would you like to use the pop up warning for browsers other than IE6?
    // If yes, then comment out the function below
    // Only display the code within Internet Explorer Browser

    Can we just have a file that we can use for IE7?

  7. Adnan,

    Can you see the plugin working on this site through IE Tester and is the plugin currently activated on your website, I’m not seeing any indication that it is. Try this, turn on the plugin without modifications and shoot me an email (info@).

  8. James,

    Adding a line comment makes the code unreadable. Follow the instructions throughout the code and either add “//” or remove them as indicated.

    A Commented Line:
    //class ie6option {

    An Uncommented Line:
    class ie6option {

  9. James says:

    “then (un)comment out the line below”… sorry, what does this mean?? I just want to enable this to show for IE7 as well.

  10. Adnan says:

    I used actual IE9 for testing … and IE Tester for other versions of IE.

  11. Adnan,

    The code looks good. The next question is what you’re using to test this out, are you using actual copies of Internet Explorer or something else. I ask because a lot of the fake IE testers won’t show this plugin as working.

  12. Adnan says:

    Hi Doc,

    I’ve tried to show the message for all the versions of IE (as you suggested earlier), but with no luck! :( The cplugin doesn’t work any version of IE. Can you please check my version of your code here? Can you please tell me whether it is correct or is there anything I missed?

    Thanks.

  13. Jimmy,

    That would be great, not on github just yet but I’ll shoot you an email as soon as it happens. Thanks for the extra help.

  14. Jimmy,

    IE7 is included in the script as well as multiple other browsers. If you mean update the script to a generic IE7 blocker then I tend to agree. These Explorer users are getting so far behind.

  15. By the way – youré on github?

    Could possibly help you out with a language selector & stuff for this plugin that I nagged about for like a year ago ;)

  16. Dude. I feel that its time.

    You should include IE7 in this script. It has reached its end of life, let’s make it public :)

  17. Adnan,

    You are working in the correct file, just look for the instructions written like this:

    // Would you like to use the pop up warning for browsers other than IE6?
    // If yes, then comment out the line below

    This includes all other Internet Explorer browsers not just other brands. To comment out a line add “//” the double backslashes in front of it which means the code is skipped over. There are five of these alterations to make with instructions in the code.
    COMMENT OUT A SINGLE LINE:
    // Would you like to use the pop up warning for browsers other than IE6? (This line is commented out)
    // If yes, then comment out the line below (This line is commented out)
    // class ie6option { (This line is commented out)

    COMMENTING OUT A GROUP OF CODE: (START WITH “/*” AND END WITH “*/” )
    /*
    }
    $browser = strtolower($_SERVER['HTTP_USER_AGENT']);
    if(ereg(“msie”, $browser)){
    $plugin_dir = basename(dirname(__FILE__));
    load_plugin_textdomain(‘ie6option’, ‘wp-content/plugins/’ . $plugin_dir, $plugin_dir );

    $obj_ie6option = new ie6option();
    add_action(‘wp_footer’, array($obj_ie6option, ‘add_footer’));
    }
    */

  18. I manage to do what I wanted, just wanted to remove the ‘Continue Anyway’ button, and I could do it in the warning.js file.

    Thank you so much for this plugin, it is so elegante, loving it.

  19. I’m using the plugin now but I was wondering if there is anyway that i can alter the CSS file. I go to the plugin and click Edit but it says that the style.css is inactive and any alterations I make don’t change anything in the final result.

    Can you help me with this one?

  20. Adnan says:

    Hi,

    I am testing the plugin in my localhost. I want to show the message for all IE versions instead of only IE6. So I changed the line number 83 to 90 of ie6-upgrade-option.php like the following:

    
    The following are the default values for each browser but can be easily changed by 
          resetting the values using the following method.
          */
          ftf.rate = {
          "firefox" : 1,
          "chrome" : 1,
          "opera" : 1,
          "safari" : 2,
          "ie6" : 3,    
          "ie7" : 3,    
          "ie8" : 3,
          "ie9" : 3
          };
    

    But it isn’t working for other versions of IE, even it doesn’t work for IE6 too! Any suggestion? (BTW … I am not a code-guy, so any kind of help will be appreciated :) )

  21. Andrai,

    Ridiculous as it is, we are working on upgrading our server’s php so we can run 3.2.1. I cannot confirm that this is 100% function though I don’t see any reason why it shouldn’t be. Installing the plugin does not add anything to you database so removing the plugin is simply a matter of deleting it. Let us know the outcome.

  22. Andrai says:

    Is this compatible with 3.2.1?

  23. Bruno,

    The instructions explain how to set the plugin for other browsers. If you’re still having trouble please let us know.

  24. Hi, nice plugin .. but, how i can configure it to display message for IE7 or even IE8?

  25. Thrippets,

    Please let us know how you were testing the plugin, we have not seen any issues using IE7 unless specifically set to do display in that browser.

  26. Thrippets says:

    Hi,

    Your plugin was also displaying the warning message for IE7. I had not changed any options, so had to disable it.

    Thanks.

  27. Jack,

    How are you testing the plugin?

  28. Hi Doc,
    We tried using your plugin cause i realy like it.
    I got it working just by installing, on an other site… But on this site it wont work. http://www.servabo.de
    I dont think its the plugin… but iam out of ideas. Maybe you can help.

    Greetings and Thanks

    Tobi

  29. Jack says:

    Can’t get this to work. Installed it in Wordpres 3.1.2. Cleared caches and everything. WordPress doesn’t seem to be loading the js from the plugin and therefor isn’t displaying the message when testing with IE6.

    Any ideas? Have you come across this?

  30. Chantelle,

    Please give more details on how you have IE6 installed. I’m seeing a lot of IE6 testers that don’t truly function like the original. I just tested your site and the plugin appears to be working perfectly, if you would like a screenshot let me know and I will send one your way.

  31. Hi There. Thanx for the plugin, but I cant get it to work? I have IE6 installed for testing this plugin.

  32. Matt c,

    Sure thing, I’ll shoot an example over via email shortly.

  33. Hello,
    I have tried editing the php to pop up for opera and IE7 and earlier. But now I have broken the site for all versions of IE. It’s works fine for chrome/opera(iffy but runs)/firefox… mac and windows. But totally gone for IE.
    Would you be able to provide me, by email, with the code for the php file please to make this work?
    Thanks,
    Matt

  34. Jeroen Onstenk says:

    Great! Will update right away!

  35. Jason,

    The message is working fine and I will send a screen capture to the email address listed here. The only issue seems to be the browser icons, not all of them are displaying. Not all of the images are in the correct folder?

    Looks like you missed a few comment out sections in the instructions. There are four locations to comment out and one location to uncomment:

    // Would you like to use the pop up warning for browsers other than IE6?
    // If yes, then comment out the line below
    echo '<!--[if IE 6]>';

    // Would you like to use the pop up warning for browsers other than IE6?
    // If yes, then comment out the line below
    echo '<![endif]-->';

  36. Jason says:

    Thanks Doc.

    http://www.sadreminders.com

    I also added other browsers as per the instructions, and it still didn’t work.

  37. Jason,

    After some testing I can tell you that the internet is a different place entirely when using IE6. User Agent Switcher is being very kind. I’m not completely sure of the developers intentions but I wouldn’t rely on the plugin for browser testing.

    “Switching the user agent does not make the browser render a page like another browser and is not guaranteed to fix issues with every site. Please read the help for more information.”

    Send over your website link with the plugin activated and I will be happy to take a look and a screenshot for you.

  38. Jason,

    We haven’t tried this method of browser testing yet. Currently we are using a mix of Spoon browsers, IETester and the stand alone versions. I’ll be happy to give this a try and see what I can do.

  39. Jason says:

    Can’t get this to show with Chris Pederick’s User Agent Switcher for Firefox, even though every user agent testing site I go to says I’m using IE6.

    The code is showing up on my page.

    Help?

  40. Jeroen,

    This plugin has been updated to include the recent release of IE9.

  41. Jeroen,

    Thank you for the notice. We will look into it.

  42. Jeroen Onstenk says:

    Great plugin, but unfortunately it doesn’t work with IE9. That version is also shown as outdated…

  43. RG,

    Please post the translation here in the comments. This way everyone can use it until we add it to the plugin.

    Thank you for your efforts.

  44. Hi there,
    i could send you a french translation for the plugin, i’m just not sure how.
    Thanks for the plugin!

  45. Groliaz,

    The message must be set manually. Though much less painful than the previous version.

Trackbacks

    Leave A Comment

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

    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...

    After reading hundreds of articles and design newsletters over the years showcasing websites as a source of inspirational material we felt it was our turn to give back to the community....

    When you own a small business, competing with the top dogs in the market can be a financial and time-consuming challenge. How do you get the word out about your business without spending...

    If you are reading this article then you are probably a graphic designer or work in marketing in some form or fashion. That being said, you probably own your own company, freelance,...