ansaurus

Question

Java/jQuery that detects IE6 and lower and slides/prompts message

Answer 1

+1 A:

You could use jQuery's $.browser in an if statement which executes slideDown when the condition is met. Something like:

if ($.browser.msie && $.browser.version <= 6) {
    $('#someHiddenDivId').slideDown();
}

You can eventually use it in combination with the snippet of http://ie6nomore.com :)

Edit: as per the comments, here's an SSCCE, just copy'n'paste'n'run it.

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            $(document).ready(function() {
                if ($.browser.msie && $.browser.version <= 6) {
                    $('#ie6msg').slideDown();
                }
            });
        </script>
    </head>
    <body>
        <div id="ie6msg" style='display: none; border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'><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://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div><div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'><div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div><div style='width: 275px; float: left; font-family: Arial, sans-serif;'><div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div><div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>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://www.ie6nomore.com/files/theme/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://www.ie6nomore.com/files/theme/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://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div><div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div></div></div>
        <div id="content">Your content</div>
    </body>
</html>

It appears that you've never used jQuery. I then strongly recommend to get yourself through the basic jQuery tutorials which are available at its homepage: http://docs.jquery.com/Tutorials Good luck.

BalusC 2009-12-19 01:06:41

hey, thank you very much.so, lets say we use the ie6nomore.com block that they provive.I like how it works, I just don't like the way it fades in and out. How could i smoothen that in/out? "sliding" is the perfect verb for what I want to describe.

Hobhouse 2009-12-19 01:42:22

I am not sure if I understand you. What do you mean with "the way it fades in and out"? The code from ie6nomore doesn't do that. The jQuery code example just slides the div down. Follow the `slideDown` link in my post for an example and more options, such as `"slow"` or `"fast"`.

BalusC 2009-12-19 02:20:59

sorry, i didn't explain myself well. i meant i don't know how to combine your code with the ienomore.com code. i tried, but it didn't work..what i did is: I created a <div> with the id="ieMsg" that nested the ienomore.com code, and i put the ieMsg in your code. so the result was: I had in my heading:<script type="text/javascript">if ($.browser.msie }</script>however, the ieMsg div is inside the ienomore.com code, which is a hidden inside the  i think that's the problem?

Hobhouse 2009-12-19 02:32:08

You need to execute this code during `$(document).ready()`.

BalusC 2009-12-19 02:50:02

sorry, i didn't get that :SI'm not really fresh at java or jquery.. anything with dollar-symbols really :x

Hobhouse 2009-12-19 15:33:03

I edited my answer and added an SSCCE.

BalusC 2009-12-19 19:04:06

hey, sorry about that.okay well I did edit my index.html. I changed the part in your code that mentions the msie version "<= 6" to "<= 8" to test it on my internet explorer browser, but it doesn't work. I guess it could be the <= value, as my logic goes i though it meant "less and equal to", but it might not.. so maybe anybody with IE6 could test it? www.chrishonn.com

Hobhouse 2009-12-19 19:40:39

Answer 2

A:

Hello, is there any way I can test this sliding effect in firefox? I've changed the if-statement to if ($.browser.mozilla && $.browser.version <= 4) but apparently the ie6nomore.com code it-self only works in MSIE 6 or less (i thought this was only achieved with the <--[if lte IE 6] code and in your(@BalusC) code with the if ($.browser.msie && $.browser.version <= 6).

Anyway, thanks in advance. chris

cr0z3r 2009-12-20 21:30:36

I screened your code (on www.chrishonn.com/test.html) with browsershots.org and it does work. I'd only like to see the sliding part, and for that, I'd have to either install IE 6 (but i have windows 7) or (since there should be an easier way by changing those values) allow me to test it in firefox.Thank youscreen >> http://api.browsershots.org/png/original/13/13660bcf2e7eb94c530ec68d945448fe.png

Hobhouse 2009-12-20 21:34:27

ansaurus

tags:

views:

answers:

Java/jQuery that detects IE6 and lower and slides/prompts message

related questions