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 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop down is not dropping down?

    Hello,

    I am trying to create a drop down menu on my stafflinks but the drop down is being display which I don't want and i want the audience to click on it and then it drops down.

    Here is the url http://www.abkdesign.com/whonline060120/

    How can i fix this? the drop down is where the Staff LInks is is with gray background for the drop down. (CTAP2, Groupwise, Performance Profile, Staff Bulletin, WHHS Staff Resource Page)

  • #2
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Codes

    This is my html code

    <div id="navcontainer">

    <ul id="navlist">
    <li><a href="javascript:;" onClick="window.open('staffinfo/st_today.htm','bull','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Daily Student Bulletin</a></li>
    <li><a href="javascript:;" onClick="window.open('http://westhillshs.revtrak.net/','asb','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">ASB Web Store</a></li>
    <li><a href="#">Attendance</a></li>
    <li><a href="javascript:;" onClick="window.open('school/sched/bell.html','bell','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Bell Schedule</a> </li>
    <li><a href="javascript:;" onClick="window.open('school/parking/parking.html','parking','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Driving/Parking Info</a></li>
    <li><a href="javascript:;" onclick="window.open('http://www.guhsd.net/05_06GUHSD_Cal.htm','guhsdcal','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">GUHSD District Calendar (05-06)</a> </li>
    <li><a href="javascript:;" onclick="window.open('school/contact/phonelist.html','contact','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')"> Staff Directory </a></li>
    <li><a href="fol/wascfol.html">Focus On Learning (WASC)</a> </li>

    <ul id="subnavlist">
    <ul>
    <li class="staffinfo"><a href="#">Staff Links</a>
    <li><a href="javascript:;" onClick="window.open('http://ctap2.iassessment.org/','ctap','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">CTAP2</a> </li>
    <li><a href="javascript:;" onClick="window.open('http://groupwise.guhsd.net/servlet/webacc','gw','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Groupwise</a> </li>
    <li><a href="javascript:;" onclick="window.open('http://csisdata.guhsd.net/assessment/login.php','profile','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Performance Profile</a></li>
    <li><a href="javascript:;" onClick="window.open('staffinfo/sta_today.htm','bull','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Staff Bulletin</a>
    <li><a href="staffinfo/index.html">WHHS Staff Resource Page</a></li>
    </ul>
    </li>
    </ul>

    <li><a href="clubs/index.html">Clubs</a> </li>
    <li><a href="javascript:;" onClick="window.open('http://ebackpack.guhsd.net','eb','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">eBackpack</a> </li>
    <li><a href="javascript:;" onClick="window.open('http://www.guhsd.net/students.html','sp','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">GUHSD Student Home Page</a></li>
    <li><a href="javascript:;" onClick="window.open('http://netmail.guhsd.net','nm','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Netmail</a> </li>
    <li><a href="javascript:;" onClick="window.open('http://www.guhsd.net/students/research.html','student','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Research</a></li>
    <li><a href="javascript:;" onclick="window.open('../guidance/scholarships/schlrshp.html','bull','left=100, top=50, width=650,height=500,toolbar=no, location=no, scrollbars=yes,status=yes,menubar=yes,resizable=yes')">Scholarships</a></li>
    </ul>


    </div>

    This is my javascript code:

    var expandFirstItemAutomatically = 0; // Expand first menu item automatically ?
    var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
    var expandMenuItemByUrl = false; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand


    var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET

    var dhtmlgoodies_slmenuObj;
    var divToScroll = false;
    var ulToScroll = false;
    var divCounter = 1;
    var otherDivsToScroll = new Array();
    var divToHide = false;
    var parentDivToHide = new Array();
    var ulToHide = false;
    var offsetOpera = 0;
    if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
    var slideMenuHeightOfCurrentBox = 0;
    var objectsToExpand = new Array();
    var initExpandIndex = 0;
    var alwaysExpanedItems = new Array();

    function popMenusToShow()
    {
    var obj = divToScroll;
    var endArray = new Array();
    while(obj && obj.tagName!='BODY'){
    if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
    var objFound = -1;
    for(var no=0;no<otherDivsToScroll.length;no++){
    if(otherDivsToScroll[no]==obj){
    objFound = no;
    }
    }
    if(objFound>=0){
    otherDivsToScroll.splice(objFound,1);
    }
    }
    obj = obj.parentNode;
    }
    }

    function showSubMenu(e,inputObj)
    {

    if(this && this.tagName)inputObj = this.parentNode;
    if(inputObj && inputObj.tagName=='LI'){
    divToScroll = inputObj.getElementsByTagName('DIV')[0];
    for(var no=0;no<otherDivsToScroll.length;no++){
    if(otherDivsToScroll[no]==divToScroll)return;
    }
    }
    hidingInProcess = false;
    if(otherDivsToScroll.length>0){
    if(divToScroll){
    if(otherDivsToScroll.length>0){
    popMenusToShow();
    }
    if(otherDivsToScroll.length>0){
    autoHideMenus();
    hidingInProcess = true;
    }
    }
    }
    if(divToScroll && !hidingInProcess){
    divToScroll.style.display='';
    otherDivsToScroll.length = 0;
    otherDivToScroll = divToScroll.parentNode;
    otherDivsToScroll.push(divToScroll);
    while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
    if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
    otherDivsToScroll.push(otherDivToScroll);
    }
    otherDivToScroll = otherDivToScroll.parentNode;
    }
    ulToScroll = divToScroll.getElementsByTagName('UL')[0];
    if(divToScroll.style.height.replace('px','')=='0')scrollDownSub();
    }


    }



    function autoHideMenus()
    {
    if(otherDivsToScroll.length>0){
    divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
    parentDivToHide.length=0;
    var obj = divToHide.parentNode.parentNode.parentNode;
    while(obj && obj.tagName=='DIV'){
    if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
    obj = obj.parentNode.parentNode.parentNode;
    }
    var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
    if(tmpHeight<0)tmpHeight=0;
    if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
    ulToHide = divToHide.getElementsByTagName('UL')[0];
    slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
    scrollUpMenu();
    }else{
    slideMenuHeightOfCurrentBox = 0;
    showSubMenu();
    }
    }


    function scrollUpMenu()
    {

    var height = divToHide.offsetHeight;
    height-=15;
    if(height<0)height=0;
    divToHide.style.height = height + 'px';

    for(var no=0;no<parentDivToHide.length;no++){
    parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
    }
    if(height>0){
    setTimeout('scrollUpMenu()',1); // Speed of the menu going down
    }else{
    divToHide.style.display='none';
    otherDivsToScroll.length = otherDivsToScroll.length-1;
    autoHideMenus();
    }
    }

    function scrollDownSub()
    {
    if(divToScroll){
    var height = divToScroll.offsetHeight/1;
    var offsetMove =Math.min(5,(ulToScroll.offsetHeight - height));
    height = height +offsetMove ;
    divToScroll.style.height = height + 'px';

    for(var no=1;no<otherDivsToScroll.length;no++){
    var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
    otherDivsToScroll[no].style.height = tmpHeight + 'px';
    }
    if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
    divToScroll = false;
    ulToScroll = false;
    if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
    initExpandIndex++;

    showSubMenu(false,objectsToExpand[initExpandIndex]);
    }
    }
    }
    }

    function initSubItems(inputObj,currentDepth)
    {
    divCounter++;
    var div = document.createElement('DIV'); // Creating new div
    div.style.overflow = 'hidden';
    div.style.position = 'relative';
    div.style.display='none';
    div.style.height = '0px';
    div.id = 'slideDiv' + divCounter;
    div.className = 'slideMenuDiv' + currentDepth;
    inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL>
    div.appendChild(inputObj); // Appending <UL> to the div
    var menuItem = inputObj.getElementsByTagName('LI')[0];
    while(menuItem){
    if(menuItem.tagName=='LI'){
    var aTag = menuItem.getElementsByTagName('A')[0];
    aTag.className='slMenuItem_depth'+currentDepth;
    var subUl = menuItem.getElementsByTagName('UL');
    if(subUl.length>0){
    initSubItems(subUl[0],currentDepth+1);
    }
    aTag.onclick = showSubMenu;
    }
    menuItem = menuItem.nextSibling;
    }
    }

    function initsubnavlistMenu()
    {
    dhtmlgoodies_slmenuObj = document.getElementById('subnavlist');
    dhtmlgoodies_slmenuObj.style.visibility='visible';
    var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
    var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
    mainItemCounter = 1;
    while(mainMenuItem){
    if(mainMenuItem.tagName=='LI'){
    var aTag = mainMenuItem.getElementsByTagName('A')[0];
    aTag.className='slMenuItem_depth1';
    var subUl = mainMenuItem.getElementsByTagName('UL');
    if(subUl.length>0){
    mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
    initSubItems(subUl[0],2);
    aTag.onclick = showSubMenu;
    mainItemCounter++;
    }
    }
    mainMenuItem = mainMenuItem.nextSibling;
    }

    if(location.search.indexOf('mainMenuItemToSlide')>=0){
    var items = location.search.split('&');
    for(var no=0;no<items.length;no++){
    if(items[no].indexOf('mainMenuItemToSlide')>=0){
    values = items[no].split('=');
    showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
    initMenuIdToExpand = false;
    }
    }
    }else if(expandFirstItemAutomatically>0){
    if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
    showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
    initMenuIdToExpand = false;
    }
    }

    if(expandMenuItemByUrl)
    {
    var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
    for(var no=0;no<aTags.length;no++){
    var hrefToCheckOn = aTags[no].href;
    if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
    initMenuIdToExpand = false;
    var obj = aTags[no].parentNode;
    while(obj && obj.id!='subnavlist'){
    if(obj.tagName=='LI'){
    var subUl = obj.getElementsByTagName('UL');
    if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    if(subUl.length>0){
    objectsToExpand.unshift(obj);
    }
    }
    obj = obj.parentNode;
    }
    showSubMenu(false,objectsToExpand[0]);
    break;
    }
    }
    }

    if(initMenuIdToExpand)
    {
    objectsToExpand = new Array();
    var obj = document.getElementById(initMenuIdToExpand)
    while(obj && obj.id!='subnavlist'){
    if(obj.tagName=='LI'){
    var subUl = obj.getElementsByTagName('UL');
    if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    if(subUl.length>0){
    objectsToExpand.unshift(obj);
    }
    }
    obj = obj.parentNode;
    }

    showSubMenu(false,objectsToExpand[0]);

    }



    }
    window.onload = initsubnavlistMenu;


    Please someone i really need help on this.

    Thanks


  •  

    Posting Permissions

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