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

    Join Date
    Feb 2001
    Posts
    130
    Rep Power
    14

    Help with DHTML scripting -> debugging


    Hi all, I'm working on a new website where they requested a DHTML menu. I haven't done much with Javascript, or DHTML, but I managed to get a reasonably good script, but it doesn't work 100% properly.

    Here's the website: www.statikonline.com/newdesign

    and here is the code
    Code:
    //Define all variables and set the default delay to 5ms
    var layername, hop=5, delay=150;
    var menunum = 3;
    var menu1Rest = 174;
    var menu1Goal = 240;
    var menu2Rest = 218;
    var menu2Goal = 372;
    var menu3Rest = 240;
    var menu3Goal = 284;
    
    //Check to see if the browser is DHTML compliant
    function checkDHTML() {
        if ((parseInt(navigator.appVersion)>=4) &&
            ((navigator.appName!="Netscape" &&
            navigator.appVersion.indexOf("X11") == -1) ||
            (navigator.appName!="Microsoft Internet Explorer" &&
            navigator.appVersion.indexOf("Macintosh") == -1)))
        {
            return 1;
        } else {
            document.location="nodhtml.htm";
            return 0;
        }
    }
    
    //Construct a valid reference to a layer
    //in either Netscape or IE
    function makeName(layerID) {
        if (navigator.appName=="Netscape") {
            refname = eval("document." + layerID)
        } else {
            refname = eval("document.all." + layerID + ".style")
        }
        return refname;
    }
    
    //Construct a valid reference to the select box layer
    //for the selected layer in either Netscape or IE
    function makeSelectName(layerID) {
        if (navigator.appName=="Netscape") {
            refname = eval("document." + layerID + "s")
        } else {
            refname = eval("document.all." + layerID + "s.style")
        }
        return refname;
    }
    
    
    //Slide over xhop,yhop pixels every delay milliseconds
    //until the layer reaches xgoal and ygoal
    function slide(layerID) {
        if (layerID) {
            layername = makeName("menu" + layerID);
            selectname = makeName("select" + layerID);
            layerRest = eval("menu" + layerID + "Rest");
            layerGoal = eval("menu" + layerID + "Goal");
            otherstart = parseInt(layerID) + 1;
        }
        layerCurrent = parseInt(layername.top);
        if (typeof layerDirection == 'undefined') {
            layerDirection = 0;
        }
    
        //Is the layer at home position and not moving?
        if (layerCurrent == layerRest && layerDirection == 0) {
            //Return all the layers to home
            for (alllayers = 1; alllayers <= menunum; alllayers++) {
                xlayername = makeName("menu" + alllayers);
                xselectname = makeName("select" + alllayers);
                xlayerRest = eval("menu" + alllayers + "Rest");
                xselectRest = xlayerRest - 1;
                if (xlayername != layername) {
                    xlayername.top = xlayerRest;
                    xselectname.top = xselectRest;
                }
            }
            //Yes, start it moving down
            layerCurrent = layerCurrent + hop;
            layerDirection = 1;
            layername.top = layerCurrent;
            selectname.top = layerCurrent - 1;
            for (otherlayer = otherstart; otherlayer <= menunum; otherlayer++) {
                 xlayername = makeName("menu" + otherlayer);
                 xselectname = makeName("select" + otherlayer);
                 xlayername.top = parseInt(xlayername.top) + hop;
                 xselectname.top = parseInt(xselectname.top) + hop;
            }
            window.setTimeout("slide()", delay);
        } else {
            //No, has the layer been moving and arrived home?
            if (layerCurrent <= layerRest && layerDirection == 2) {
                //Yes, stop moving
                layername.top = layerRest;
                selectname.top = layerRest - 1;
                layerDirection = 0;
            } else {
                //No, is the layer at the goal position and not moving?
                if (layerCurrent == layerGoal && layerDirection == 0) {
                    //Yes, start it moving up
                    layerCurrent = layerCurrent - hop;
                    layerDirection = 2;
                    layername.top = layerCurrent;
                    selectname.top = layerCurrent - 1;
                    for (otherlayer = otherstart; otherlayer <= menunum; otherlayer++) {
                         xlayername = makeName("menu" + otherlayer);
                         xselectname = makeName("select" + otherlayer);
                         xlayername.top = parseInt(xlayername.top) - hop;
                         xselectname.top = parseInt(xselectname.top) - hop;
                    }
                    window.setTimeout("slide()", delay);
                } else {
                    //No, has the layer been moving and at the goal position?
                    if (layerCurrent >= layerGoal && layerDirection == 1) {
                        //Yes, stop moving
                        layername.top = layerGoal;
                        selectname.top = layerGoal - 1;
                        layerDirection = 0;
                    } else {
                        //No, is the layer moving down
                        if (layerDirection == 1) {
                            //Yes, continue the process
                            if (layerCurrent + hop < layerGoal) {
                                hop = layerGoal - layerCurrent;
                            }
                            layerCurrent = layerCurrent + hop;
                            layername.top = layerCurrent;
                            selectname.top = layerCurrent - 1;
                            for (otherlayer = otherstart; otherlayer <= menunum; otherlayer++) {
                                xlayername = makeName("menu" + otherlayer);
                                xselectname = makeName("select" + otherlayer);
                                xlayername.top = parseInt(xlayername.top) + hop;
                                xselectname.top = parseInt(xselectname.top) + hop;
                            }
                            window.setTimeout("slide()", delay);
                        } else {
                        //No, then the layer is moving up, continue the process
                            if (layerCurrent - hop < layerRest) {
                                hop = layerCurrent - layerRest;
                            }
                            layerCurrent = layerCurrent - hop;
                            layername.top = layerCurrent;
                            selectname.top = layerCurrent - 1;
                            for (otherlayer = otherstart; otherlayer <= menunum; otherlayer++) {
                                xlayername = makeName("menu" + otherlayer);
                                xselectname = makeName("select" + otherlayer);
                                xlayername.top = parseInt(xlayername.top) - hop;
                                xselectname.top = parseInt(xselectname.top) - hop;
                            }
                            window.setTimeout("slide()", delay);
                        }
                    }
                }
            }
        }
    }
    Can anyone help me out here?

    Statik
  2. #2
  3. An Ominous Coward
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jan 2002
    Posts
    4,425
    Rep Power
    0
    Okay.. so, what is it supposed to do, and what is it doing that indicates that it's NOT doing what it's supposed to do? Or, put more simply, nice code, what's your question?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    130
    Rep Power
    14
    Click on the second dropdown menu 'Professional Development', now click on 'membership'. The code should retract professional development and then extend membership, but for some reason, Professional development gets extended again.

IMN logo majestic logo threadwatch logo seochat tools logo