SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    correct way to position in netscape 4.x and 6.x?

    here's some code i have that creates a tree-branch kind of heirarchy for sublinks. currently, i can get it to work in IE, but it doesn't quite work yet with the netscapes. the problem lies in the moving around of the layers.

    any dhtml people out there willing to lend a hand?



    <!-- saved from url=(0022)http://internet.e-mail -->
    <!-- saved from url=(0022)http://internet.e-mail -->
    <html>
    <head>
    <title>Grant Test</title>
    <style>
    A {
    color:white;
    font-familty:"verdana, helvetica, geneva, sans-serif";
    }
    </style>
    <script language="JavaScript">
    <!--
    browser = navigator.appName;
    browserNum = parseInt(navigator.appVersion);

    if ((browser =="Netscape") && (browserNum < 5)) {
    //Netscape 4.x
    layerRef = "document.layers['";
    endLayerRef = "']";
    styleRef = "";
    }

    else if ((browser =="Netscape") && (browserNum >= 5)) {
    //Netscape 6
    layerRef = "document.getElementById['";
    styleRef = ".style";
    endLayerRef = "']";

    }
    else {
    //IE
    layerRef = "document.all['";
    styleRef = ".style";
    endLayerRef = "']";
    }
    //layer one

    allLayersSubsArray = new Array("teamsSub", "newsSub", "coachesSub", "aboutusSub", "rinksSub", "hockeyinfoSub", "supportersSub");
    teamsLayerArray = new Array("Midget", "Bantam", "PeeWee", "Mite");

    oldLayer ='none';

    var allLayersArray = new Array()
    allLayersArray[0] = 'teams';
    allLayersArray[1] = 'news';
    allLayersArray[2] = 'coaches';
    allLayersArray[3] = 'aboutus';
    allLayersArray[4] = 'rinks';
    allLayersArray[5] = 'hockeyinfo';
    allLayersArray[6] = 'supporters';

    var allLayersPositionsArray = new Array()
    allLayersPositionsArray[0] = 0;
    allLayersPositionsArray[1] = 20;
    allLayersPositionsArray[2] = 40;
    allLayersPositionsArray[3] = 60;
    allLayersPositionsArray[4] = 80;
    allLayersPositionsArray[5] = 100;
    allLayersPositionsArray[6] = 120;

    function ShowLayer(layerName, subLayerExists, mainLayerName) {

    //alert (layerRef + layerName + endLayerRef + styleRef);
    currentLayer = eval(layerRef + layerName + endLayerRef + styleRef);
    currentLayer.ypos = parseInt(currentLayer.top);
    currentLayer.heightofLayer = parseInt(currentLayer.height);
    currentLayer.bottomOfLayerPosition = currentLayer.heightofLayer + currentLayer.ypos;

    obj_in_array = mainLayerName;

    if (oldLayer != layerName) {


    for (a=0,b=allLayersArray.length;a<=b;a++) {
    if (allLayersArray[a] == obj_in_array) {
    LayerPosition = a;

    }
    }

    for (i=0, j=allLayersArray.length; i < j; i++) {


    if (layerName != allLayersArray[i]) {

    for (current=0; current<allLayersSubsArray[i].length; current++) {
    if ((browser =="Netscape") && (browserNum < 5)) {
    eval(layerRef + allLayersSubsArray[i] + endLayerRef + styleRef+".visibility='hide'");

    }

    else if ((browser =="Netscape") && (browserNum >= 5)) {
    eval(layerRef + allLayersSubsArray[i] + endLayerRef + styleRef+".visibility='hide'");
    }
    else {
    eval(layerRef + allLayersSubsArray[i] + endLayerRef + styleRef+".visibility='hidden'");
    }
    }

    }

    allLayersMove = eval(layerRef + allLayersArray[i] + endLayerRef + styleRef);
    allLayersMove.top = allLayersPositionsArray[i];

    if (i > LayerPosition) {

    if ((browser =="Netscape") && (browserNum < 5)) {
    //Netscape 4.x HERE'S THE FIRST POSITIONING PROBLEM
    allLayersMove.ypos = parseInt(allLayersMove.top);
    topPosition = parseInt(allLayersMove.top);
    newPosition = parseInt(allLayersMove.ypos + currentLayer.heightofLayer);
    topPosition = newPosition;

    }

    else if ((browser =="Netscape") && (browserNum >= 5)) {
    //Netscape 6.x HERE'S THE SECOND POSITIONING PROBLEM
    allLayersMove.top = parseInt(allLayersMove.ypos + currentLayer.heightofLayer);
    //alert (allLayersMove.top);
    }
    else {
    //IE
    allLayersMove.ypos = parseInt(allLayersMove.top);
    allLayersMove.top = (allLayersMove.ypos + currentLayer.heightofLayer);

    }

    }
    }
    if ((browser =="Netscape") && (browserNum < 5)) {

    currentLayer.visibility = 'show';
    }

    else if ((browser =="Netscape") && (browserNum >= 5)) {
    currentLayer.visibility = 'show';
    }
    else {
    currentLayer.visibility = 'visible';
    }

    oldLayer = layerName;
    }

    else if (oldLayer == layerName) {
    for(i=0,j=allLayersArray.length; i<j; i++) {
    AllLayers = eval(layerRef + allLayersArray[i] + endLayerRef + styleRef);
    AllSubLayers = eval(layerRef + allLayersSubsArray[i] + endLayerRef + styleRef);

    AllLayers.top = allLayersPositionsArray[i];
    //AllSubLayers.visibility='hidden';

    if ((browser =="Netscape") && (browserNum < 5)) {

    AllSubLayers.visibility = 'hide';
    }

    else if ((browser =="Netscape") && (browserNum >= 5)) {
    AllSubLayers.visibility = 'hide';
    }
    else {
    AllSubLayers.visibility = 'hidden';
    }
    }

    oldLayer = 'none';
    }

    }

    //-->
    </SCRIPT>
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">
    <DIV ID="teams" STYLE="position:absolute; left:51px; top:0px; width:150px; height:20px; visibility:visible;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="blue">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('teamsSub','true','teams');">Teams</A></td>
    </tr>
    </table>
    </div>
    <DIV ID="news" STYLE="position:absolute; left:51px; top:20px; width:150px; height:20px; visibility:visible; background-color:red;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="red">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('newsSub','true','news');">News</a></td>
    </tr>
    </table>
    </div>
    <DIV ID="coaches" STYLE="position:absolute; left:51px; top:40px; width:150px; height:20px; visibility:visible; background-color:red;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="blue">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('coachesSub','true','coaches');">Coaches</A></td>
    </tr>
    </table>
    </div>
    <DIV ID="aboutus" STYLE="position:absolute; left:51px; top:60px; width:150px; height:20px; visibility:visible; background-color:red;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="red">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('aboutusSub','true','aboutus');">About Us</a></td>
    </tr>
    </table>
    </div>
    <DIV ID="rinks" STYLE="position:absolute; left:51px; top:80px; width:150px; height:20px; visibility:visible; background-color:blue;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="blue">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('rinksSub','true','rinks');">Rinks</A></td>
    </tr>
    </table>
    </div>
    <DIV ID="hockeyinfo" STYLE="position:absolute; left:51px; top:100px; width:150px; height:20px; visibility:visible; background-color:red;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="red">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('hockeyinfoSub','true','hockeyinfo');">Hockey Info</a></td>
    </tr>
    </table>
    </div>
    <DIV ID="supporters" STYLE="position:absolute; left:51px; top:120px; width:150px; height:20px; visibility:visible; background-color:blue;">
    <table border="0" cellpadding="2" cellspacing="0" width="150" bgcolor="blue">
    <tr>
    <td><A HREF="javascript:void(null)" onClick ="ShowLayer('supportersSub','true','supporters');">Supporters</A></td>
    </tr>
    </table>
    </div>


    <DIV ID="teamsSub" STYLE="position:absolute; left:251px; top:20px; width:150px; height:20px; background-color:green; visibility:hidden;">1 teams sub</div>
    <DIV ID="newsSub" STYLE="position:absolute; left:251px; top:40px; width:150px; height:20px; background-color:green; visibility:hidden;">2 news sub</div>
    <DIV ID="coachesSub" STYLE="position:absolute; left:251px; top:60px; width:150px; height:20px; background-color:green; visibility:hidden;">3 coaches sub</div>
    <DIV ID="aboutusSub" STYLE="position:absolute; left:251px; top:80px; width:150px; height:20px; background-color:green; visibility:hidden;">4 about us sub</div>
    <DIV ID="rinksSub" STYLE="position:absolute; left:251px; top:100px; width:150px; height:20px; background-color:green; visibility:hidden;">5 Rinks Sub</div>
    <DIV ID="hockeyinfoSub" STYLE="position:absolute; left:251px; top:120px; width:150px; height:20px; background-color:green; visibility:hidden;">6 hockey info sub</div>
    <DIV ID="supportersSub" STYLE="position:absolute; left:251px; top:140px; width:150px; height:20px; background-color:green; visibility:hidden;">7 supporters sub</div>


    </BODY>
    </HTML>
    Last edited by Spidergrant; May 3, 2002 at 20:54.

  2. #2
    SitePoint Zealot jonsteele's Avatar
    Join Date
    Jan 2001
    Location
    Toronto
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are three ways which I use to set positions of layers...
    Code:
    if(document.layers){  //NN4
    
    document.layers['layername'].top  = y
    document.layers['layername'].left = x
    
    }else if(document.getElementById){  //NN6 & IE5+
    
    document.getElementById("layername").style.top  = y
    document.getElementById("layername").style.left = x
    
    else if(document.all){ //IE4
    
    document.all.layername.style.posTop  = y
    document.all.layername.style.posLeft = x
    
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •