#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    3
    Rep Power
    0

    Angry


    hiya

    I am trying to have a dynamic menu (tree like navigation)
    to work on NS6 (works already very well on NS4.xx and IE5+)
    I am using layers, Javascript, CSS ....
    for some reason NS6 just refuse to display anything else than a black page with a small velvet box.

    here's the HTML :
    <html>
    <head>
    <meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <title></title>
    <script language="JavaScript" src="_ScriptLibrary/dynlayer.js"></script>
    <script language="JavaScript" src="_ScriptLibrary/dynlayer-glide.js"></script>
    <script language="JavaScript" src="_ScriptLibrary/dynlayer-common.js"></script>
    <script language="JavaScript" src="_ScriptLibrary/collapsemenu.js"></script>
    <script language="JavaScript">
    <!--
    var Open = ""
    var Closed = ""

    function preload(){
    Open = new Image(10,10)
    Closed = new Image(10,10)
    Open.src = "images/openfolder.gif"
    Closed.src = "images/closefolder.gif"
    init()}


    function showhide(number,what){
    if (collapse.blocks[number].open){
    what.src=Open.src
    }
    else{
    what.src=Closed.src
    }
    }
    function init() {
    collapse.activate()

    // set the height of the document based on the height of the menu
    if (is.ns) document.height = collapse.lyr.y + collapse.h
    }

    collapse = new CollapseMenu(0,0,1000,6)
    collapse.openStyle = 'glide'
    collapse.bgColor = '#F3F0FF'
    collapse.speed = '16'
    collapse.build()

    writeCSS(
    collapse.css
    )

    //-->
    </script>
    </head>
    <body onLoad="preload()" leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0" bgcolor="rgb(243,240,255)">
    <pre style="FONT-WEIGHT: bold; FONT-FAMILY: Arial; BACKGROUND-COLOR: rgb(243,240,255)">
    <script language="JavaScript">
    document.write(collapse.divStart)
    </script>
    <div id="CollapseMenu0Block0">
    <div id="CollapseMenu0Block0Item"><a onClick="showhide(0,cross0)" href="javascript:collapse.toggle(0)"><img id="cross0" alt src="images/openfolder.gif" border="0" WIDTH="10" HEIGHT="10"><font color="#000088"> SAW 08/11/2000 13:51</font></a> <br>Every screen of PS-Team should be mocked up as an HTML page. Vlad will then
    </div>
    <div id="CollapseMenu0Block0Content">
    cut the HTML into pieces and store the pieces in the PS-Team database.

    We decided yesterday...
    The main screen per topic would contain
    Ps-team logo, short topic name and long topic name on first line
    Single toolbar (see below)
    Table of gripes such that you can reorder columns by clicking on headers

    The toolbar would contain...
    Combobox of topics (just those you are involed in) + ALL
    Combobox of filters (My topics (default) and All topics (greyed if ALL
    chosen above)
    New task icon
    Search icon
    Project icon
    Settings button
    The psteam logo would link to the topic overview page (all topics)
    The search page will probably have two levels - quick search and advanced
    search
    The settings page will contain the details of acolytes, demigod, listeners,
    etc.

    This needs to be done so that a draft is ready at least a week before the end
    of November to allow for agreement and tweaking by end November.
    The
    <br>
    </div>

    <div id="CollapseMenu0Block1">
    <div id="CollapseMenu0Block1Item"><a href="javascript:collapse.toggle(1)"><font color="#000088">ZHV 05/12/2000 15:24 </font><font color="#000000">(A sac:::</font></a><br> Change of priority. I will need it soon (next week preferably).
    </div>
    <div id="CollapseMenu0Block1Content">
    </div>

    <div id="CollapseMenu0Block2">
    <div id="CollapseMenu0Block2Item"><a href="javascript:collapse.toggle(2)"><font color="#000088">BJS 05/12/2000 16:23</font><font color="#000000"> (A sac:1:11122000:</font></a><br> who is doing this? <br>
    </div>
    <div id="CollapseMenu0Block2Content">
    </div>

    <div id="CollapseMenu0Block3">
    <div id="CollapseMenu0Block3Item"><a onClick="showhide(3,cross1)" href="javascript:collapse.toggle(3)"><img id="cross1" alt src="images/openfolder.gif" border="0" WIDTH="10" HEIGHT="10"><font color="#000088"> CLJ 05/12/2000 17:42</font><font color="#0000ff"> </font><font color="#000000">(A sac saw:1:11122000:</font></a><br> It was Stef, but when I spoke to him last week he was very busy.
    </div>
    <div id="CollapseMenu0Block3Content">
    We agreed that Alexis could help if Stef went thru some training/explanation
    with him.
    <br>
    </div>

    <div id="CollapseMenu0Block4">
    <div id="CollapseMenu0Block4Item"><a href="javascript:collapse.toggle(4)"><font color="#000088">SAW 07/12/2000 07:20</font><font color="#0000ff"> </font><font color="#000000">(A sac saw:1:11122000:</font></a> <br>Assigning to Alexis <br>
    </div>
    <div id="CollapseMenu0Block4Content">
    </div>

    <div id="CollapseMenu0Block5">
    <div id="CollapseMenu0Block5Item"><a href="javascript:collapse.toggle(5)"><font color="#000088">SAW 07/12/2000 07:22</font><font color="#0000ff"> </font><font color="#000000">(A afm:1:11122000:</font></a><br>Assigning to project 287 <br>
    </div>
    <div id="CollapseMenu0Block5Content">
    </div>

    <script language="JavaScript">
    document.write(collapse.divEnd)
    </script></div></div></div></div></div>

    </pre>

    </body>
    </html>
    the function that poses problem is writeCSS (a function to dynamically define the CSS for each menus you construct).

    the css it creates is like this :
    str "<STYLE TYPE="text/css">
    #CollapseMenu0 {position:absolute; left:0px; top:0px; width:1000px; height:0px; clip:rect(0px 1000px 0px 0px);}
    #CollapseMenu0Block0 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block0Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block0Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block1 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block1Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block1Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block2 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block2Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block2Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block3 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block3Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block3Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block4 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block4Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block4Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block5 {position:absolute; left:0px; top:0px; width:1000px;}
    #CollapseMenu0Block5Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
    #CollapseMenu0Block5Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
    #CollapseMenu0Block6 {position:absolute; left:0px; top:0px; width:1000px; height:0px; clip:rect(0px 1000px 0px 0px); background-color:#F3F0FF;}
    </STYLE>" String


    somehow, every browser is happy with this, but not NS6.

    is the problem obvious to anyone ?
    or can you give me links to comprehensive sites (I cannot insist too much on comprehensive .. :-) where some "good" cross browser coding practises are defined ?

    thanks in advance
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    1
    Rep Power
    0

    What about the js files u have linked in?


    Im guessing you arte using layers in the js files that have "layers" in their names. Layers are no longer supported in NS6. There are several other pop-up menu scripts that are supported in NS6.

    Good luck!

    COPPERSKD
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    3
    Rep Power
    0
    Yes, this is definitely completely "layer-based" in my Javascript ...
    how come it is no longer supported in Nutscrape 6 although it was in NS4.xx ? I find it crazy (but I am not an expert)

    where can I find informations on the pop up script facility in NS6 you told me about ?
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    2
    Rep Power
    0
    N6 compatability actually isn't that hard, in that it's quite similar to IE.

    N6 supports iframes (but give them an id as well as a name), and where you would use "document.all" use document.getElementById()

    simple!
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    3
    Rep Power
    0
    well, actually, I guess it is not that simple, because I am already aware of the 2 differences you mentionned, and my code is detecting browsers (with objects, not browsers names) and already accessing objects by GetElementbyID()

    but it seems that NS6 doesn't allow you to change properties of layers (or at least, positions of layers) and this is vital for implementing a tree like navigation menu.

    that was what I was looking for in my last reply ...

    anyway, this imcompatibility/lack of clear standards
    with DHTML has bored me to death, I will rather go onto something "really" cross browser, such as Java applets.

    thanks for your help all.

IMN logo majestic logo threadwatch logo seochat tools logo