IE6 Warning Sorted

Hi,

I had a problem where i wanted to have a warning pop up if the user was using IE6 to say there may be faults on the site as it wasn't designed around IE6, then they could choose to continue or exit to browser.

Heres what i did:

Created a Javascript File to direct IE6 users to the warning page "ie6warning.html:

<!--

var browser = navigator.appName

var ver = navigator.appVersion

var thestart = parseFloat(ver.indexOf("MSIE"))+1

var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7))

if ((browser=="Microsoft Internet Explorer") && (brow_ver < 7))

{

window.location="/ie6warning.html";

}

//-->

Created a page to display the warning "ie6warning.html", style the warning box and called a jquery file for the overlay to work.

<head>

<script src="js/jquery.tools.min.js"></script>

<style>

#facebox {/* overlay is hidden before loading */ display:none; /* standard decorations */ width:400px; border:10px solid #666; margin:-200px 0 0 0;}

#facebox div {padding:0px; font-family:"lucida grande",tahoma,verdana,arial,sans-serif;}

#facebox h2 {margin:0px; margin-bottom:0px; color:#fff; background-color:#6D84B4; padding:10px 0; border:1px solid #3B5998; font-size:20px; text-align:center;}

#facebox p {text-align:center; padding:0 10px; font-weight:bold;}

#facebox a {color:#000; text-decoration:none; padding:10px; background-color:#eee;}

#facebox a:hover {color:#fff; background-color:#06F;}

#facebox table {width:50%; margin:0 auto 10px auto;}

#facebox td {padding:10px;}

</style>

</head>

<body>

<div id="facebox">

<div>

<h2>Internet Explorer 6 Warning</h2>

<p>This website has not been designed to work with Internet Explorer 6.<br />

<br />

If you choose to continue be aware that the pages may not display as intended and may contain faults.

</p>

<p style="color:#666">Click Continue to load the homepage or Exit to return to the browser.</p>

<table>

<tr>

<td><p><a href="http://www.younglinton.co.uk/index-ie.htm">Continue</a></p></td>

<td><p><a href="http://www.google.com">Exit</a></p></td>

</tr>

</table>

</div>

</div>

<script>

// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {

// select the overlay element - and "make it an overlay"

$("#facebox").overlay({

// custom top position

top: 272,

// some expose tweaks suitable for facebox-looking dialogs

expose: {

// you might also consider a "transparent" color for the mask

color: '#fff',

// load mask a little faster

loadSpeed: 200,

// highly transparent

opacity: 0.5

},

// disable this for modal dialog-type of overlays

closeOnClick: false,

// we want to use the programming API

api: true

// load it immediately after the construction

}).load();

});

</script>

</body>

You will see that the Continue link goes to a copy of the index page otherwise it will be a continuous loop between the warning and the homepage for IE6 user.

Created the copy of the index.html page and call it something like index-ie6.html

added the following javascript call in the index.html page:

<script type="text/javascript" src="js/ie6warning.js"></script>

I think i've covered everything, if anyone has a better idea i'd love to know as this took me ages to get working.

I hope this is helpful to someone.

Cheers

Tony