Help - Search - Members - Calendar
Full Version: Detect if IE when JS is dissabled
HTMLHelp Forums > Programming > Client-side Scripting
deadrabit
Sep 10 2008, 05:54 PM
heyya, i'm using the "son of suckerfish" script fix for CSS menus because of some problem with :hover.

anyway, I can detect whether JavaScript is dissabled and with JS how to detect what browser... but my menu wont work if someone is using Internet explorer when JS is dissabled.

so i was wondering if someone else could give me a script or information on how to find/make a script (i.e. any starting point like which language to use would be good =p) that could detect:
a) if JavaScript is dissabled
and
b) if the client is using Internet explorer

and it needs to be applyable as follows:

<div ID = "menu">
if (Javescript dissabled) {

<?php include ('JavaScript-less_menu.php') ?>

} else {

<?php include ('JavaScript_menu.php') ?>

}

</div>

thanks for all the help XD
Dead.Rabit
Christian J
Sep 10 2008, 06:00 PM
You can make a menu that works (stays open) without javascript, then use JS to both hide and show it.
deadrabit
Sep 10 2008, 06:12 PM
QUOTE(Christian J @ Sep 10 2008, 06:00 PM) *

You can make a menu that works (stays open) without javascript, then use JS to both hide and show it.


It will work in firefox opera and netscape without Javascript. so i'd prefer it if there was a way to detect if both of these conditions are true...
come to think of it with $_GET from php. i can do the if else statement....

is there any other way outside of JS to detect what browser is being used?

thanks
D.R
pandy
Sep 10 2008, 06:12 PM
QUOTE
any starting point like which language to use would be good


What about HTML? tongue.gif

You could use NOSCRIPT within a conditional comment.

Or do what Christian suggests. Sometimes I think the "almost pure CSS menu" approach causes more problems then it solves.
Christian J
Sep 11 2008, 06:16 AM
QUOTE(deadrabit @ Sep 11 2008, 01:12 AM) *

It will work in firefox opera and netscape without Javascript.

That's because it uses CSS to both hide and show the menus, but IE only supports the CSS for hiding and then needs JS for showing, which IMHO is a design flaw in this menu.

Remove the CSS-hiding for IE in its style sheet and instead apply it with JS, something like this:

CODE

<style type="text/css" media="screen, projection">
/* original hiding style, seen by "all" common browsers */
</style>

<!--[if IE ]>

<style type="text/css" media="screen, projection">
/* cancel the above CSS hiding style here */
</style>

<script type="text/javascript">
/* reapply the hiding style with JS here */
</script>

<![endif]-->


QUOTE
is there any other way outside of JS to detect what browser is being used?

Above I use "conditional comments".
Christian J
Sep 11 2008, 08:02 AM
This seems to work, but I just tested briefly (for the single-level menu):

CODE
<!--[if IE]>
<style type="text/css" media="screen, projection">
/* Cancel the hiding style applied with CSS: */
#nav li ul {left: auto;}
</style>
<script type="text/javascript">
sfHover = function() {

     // Reapply the hiding style, but with JS:
    var ul=document.getElementById('nav').getElementsByTagName('ul');
    for(var i=0; i<ul.length; i++)
    {
        ul[i].style.left='-999em';  
    }

    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->


Note that since STYLE properties applied with JS have higher specificity you must also add an "!important" declaration in the style sheet used by all browsers:

CODE
#nav li:hover ul, #nav li.sfhover ul {
    left: auto !important;
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.