SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Chicago
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble With Drop-Down Menus

    I took the code from Jason Cranford Teague's excellent DHTML and CSS for the World Wide Web; Second Edition: Visual Quickstart Guide book to create drop-down menus for a site I am currently working on. The changes I made seem to have ruined them in some browsers.

    Specifically, the menus only work the way they're supposed to in Internet Explorer 6 for Windows and Opera 6 for Windows. Netscape 6.23 (both the Windows and Mac versions) displays the menus in the upper-left corner of the window instead of below their titles; Internet Explorer 5.15 for Mac and Opera 5 for Mac do not display the menus (but the menu titles themselves work as links); Netscape Communicator 4.79 (again, both Windows and Mac) display the last two menu items higher than the first one, do not display the menus, and make it difficult to click on the menu title links.

    Could someone look at my code and tell me what I'm doing wrong? For the time being, it is available at:

    http://homepage.mac.com/adamsilver/transco/

    EDIT: Corrected URL.
    Last edited by AdamXS; Jul 15, 2002 at 07:50.

  2. #2
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Chicago
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Surely someone here can help me.

  3. #3
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't want to go off prancing around saving js files and
    opening them up and the such like. ...
    can you please post the relevant scripts here?

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  4. #4
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Chicago
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here they are.

    findDOM.js (no changes from original script):

    var isDHTML = 0;
    var isLayers = 0;
    var isAll = 0;
    var isID = 0;

    if (document.getElementById) {isID = 1; isDHTML = 1;}
    else {
    browserVersion = parseInt(navigator.appVersion);
    if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
    else {
    if (document.all) {isAll = 1; isDHTML = 1;}
    }}

    function findDOM(objectID,withStyle) {
    var menuArea = "menuArea";
    if (withStyle == 1) {
    if (isID) { return (document.getElementById(objectID).style) ; }
    else {
    if (isAll) { return (document.all[objectID].style); }
    else {
    if (isLayers) { return (document.layers[menuArea].layers[objectID]); }
    };}
    }
    else {
    if (isID) { return (document.getElementById(objectID)) ; }
    else {
    if (isAll) { return (document.all[objectID]); }
    else {
    if (isLayers) { return (document.layers[menuArea].layers[objectID]); }
    };}
    }
    }






    menus.js (only change was making it an external script):

    // JavaScript Document

    var menuTop = 45;
    var menuLeft = 400;

    var domSMenu = null;
    var oldDomSMenu = null;
    var t = 0;
    var lDelay = 3;
    var lCount = 0;
    var pause = 100;

    function popMenu(menuNum){
    if (isDHTML) {
    ///// Sets the previous menu's visibility to hidden
    t = 2;
    if (oldDomSMenu) {
    oldDomSMenu.visibility = 'hidden';
    oldDomSMenu.zIndex = '0';
    t = 2;
    lCount = 0;
    }

    ///// Defines the DOMs of the menu objects
    var idMenu = 'menuHead';
    var domMenu = findDOM(idMenu,0);

    var idMenuOpt = 'menuHead' + menuNum;
    var domMenuOpt = findDOM(idMenuOpt,0);

    var idSMenu = 'menu' + menuNum;
    var domSMenu = findDOM(idSMenu,1);

    ///// Defines the positions of the sub-menus
    if (isID || isAll) {
    var menuLeft = (domMenu.offsetLeft) + (domMenuOpt.offsetLeft) + 5;
    var menuTop = (domMenu.offsetTop) + (domMenu.offsetHeight) + 5;
    }
    if (isLayers) {
    var menuLeft = document.layers[idMenu].layers[idMenuOpt].pageX - 5;
    var menuTop = domMenu.pageY + domMenu.clip.height - 5;
    }

    ///// Positions and shows the menu
    if (oldDomSMenu != domSMenu) {
    domSMenu.left = menuLeft;
    domSMenu.top = menuTop;
    domSMenu.visibility = 'visible';
    domSMenu.zIndex = '100';
    oldDomSMenu = domSMenu;
    }

    ///// Resets oldDom if it is the same as the current DOM
    else { oldDomSMenu = null; }
    }

    ////// Returns a 'null' value for non-DHTML Browsers
    else { return null; }
    }

    function delayHide() {
    ///// Checks to see if there is a menu showing and whether
    ///// the global variable 't' has been set to 0
    if ((oldDomSMenu) && (t == 0)) {

    ///// Hides the old menu, resets menu conditions,
    ///// and stops the function running
    oldDomSMenu.visibility = 'hidden';
    oldDomSMenu.zIndex = '0';
    oldDomSMenu = null;
    lCount = 0;
    return false;
    }

    ///// Interupts the function if another menu is opened
    if (t == 2) { lCount = 0; return false; }

    ///// Repeats the function adding 1 to lCount each time until
    ///// lCount is equal to lDelay and then sets 't' to 0 so that
    ///// the menu will hide when it runs again
    if (t == 1) {
    lCount = lCount + 1;
    if (lDelay <= lCount) { t = 0; }
    if (lDelay >= lCount) { setTimeout('delayHide(' + t + ')',pause); }
    }
    }

    You can see these scripts in action at http://homepage.mac.com/adamsilver/transco/.

  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's see what it's doing in here:

    ///// Positions and shows the menu
    if (oldDomSMenu != domSMenu) {
    alert('Running logic');
    alert('mLeft: '+menuLeft);
    domSMenu.left = menuLeft;
    alert('domSMenu Left: '+domSMenu.left);
    alert('mTop: '+menuTop);
    domSMenu.top = menuTop;
    alert('domSMenu Top: '+domSMenu.top);
    domSMenu.visibility = 'visible';
    domSMenu.zIndex = '100';
    oldDomSMenu = domSMenu;
    }


    Try that and see what it alerts.

    It should show if the variables have the right values and
    if so - if they're being applied.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  6. #6
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Chicago
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what it sent back to me:

    Internet Explorer 6 for Windows

    Products menu
    mLeft: 146
    domSMenu Left: 146px
    mTop: 43
    domSMenu Top: 43px

    Distributors menu
    mLeft: 216
    domSMenu Left: 216px
    mTop: 43
    domSMenu Top: 43px

    Feedback menu
    mLeft: 306
    domSMenu Left: 306px
    mTop: 43
    domSMenu Top: 43px


    Netscape 6.23 for Windows

    Products menu
    mLeft: 146
    domSMenu Left:
    mTop: 43
    domSmenu Top:

    Distributors menu
    mLeft: 216
    domSMenu Left:
    mTop: 43
    domSMenu Top:

    Feedback menu
    mLeft: 306
    domSMenu Left:
    mTop: 43
    domSMenu Top:


    So with this info, it appears that Netscape 6.23 is not getting domSMenu positions and by default places the menu in the upper-left corner of the window. How do I fix this?

    Opera 6.04 for Windows

    Products menu
    mLeft: 141
    domSMenu Left: 141
    mTop: 43
    domSMenuTop: 43

    Distributors menu
    mLeft: 211
    domSMenu Left: 211
    mTop: 43
    domSMenu Top: 43

    Feedback menu
    mLeft: 301
    domSMenu Left: 301
    mTop: 43
    domSMenu Top: 43


    Netscape Communicator 4.79 for Windows
    As mentioned before, the menus do not show up. However I do get this message in the Communicator Console after typing javascript: (without a space between the a and the s) in the location bar:

    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.
    JavaScript Error: file:///C|/Documents and Settings/Adam
    Silver/Desktop/transco/javascripts/findDOM.js, line 29:

    document.layers[menuArea] has no properties.

    Too many errors. No further JavaScript errors will be displayed for this page.


    I will have Mac browser data later. (My place of work does not have the money to buy a Mac for testing sites.)
    Last edited by AdamXS; Jul 22, 2002 at 10:48.

  7. #7
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right - that'd be because it's not getting the domSMenu object at all.

    I'll look at the script and come back to you on how to change
    the reference to it to make it work in a while.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •