Web Analytics Made Easy -
StatCounter Help with Menu - CodingForum

Announcement

Collapse
No announcement yet.

Help with Menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with Menu

    Hi,

    I quite frankly know nothing about Javascript. Thought it would be best to get that out of the way from the start.

    Basically I have a JS menu that is causing me headaches.

    The menu works fine in the root directory.

    www.centralhawksfc.com.au/home.html

    but when I go to a subdirectory the links for the two sub-menus are all stuffed up.

    http://www.centralhawksfc.com.au/pla...nthompson.html



    The 2009 results are coming up as http://www.centralhawksfc.com.au/pla...09seniors.html rather than www.centralhawksfc.com.au/2009seniors.html

    I have the menuscript.js file saved in both the root directory and players directory. I have tried having the menu in just the root directory, but it doesn't work in the players subdirectory if I do that.

    The code (which was created by a website, not me), is listed below.

    I am assuming it is just a simple fix, but as I said I have no idea about any of this.

    Sorry if I have made the explanation more confusing than it needs to be.

    Any help would be immensely appreciated.

    Todd




    /*** SET BUTTON'S FOLDER HERE ***/
    var buttonFolder = "buttons/";

    /*** SET BUTTONS' FILENAMES HERE ***/
    upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png","button5up.png","button6up.png ","button7up.png","button8up.png","button9up.png","button10up.png","button11up.png","button12up.png" ,"button13up.png","button14up.png");

    overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png","button5over.png","but ton6over.png","button7over.png","button8over.png","button9over.png","button10over.png","button11over .png","button12over.png","button13over.png","button14over.png");

    // SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
    subInfo = new Array();
    subInfo[1] = new Array();
    subInfo[2] = new Array();
    subInfo[3] = new Array();
    subInfo[4] = new Array();
    subInfo[5] = new Array();
    subInfo[6] = new Array();
    subInfo[7] = new Array();
    subInfo[8] = new Array();
    subInfo[9] = new Array();
    subInfo[10] = new Array();
    subInfo[11] = new Array();
    subInfo[12] = new Array();
    subInfo[13] = new Array();
    subInfo[14] = new Array();



    //*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//

    subInfo[2][1] = new Array("Seniors","2009seniors.html","");
    subInfo[2][2] = new Array("Reserves","2009reserves.html","");
    subInfo[2][3] = new Array("Underage","2009underage.html","");



    subInfo[4][1] = new Array("Seniors","pastseniors.html","");
    subInfo[4][2] = new Array("Reserves","pastreserves.html","");
    subInfo[4][3] = new Array("Underage","pastunderage.html","");













    //*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
    var xSubOffset = 131;
    var ySubOffset = 3;




    //*** NO MORE SETTINGS BEYOND THIS POINT ***//
    var overSub = false;
    var delay = 1000;
    totalButtons = upSources.length;

    // GENERATE SUB MENUS
    for ( x=0; x<totalButtons; x++) {
    // SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
    if ( subInfo[x+1].length < 1 ) {
    document.write('<div id="submenu' + (x+1) + '">');
    // SET DIV FOR BUTTONS WITH SUBMENU
    } else {
    document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
    document.write('onMouseOver="overSub=true;');
    document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
    document.write('onMouseOut="overSub=false;');
    document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
    document.write('setOutImg(\'' + (x+1) + '\',\'\');">');



    document.write('<ul>');
    for ( k=0; k<subInfo[x+1].length-1; k++ ) {
    document.write('<li>');
    document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
    document.write('target="' + subInfo[x+1][k+1][2] + '">');
    document.write( subInfo[x+1][k+1][0] + '</a>');
    document.write('</li>');
    }
    document.write('</ul>');
    }
    document.write('</div>');
    }






    //*** MAIN BUTTONS FUNCTIONS ***//
    // PRELOAD MAIN MENU BUTTON IMAGES
    function preload() {
    for ( x=0; x<totalButtons; x++ ) {
    buttonUp = new Image();
    buttonUp.src = buttonFolder + upSources[x];
    buttonOver = new Image();
    buttonOver.src = buttonFolder + overSources[x];
    }
    }

    // SET MOUSEOVER BUTTON
    function setOverImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
    }

    // SET MOUSEOUT BUTTON
    function setOutImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
    }




    //*** SUB MENU FUNCTIONS ***//
    // GET ELEMENT ID MULTI BROWSER
    function getElement(id) {
    return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null;
    }

    // GET X COORDINATE
    function getRealLeft(id) {
    var el = getElement(id);
    if (el) {
    xPos = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null) {
    xPos += tempEl.offsetLeft;
    tempEl = tempEl.offsetParent;
    }
    return xPos;
    }
    }

    // GET Y COORDINATE
    function getRealTop(id) {
    var el = getElement(id);
    if (el) {
    yPos = el.offsetTop;
    tempEl = el.offsetParent;
    while (tempEl != null) {
    yPos += tempEl.offsetTop;
    tempEl = tempEl.offsetParent;
    }
    return yPos;
    }
    }

    // MOVE OBJECT TO COORDINATE
    function moveObjectTo(objectID,x,y) {
    var el = getElement(objectID);
    el.style.left = x;
    el.style.top = y;
    }

    // MOVE SUBMENU TO CORRESPONDING BUTTON
    function showSubMenu(subID, buttonID) {
    hideAllSubMenus();
    butX = getRealLeft(buttonID);
    butY = getRealTop(buttonID);
    moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
    }

    // HIDE ALL SUB MENUS
    function hideAllSubMenus() {
    for ( x=0; x<totalButtons; x++) {
    moveObjectTo("submenu" + (x+1) + "",-500, -500 );
    }
    }

    // HIDE ONE SUB MENU
    function hideSubMenu(subID) {
    if ( overSub == false ) {
    moveObjectTo(subID,-500, -500);
    }
    }




    //preload()
    Last edited by ozguuy; Apr 2, 2009, 12:12 AM. Reason: Help with Menu in Sub-Directory

  • #2
    Please read the forum posting guidelines about wrapping your code in [code] tags (that is, use the # symbol on the toolbar).

    "...but when I go to a subdirectory the links for the two sub-menus are all stuffed up." Please be more specific about what the problem is.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Hi ozguuy,
      Don't rely completely on javascript to make your drop down, as it'll cause some accessibility issues for those who have no javascript. Also, search engines doesn't crall javascript based links.

      I'd recommend a CSS based one, take a look at http://htmldog.com/articles/suckerfish/dropdowns/
      Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

      Comment


      • #4
        I am sorry I didn't read the posting rules.

        I don't understand javascript or css. I can't write the code, so I created the menu from a simple website.

        My issue is when I go to the page http://www.centralhawksfc.com.au/pla...nthompson.html

        and attempt to go to 2009 results and select for example seniors, the link shows up as http://www.centralhawksfc.com.au/pla...09seniors.html when it is meant to be www.centralhawksfc.com.au/2009seniors.html

        It is adding the /players to the link and I don't know how to get rid of it.

        Comment

        Working...
        X