IE Alert! plugin v2.1

Table of Contents

  1. About the plugin
  2. What the plugin does
  3. Getting started
  4. Using the plugin
  5. Options
  6. Known issues
  7. Credits, Source and License

A) About the plugin - top

IE Alert is a handy jQuery plugin that shows a well designed modal box to the visitor who's trying to view your site with an older version of Internet Explorer browser, this modal box will convince your visitors to upgrade their browser to a newer version of Internet Explorer or to an another web browser.

IE Alert

This message will appear if your visitor is using an older version of Internet Explorer

B) What the plugin does - top

The IE Alert plugin will show a modal box to the visitor who is trying to view your website with Internet Explorer browser. This modal box tries to convince them to upgrade to a newer version of Internet Explorer or to an another modern web browser. By clicking the Upgrade button a new window/tab will be opened where your visitor can download the new browser. The modal box contains a title text (can be modified, see options) a basic text (can be modified, see options) a close button and a Upgrade button (the upgrade text and the URL can be modified, see options).

C) Getting started - top

Folder Structure
When you unzip the downloaded file the folder structure looks the following:

Documentation - The documentation to the plugin.
The Plugin - In the Plugin folder you can find the following files:

First step

The first step is to include some required files into your HTML document.

  1. Include the latest jQuery library right after the closing </head> tag in your html document.
    Download jQuery from jquery.com
    How jQuery works
  2. Include the minified IE Alert plugin (iealert.min.js) right after the already included jQuery Library.
  3. Include the style.css CSS file (which is in the iealert folder) right after the already included IE Alert plugin.

Please note, that the style.css file must be in the same folder where the images are.

A simple example how your HTML markup will look like if you include the required files:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
  <script src="iealert.min.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="iealert/style.css" />
</head>
<body>
  Content here
</body>
</html>

D) Using the plugin - top

If you included all the required files (see Getting started > First step) you only need to "call" the plugin. We "call" the plugin with this line:

$("body").iealert();

Just copy this code and paste it into a jQuery $(document).ready() function. (more about the jQuery $(document).ready() function)

Example:

$(document).ready(function() {
  $("body").iealert();
});

If you have done everything exactly as it was written you can test your website with Internet Explorer 8,7,6 and you will see the modal box appear.

E) Options - top

The IE Alert plugin accepts the following options:

− The support option

The support option defines on which version of Internet Explorer will the modal box appear.
It option accepts 4 parameters:

By default it's set to ie8.

Example code:

$("body").iealert({
  support: "ie9"
});

The modal box will appear on Internet Explorer 9,8,7,6

$("body").iealert({
  support: "ie8"
});

The modal box will appear on Internet Explorer 8,7,6

$("body").iealert({
  support: "ie7"
});

The modal box will appear on Internet Explorer 7,6

$("body").iealert({
  support: "ie6"
});

The modal box will appear only on Internet Explorer 6


− The title option

The title option specifies the title text, by default its: "Did you know that your Internet Explorer is out of date ?" . You can modify this text to whatever you want.

IE Alert

Example code:

$("body").iealert({
  title: "your browser is old!"
});

The title text after the change will look like this.

IE Alert

− The text option

The text option specifies the text what is under the title text, by default its: "To get the best possible experience using our site we recommend that you upgrade ...". You can modify this text to whatever you want.

IE Alert

Example code:

$("body").iealert({
  text: "Please, update your browser."
});

The text after the change.

IE Alert

Note, the text parameter accepts HTML tags like the HTML font tag. So you can style the text like this:

$("body").iealert({
  text: "Please, <font color="red">update</font> your browser"
});

The output will be:

IE Alert

− upgradeTitle

The upgradeTitle option specifies the title text inside the upgrade button, by default its: "Upgrade" .
You can modify this text to whatever you want.

IE Alert

Example code:

$("body").iealert({
  upgradeTitle: "Download"
});

IE Alert

The upgrade text after the change.


− upgradeLink

The overlayClose option specifies the URL where the user will be sent when he clicks the Upgrade button, by default its pointing to: "http://browsehappy.com/".
You can modify this URL to whatever you want.

IE Alert

The URL

Example code:

$("body").iealert({
  upgradeLink: "http://www.mozilla.org/en-US/firefox/new/"
});

IE Alert

The upgrade URL after the change.



− overlayClose

Optionally you can close the modal box by clicking the overlay, the overlayClose option specifies this option. By default its turned off (false) but if you want you can turn in on with the true parameter.

example code:

$("body").iealert({
  overlayClose: true
});

IE Alert

The red background shows what is considered overlay.



− closeBtn

By default the visitor can close the modal box and by doing this he will not upgrade his browser. But you can hide this close button by adding false parameter to the closeBtn option.

example code:

$("body").iealert({
  closeBtn: false
});


F) Known issues - top

IE Alert has some known issues, but these are not major issues and they are IE6 related:

  1. Different overlay for IE6

    Sadly Internet Explorer 6 doesn't support the PNG file format, so that's why I had to make different overlay for IE6 browsers. The overlay looks the following on IE6 browsers:

    IE Alert
  2. Hover effect doesn't work on IE6

    Sadly Internet Explorer 6 doesn't support :hover state on div. What this means is when somebody wants to close the modal box he will not see the hover statement for the close button, but the close function will work.

If you found a good solution for these issues please contact me.

G) Credits, Source and License - top

The modal box design was inspired by a PSD freebie made by design deck. Check out their site on www.designdeck.co.uk for free PSD files.

The IE Alert plugin was made by David Nemes.
Docs prettified by Brandon Brown

License: You can use it on any project without any restriction.

@nmsdvid|IE Alert homepage

Go To Table of Contents