Results 1 to 3 of 3

Thread: Drop down menu question

  1. #1
    Join Date
    Mar 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop down menu question

    1) Script Title: AnyLink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    3) Describe problem:
    I have a website that contains Ajax tabs which i was hoping to turn into a dropdown menus...everything went well as far as the dropdown menu but it wont load into the ajax page...can it be done. Ive been messing around with it but heres the Script. I added the stuff in blue to experiment, but nothing helped. any help would be great thx ~Equalie~

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

    <script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

    /***********************************************
    * Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>
    <style type="text/css">

    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }

    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }

    </style>

    <script type="text/javascript">

    /***********************************************
    * AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://psychospub.andrevas.net/server/buyadmin.html" rel="countrycontainer"><img src="images/Admin.png"/></a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://cnn.com">CNN</a>'
    menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

    var menuwidth='80px' //default menu width
    var menubgcolor='#414141' //menu bgcolor
    var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?

    /////No further editting needed

    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }


    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top="-500px"
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }

    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }


    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)

    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }

    return clickreturnvalue()
    }

    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }

    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }

    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }

    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }

    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu

    </script>
    </head>

    <body background="images/bg.gif">
    <table align="center" width="780" border="0" height="210" cellspacing="0" cellpadding="0">
    <tr>
    <td height="24" colspan="9">&nbsp;</td>
    </tr>
    <tr>
    <td width="16" height="182" rowspan="3">&nbsp;</td>
    <td height="152" width="748" colspan="7">&nbsp;</td>
    <td width="16" height="182" rowspan="3">&nbsp;</td>
    </tr>
    <tr>
    <ul id="countrytabs">
    <td width="80" height="25"><a href="default.htm" rel="countrydivcontainer" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '80px')" onMouseout="delayhidemenu()"><img src="images/Admin.png" border="0"/ width="80"></a></td>

    <td width="76" height="25">&nbsp;</td>
    <td width="99" height="25">&nbsp;</td>
    </ul>
    </tr>
    </table>
    <table width="780" height="" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td background="images/index_15L.PNG" width="22"></td>
    <td width="736"><div style="background:#424240" id="countrydivcontainer"><img src="images/nil.png" width="736" height="1"/></div></td>
    <td background="images/index_15R.PNG" width="22"></td>
    </tr>
    </table>
    <script type="text/javascript">

    var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()

    </script>
    <table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/index_14b2.PNG" width="780" height="22" /></td>
    </tr>
    </table>


    </body>
    </html>

  2. #2
    Join Date
    Aug 2004
    Posts
    9,889
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    The code above only transforms the anchor link of the drop down menu to act as a "tab", not the links within each drop down menu. In order to do that, try using Anylink CSS menu instead. Put the entire HTML for the drop down menu inside the designated Ajax Tabs DIV area so all the links are parsed for special meaning:

    Code:
    <div id="countrytabs">
    
    <!--1st anchor link and menu -->
    
    <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a>   
                                                        
    <div id="anylinkmenu1" class="anylinkcss">
    
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="mypage.htm" rel="countrydivcontainer">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    
    </div>
    
    <!--2nd anchor link and menu -->
    
     <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a>   
                                                        
    <div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">
    
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://www.google.com">Google</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    
    </div>
    
    </div>
    Where a link within the drop down menu should act as a tab, be sure to give the link a rel attribute.

  3. #3
    Join Date
    Mar 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hey thanks for the reply ill try that

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
  •