Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: javascript menu

  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript menu

    I've made a webpage with a javascript menu. It writes itself on the page with a document.write function so maybe that's the reason for my problem:

    The submenus are invisible when the page loads but add themselves to the bottom of the page and the page becomes very long. The scrollbar indicates it. But when i mouseover all menuitems the long space disappears.
    Could somebody help me to investigate and solve this problem?
    I want to hide that space when the page loads.

    Please scroll to bottom of the page before using the menu.

    http://randomroutine.net/1/1.html
    http://randomroutine.net/1/1menu.js
    http://randomroutine.net/1/2menu.js
    http://randomroutine.net/1/menu.css
    http://randomroutine.net/1/menuie.css

    Thanks in advance

  • #2
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    AFAIK this problem is available only in IE.
    I know this whole script is not "nice" but I don't have time to clean it up better and it's only a test page.
    And the position:fixed part is really ugly too.. the submenus scroll with the page while using scrollwheel....
    Last edited by onion; 08-07-2006 at 11:00 AM.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    was playing with this which may be of interest

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    .topic {
     position:absolute;width:100px;height:20px;background-color:#FFFFCC;
    }
    
    .stopicoff {
     position:relative;width:100px;height:20px;background-color:#FFFFCC;
    }
    
    .stopicon {
     position:relative;width:100px;height:20px;background-color:#FFCC66;
    }
    
    .main {
     position:absolute;overflow:hidden;width:20px;height:20px;background-color:#FFFFCC;
    }
    
    </style>
    
    <script  type="text/javascript">
    
    function zxcMenu(zxcid){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];  //  establishes the event
     var zxcobj=zxcEventObj(zxcevt); // establish the event object
     var zxcp=zxcobj;                // find the menu parent element by looking up th dom tree for the ID
     while (zxcp.parentNode){
      if (zxcp.id==zxcid){ break; }   // the menu parent div has been found
      zxcp=zxcp.parentNode;
     }
     if (!window['zxc'+zxcp.id]){    // we need an array specific to the menu so base it on the id of the menu parent div
      window['zxc'+zxcp.id]=[null];  // make the array object, first field being null
      var zxcds=zxcp.getElementsByTagName('DIV'); // collect all divs
      for (var zxc0=1;zxc0<zxcds.length;zxc0++){
       if (zxcds[zxc0].style.display=='none'){   // if display:none it is a sub menu
        window['zxc'+zxcp.id].push([zxcds[zxc0-1],zxcds[zxc0]]);  // add it to the array, sub field 0 the <div> to control,sub field 1 the div to toggle
       }
      }
     }
     var zxcary=window['zxc'+zxcp.id]; // saves typing
     if (zxcevt.type=='mouseout'){  // if the event type is mouse out
      if (zxcWHCkEventObj(zxcevt,zxcid)){ zxcary[0][1].style.display='none'; } // check to see if the target is outside the menu, if so hide the last opened sub menu
      return;  // dont do any more
     }
     for (var zxc0=1;zxc0<zxcary.length;zxc0++){ // loop though the  array
      if (zxcary[zxc0][0]==zxcobj){              // finding a matck for the event object
       if (zxcary[0]){ if (zxcobj!=zxcary[0][0]){ zxcary[0][1].style.display='none'; } } // if field 0 and field 0[0] not the event object hide field0[1]
       zxcary[0]=zxcary[zxc0]; // enter the array field in field 0
       zxcary[zxc0][1].style.display=(zxcary[zxc0][1].style.display=='none')?'':'none'; // toggle the div associated with the event object
      }
     }
    }
    
    function zxcEventObj(zxce){  // the returns the event object
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function zxcWHCkEventObj(zxce,zxcid){  // this looks for an element with the passed id,
     var zxceobj;
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     zxceobj=(zxce.relatedTarget)?zxceobj=zxce.relatedTarget:zxceobj=zxce.toElement;
     while (zxceobj.parentNode){
      if (zxceobj.id==zxcid){ return false; }   // returns false if found
      zxceobj=zxceobj.parentNode;
     }
     return true;  // returns true if not found
    }
    
    function zxcInitMenu(zxcid,zxccls){
     var zxcds=document.getElementById(zxcid).getElementsByTagName('DIV');
     var zxccnt=0;
     for (var zxc0=0;zxc0<zxcds.length;zxc0++){
      if (zxcds[zxc0].className==zxccls){
       zxcds[zxc0].style.left=(zxcds[zxc0].offsetWidth*zxccnt++)+'px';
       zxcds[zxc0].style.top='0px';
       if (zxcds[zxc0+1]){
        zxcds[zxc0+1].style.left=zxcds[zxc0].style.left;
        zxcds[zxc0+1].style.top='20px';
       }
      }
     }
    }
    
    </script>
    
    </head>
    
    <body onload="zxcInitMenu('top','main')">
    <div id="top" style="position:absolute;left:0px;top:0px;width:120px;border:solid black 0px" onmouseover=zxcMenu('top'); onmouseout="zxcMenu('top');" >
    <div class="main" >A</div>
    <div class="main" >B</div>
    <div class="topic" style=left:20px;height:60px;display:none;" >
     <a href="http://www.vicsjavascripts.org.uk" ><div class="stopicoff" >Industrial</div></a>
     <a href="http://www.js-examples.com" ><div class="stopicoff" >Contemporary</div></a>
     <a href="http://www.codingforums.com" ><div class="stopicoff" >Post-Modern</div></a>
    </div>
    <div class="main" >C</div>
    <div class="topic" style=left:20px;height:60px;display:none;" >
     <div class="stopicoff" >How To 1</div>
     <div class="stopicoff" >How To 2</div>
     <div class="stopicoff" >How To 3</div>
    </div>
    <div class="main" >D</div>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your example but i'd rather use the old script because i wasted so much time with this old one. That's why i'm looking for a solution.


  •  

    Posting Permissions

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