How does that work?
Using the IE awareness initiative on your site is as simple as including the following
piece of code in the body of your HTML pages:
<script src="http://ieai.pieroxy.net/ieai.js"></script>
This code should be placed in between the <body>
tag and the </body> tag, preferably toward the end of
your document.
To avoid having all users downloading this script, you can put this code in a conditional
comment so that only IE users will use it:
<!--[if lte IE 7]>
<script src="http://ieai.pieroxy.net/ieai.js"></script>
<![endif]-->
Many things are customizable in the popup:
Which version of IE?
By default, the script will be displayed to all IE6 & IE7 users. If you want to configure this,
just add the following piece of code before including the JS file:
<!--[if lte IE 6]>
<script language="javascript">
var ieai_alertfor=6;
</script>
<script src="http://ieai.pieroxy.net/ieai.js"></script>
<![endif]-->
The above example will display the popup to all IE6 and below. Note that both the conditional comment
version number and the ieai version number needs to be set.
To display the popup to everyone
using IE, you should set it to 8. You may define a version that is above the current IE release, such
as 9 or 10, but since IE9 is not out yet, we don't know if it will have the same issues we're
trying to fight. So let's be fair to Microsoft and just ban the versions you know cause pain.
Why not proposing IE8?
Right, why not? IE8 is a decent browser. While still not up to the competition
in a number of ways, it is very far from the pain IE6 generates.
You can very well propose IE8 as an upgrade option to your visitors, by doing
the following:
<!--[if lte IE 7]>
<script language="javascript">
var ieai_showie8=true;
</script>
<script src="http://ieai.pieroxy.net/ieai.js"></script>
<![endif]-->
My users don't speak english !
The code provided support several languages. If your language is not supported, you can either
personalize it on your site (see the next section) or
give us a translation to the 5 messages involved.
That way, everyone will benefit from this. The language is inferred from the user's Internet Explorer.
To make it short, if they didn't mess anything up
they should see the popup in their language or in English if their language cannot be guessed or
is unknown.
This guessing works well in most cases, but if you want to force a language, because your site
is only displaying one language anyways, you can do it by following the example below:
<!--[if lte IE 7]>
<script language="javascript">
var ieai_lang='fr';
</script>
<script src="http://ieai.pieroxy.net/ieai.js"></script>
<![endif]-->
Note that for now, only
'fr',
'nl' and
'en' are supported.
The message doesn't suit me
You can personalize the message displayed in the popup. Just add the following piece of code before
including the JS file:
<!--[if lte IE 7]>
<script language="javascript">
var ieai_textClose="Close this window";
var ieai_textLink="Learn more about this";
var ieai_textTitle="You are using IE"; // The script will append the IE version
var ieai_textMain="We don't like it";
var ieai_textRecommend="So please upgrade to one of the browsers below";
</script>
<script src="http://ieai.pieroxy.net/ieai.js"></script>
<![endif]-->
Bugz? Bugz!
|
The popup is in fact a simple html DIV that is absolutely positionned. On IE6, if you have a combo box (<select>)
behind the DIV, it will be displayed through the popup. See the screenshot for a visual example.
This problem is one of the many reasons this initiative exists. There is unfortunately no elegant solution, as always when dealing with IE6.
The ieai.js code will look for a ieai_show() method before
displaying the popup, and a ieai_hide() method
before closing it. You should define these two methods and hide / show the select box to avoid the
issue. Of course, if your website doesn't display this issue, you don't need anything.
This issue will occur on all websites with select boxes, flash applets, java applets or any other heavyweight objects for IE6.
Below is an example of code doing this.
|
Below is a screenshot of the select box bug with IEAI.
|
<!--[if lte IE 6]>
<SCRIPT>
function ieai_show() {
document.getElementById('MySelect').style.visibility='hidden';
}
function ieai_hide() {
document.getElementById('MySelect').style.visibility='';
}
var ieai_alertfor=6; // Inform only IE6 users
</SCRIPT>
<SCRIPT src="http://ieai.pieroxy.net/ieai.js"></SCRIPT>
<![endif]-->
That's all?
Well, that's pretty much it. That said, if you want a more personalized version of the code, just
take it from here and do what you want with it. The code is copyrighted to me and licensed under
the very popular
WTF Public License, no strings attached.
The point is to get the message through. If you have
a better idea,
tell us in the forums, we are interested. Or just do it yourself! We live in a free
world ;-)
