#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    22
    Rep Power
    0

    DHTML and newer browsers


    Trying to get navigation code to work with all browsers. It worked fine for NS6+ and IE4+ using DOM, but when I added layers to try and please NS4 it failed miserably.

    Script:

    ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
    ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4))
    ns6 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 6))

    function turnOn(div) {
    if (ns4) {document.div.visibility = 'visible';
    }else{
    d = document.getElementById(div);
    d.style.visibility = "visible";
    }
    }

    function turnOff(div) {
    if (ns4) {document.div1.visibility = 'hidden';
    }else{
    d = document.getElementById(div);
    d.style.visibility = "hidden";
    }
    }


    Code:

    <layer onmouseover="turnOn('div2')">
    </layer>
    <nolayer>
    <DIV STYLE="LEFT: 255px; TOP: 0px; position:absolute" onmouseover="turnOn('div2')" onmouseout="turnOff('div2')">
    <font color="#FFFFFF">Lifestyles</font>
    </DIV>
    </nolayer>

    <layer name="div2" onmouseover="turnOn('div2')" >
    </layer>
    <nolayer>
    <div id="div2" style="LEFT: 255px; TOP: 19px; position:absolute; border-width:thin; border-color:white; border-style: groove; visibility: hidden; background: #FF8040; text-align: left; padding-left: 5px; font-family: Verdana; font-size: x-small; padding-right: 5px;" onMouseOver="turnOn('div2')" onMouseOut="turnOff('div2')">
    <a href=http://" onmouseover="turnOn('div2')" onmouseout="turnOff('div2')">Overview</a><br>
    <a href=http://" onmouseover="turnOn('div2')" onmouseout="turnOff('div2')">Styles</a><br>
    <a href=http://" onmouseover="turnOn('div2')" onmouseout="turnOff('div2')">Trends</a><br>
    <br>
    </DIV>
    </nolayer>


    A real mess!
    Any thoughts??
    thanks
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Any thoughts??
    Here's one: don't bother.

    OK; use a menu script, already sweated over by someone else. By the time you've gotten the hang of accomodating Navigator, nobody'll be using it any more (we hope).

    Just a quick sample of some of the 'mess':


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>xbr mess</title>
    <style type="text/css">

    .header {
    position: absolute;
    padding-top: 1px;
    padding-bottom: 3px;
    border: 3px black double;
    background-color: sienna;
    layer-background-color: sienna;
    }

    #header1 {
    left: 255px;
    top: 0px;
    }

    #header2 {
    left: 330px;
    top: 0px;
    }

    .menu {
    padding-left: 8px;
    border: 1px black solid;
    background-color: #ff8040;
    layer-background-color: #ff8040;
    visibility: hidden;
    }

    #menu1 {
    width: 74px;
    height: 64px;
    position: absolute;
    left: 257px;
    top: 26px;
    }

    #menu2 {
    width: 71px;
    height: 64px;
    position: absolute;
    left: 332px;
    top: 26px;
    }

    a.headerlink {
    font: 200 13px verdana,arial,sans-serif;
    color: gold;
    text-decoration: none;
    }

    a.menulink {
    font: 200 10px verdana,arial,sans-serif;
    color: black;
    }

    a.menulink:hover {
    color: ivory;
    }

    body {
    margin: 0px;
    }

    </style>
    <script type="text/javascript" language="javascript">

    ie4 = ((navigator.appName == 'Microsoft Internet Explorer') && (parseInt(navigator.appVersion) >= 4 ));
    ns4 = ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) >= 4));
    ns6 = ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) >= 6));

    var hideID = null;

    function showmenu(menu_id) {
    hideall();
    if (hideID) clearTimeout(hideID);
    if (ns4) document[menu_id].visibility = 'visible';
    else if (ie4 || ns6) document.getElementById(menu_id).style.visibility = 'visible';
    }

    function hide(menu_id) {
    if (ns4) document[menu_id].visibility = 'hide';
    else if (ie4 || ns6) document.getElementById(menu_id).style.visibility = 'hidden';
    }

    function hideall() {
    var allmenus = ['menu1','menu2'];
    for (var a=0; a<allmenus.length; ++a) hide(allmenus[a]);
    }

    function hidemenus() {
    hideID = setTimeout('hideall()',1000);
    }

    </script>
    </head>
    <body marginwidth="0" marginheight="0">
    <layer id="stripe" width="102%" height="30" bgcolor="tan"></layer>
    <nolayer>
    <div style="width:100%;height:26px;background:tan;"></div>
    </nolayer>
    <div id="header1" class="header"><a class="headerlink" href="javascript&#58;;" onmouseover="showmenu('menu1')" onmouseout="hidemenus()">&amp;nbsp;Lifestyles&amp;nbsp;</a></div>
    <div id="menu1" class="menu" onmouseover="showmenu('menu1')" onmouseout="hidemenus()">&amp;nbsp;<a class="menulink" href="javascript&#58;;">Overview</a>&amp;nbsp;<br>&amp;nbsp;<a class="menulink" href="javascript&#58;;">Styles</a>&amp;nbsp;<br>&amp;nbsp;<a class="menulink" href="javascript&#58;;">Trends</a>&amp;nbsp;</div>
    <script type="text/javascript" language="javascript">
    if (ns4) {
    var l = document.menu1;
    l.pageY +=2;
    l.onmouseover = function() {showmenu('menu1')};
    l.onmouseout = function() {hidemenus()};
    }
    </script>
    <div id="header2" class="header"><a class="headerlink" href="javascript&#58;;" onmouseover="showmenu('menu2')" onmouseout="hidemenus()">&amp;nbsp;Potatoes&amp;nbsp;</a></div>
    <div id="menu2" class="menu" onmouseover="showmenu('menu2')" onmouseout="hidemenus()">&amp;nbsp;<a class="menulink" href="javascript&#58;;">Fried</a>&amp;nbsp;<br>&amp;nbsp;<a class="menulink" href="javascript&#58;;">Mashed</a>&amp;nbsp;<br>&amp;nbsp;<a class="menulink" href="javascript&#58;;">Crushed</a>&amp;nbsp;</div>
    <script type="text/javascript" language="javascript">
    if (ns4) {
    var l = document.menu2;
    l.pageY +=2;
    l.onmouseover = function() {showmenu('menu2')};
    l.onmouseout = function() {hidemenus()};
    }
    </script>
    </body>
    </html>

    Many, many ways to handle this, knowing any of them will soon be a totally useless skill...
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    57
    Rep Power
    14
    yeah..forget all about netscape 4..it saves a lot of time
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    22
    Rep Power
    0

    Question NS7


    Adios - NS7 doesn't seem to like this (the menus)
  8. #5
  9. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    ns4 = ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) == 4));
    ns6 = ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) >= 5));

    Didn't re-write your sniffer, because I was just trying to make a point about Netscape v.4. Don't 'forget about it' if you need to support it - just use someone else's work and conserve your time for better things.

IMN logo majestic logo threadwatch logo seochat tools logo