PDA

View Full Version : Help to Display IE6 Warning



treeleaf20
01-28-2011, 11:47 PM
All,
If a user is going to my site with IE7 or less I call the following JS file.

// JavaScript Document
var ie6_warning=navigator.userAgent.indexOf('MSIE 6')
if (ie6_warning > 0)
{
document.write("<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; z-index:5000'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display=\"none\"; return false;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif; color:#000'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px; color:#000'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px; color:#000'>For a better experience using this site, please upgrade to a modern web browser.</div> </div><div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left; width: 73px;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div><div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-opera.jpg' style='border: none;' alt='Opera'/></a></div> </div></div>" );}

Right now it only goes 75pixels. How can I make it so that it spans the whole screen of the users computer? Thanks in advance!

treeleaf20
01-29-2011, 12:49 AM
Actually, I'm looking for something else for this. Is there anyway to lay this over the whole screen? Right now it is just a <div> at the top of the page and pushes the rest of the page down. Is there anyway to make that so it actually overlays the top of my page, so you actually have to close that before doing anything on my page? Thanks for the help in advance.

treeleaf20
01-29-2011, 01:07 AM
I tried to change some of the paramenters and instead of document.write I used document.body.appendChild. I tried to make it like this:


var ie6_warning=navigator.userAgent.indexOf('MSIE 6')
if (ie6_warning > 0)
{
document.body.appendChild("<div style='border: 1px solid #F7941D; background: #FEEFDA; opacity: .7; filter: alpha(opacity=70); text-align: center; clear: both; width: 100%; height: 100%; position: aboslute; top; left:0 z-index:10'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display=\"none\"; return false;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif; color:#000'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px; color:#000'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px; color:#000'>For a better experience using this site, please upgrade to a modern web browser.</div> </div><div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left; width: 73px;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div><div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-opera.jpg' style='border: none;' alt='Opera'/></a></div> </div></div>");
}

However, nothing was output to the screen. Any advice?

glenngv
01-29-2011, 02:24 AM
No JavaScript needed. Just use IE Conditional Comment (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx).

treeleaf20
01-29-2011, 02:27 AM
Thanks but I do already do that. I use the conditional statements to display the JavaScript which shows the users that their browser is out if date.

glenngv
01-29-2011, 04:05 AM
No, don't use conditional comments to display the Javascript but use it to display the HTML tags you want to display for IE6.


<!--[if lte IE 6]>
<div>You are using an outdated browser....blah blah blah</div>
<![endif]-->

Philip M
01-29-2011, 07:35 AM
Right now it only goes 75pixels. How can I make it so that it spans the whole screen of the users computer?

I see this as unwise - the user will see it as excessively aggressive - equivalent to SHOUTING! Your warning should be discreet.

Be aware that there are still many people using IE6, especially in corporate environments or in developing countries.

treeleaf20
02-01-2011, 09:21 PM
I have this but it still shows it for Chrome, Opera, Firefox and these are updated. Why would it show a warning for those browsers when I use the following:


<![if lt IE 7]>
<script type="text/javascript">
alert("You are using an out of date browser. Please visit http://www.microsoft.com/windows/internet-explorer/default.aspx to download the latest version to use website.com");
</script>
<![endif]