Results 1 to 7 of 7

Thread: AnyLink Drop Down Menu

  1. #1
    Join Date
    Jul 2005
    Posts
    222
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Angry AnyLink Drop Down Menu


    Script --> http://www.dynamicdrive.com/dynamici...pmenuindex.htm
    Does a website have to be online to enable this code to work? I am currently working on my site offline and preview it in IE6 and AOL 7.0. When I click the link that I want the drop down menu to appear, it just goes to the
    (a href = "#") link, and does not display the drop down box. I do not understand why it will not work! I can get all of the other codes on this site to work...
    Last edited by Johnnymushio; 07-20-2005 at 11:51 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No, and there is no href="#" or anything that would link to '#' in the demo/installation of this script so, I'd say you changed something, not certain what.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Posts
    222
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    In the demo, it linked to "default.htm". When I clicked the link to make a drop menu appear, instead of a menu appearing, it went to the site "default.htm". I changed "default.htm" to "#" so it would stay on the same page, either way, it did not work.

    John (Thats my name too.)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Does the demo here on Dynamic Drive work for you? If so, we need to see your code, if not, turn on javascript in your browser. Also, when viewing loacally are you getting a message bar warning?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2005
    Posts
    222
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Yeah, the demo on this site works for me. All of my other JavaScrips on my site work, except the AnyLink Drop Down Menu.

    Here is every bit of code in my head section. Below this code is the link I set up. Maybe some codes are interfering with eachother?

    <head>
    <title>Japan Town - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="keywords" content="Japan, Japanese, Nihongo, Chat, Pen Pal's, Study, Learn, English, Johnnymushio, Japan Town, Benkyou, Eigo, Web, Message Board, Words & Phrases, Emoticons, Forum, America, Slang, Information">
    <meta name="description" content="Your one stop source for all of your Japan needs since 2005.">
    <STYLE TYPE="text/css">
    <!--
    A:link{text-decoration:none}
    A:visited{text-decoration:none}
    --></STYLE>
    <style type="text/css">
    <!--
    BODY{
    scrollbar-face-color:#BB0000;
    scrollbar-arrow-color:white;
    scrollbar-track-color:'';
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
    }
    -->
    </style>
    <script type="text/javascript">

    /***********************************************
    * Highlight Table Cells Script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    //Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
    var highlightbehavior="TD"

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

    function changeto(e,highlightcolor){
    source=ie? event.srcElement : e.target
    if (source.tagName=="TABLE")
    return
    while(source.tagName!=highlightbehavior && source.tagName!="HTML")
    source=ns6? source.parentNode : source.parentElement
    if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
    source.style.backgroundColor=highlightcolor
    }

    function contains_ns6(master, slave) { //check if slave is contained by master
    while (slave.parentNode)
    if ((slave = slave.parentNode) == master)
    return true;
    return false;
    }

    function changeback(e,originalcolor){
    if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
    return
    else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
    return
    if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
    source.style.backgroundColor=originalcolor
    }

    </script>

    <style type="text/css">

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

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    }

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

    </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]='Home'
    menu1[1]='<a href="Japan Town - News.htm">News</a>'
    menu1[2]='<a href="Japan Town - Poll.htm">Poll</a>'
    menu1[3]='<a href="Japan Town - Updates">Updates</a>'

    var menuwidth='165px' //default menu width
    var menubgcolor='#BB0000' //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=-500
    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 windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    }
    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>

    Here is the link I set up.
    <td valign="middle" bgcolor="#BB0000"><div align="center"><strong><a href="Index.htm#" onClick="return dropdownmenu(this, event, menu1, '')" onMouseout="delayhidemenu()"><font color="#FFFFFF">Main</font></a></strong></div></td>

    John

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I didn't realize you were running other scripts on the page! Here's the prize for that:

    Note: Questions regarding multiple script usage are not usually replied to due to their time consuming nature. See this thread for more information, and this tutorial for one possible solution.

    Aside from the tutorial above, which usually is the solution when the problem is two different scripts, you may need to consult:

    http://www.howtocreate.co.uk/tutoria...allshow#refcon

    Which explains how two scripts on the same page may not use the same set of variable names, id names, etc. This is especially important if the problem is two copies of the same script on a page but, can come into play with two different scripts when the first step won't fix it.

    One other approach that works in both situations, if adaptable to one (or more) of the scripts, is to put one script in a borderless iframe. It will look like it is on the same page but, since it really is on a separate page, conflicts are no longer an issue.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2005
    Posts
    222
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Well you dont have to answer this if you don't want to. The tutorial says to put the onload stuff for all the scripts into the body tag, but the drop down menu has no "body onload=" or "window.onload=". So, I can't have this script on my site with other scripts?

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
  •