Results 1 to 9 of 9

Thread: Any link drop down menu - make life easy

  1. #1
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Any link drop down menu - make life easy

    I have over 300 pages on my site so everytime i want to change a link i have to go through them all. Is there any way of putting the javascript on my server and then running it on all of the pages like a style sheet or is it a stle sheet?. Is this possable and if so how. You can view the site at http://unsignedmuzik.com

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    You can certainly put the script in an external .js file, and the stylesheet, in a .css file. Then, reference these two files on all pages of your site. To take it a step further though, I recommend using SSI (server side includes) to embed the menu on your pages: http://www.javascriptkit.com/howto/externalhtml3.shtml

  3. #3
    Join Date
    Sep 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin
    You can certainly put the script in an external .js file, and the stylesheet, in a .css file. Then, reference these two files on all pages of your site.
    I've just spent the last hour or so trying to get this script to work with external files. The .css file imports ok, but the whilst the menus work fine if the javascript is directly in the HTML, it doesn't if I link to an external .js file



    The relevant HTML:

    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <script type="text/javascript" src="topmenu.js"></script>
    </head>

    The contents of topmenu.js are everything between <script> and </script> from the original code.

    Any suggestions on what I'm doing wrong, please?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Not sure what script you are using so, cannot tell what you've put in your topmenu.js file. Make sure you also removed:

    <!--

    //-->

    (if there) from the beginning and end of the script. Make sure topmenu.js is in the same directory as the page that uses it and if the script belongs in the body, put the link to it there, not in the head.

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
    PLEASE: Include the URL to your problematic webpage that you want help with.
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Hmmm do you have a URL to the problem page? Also as jscheuer1 mentioned, in the future, please make sure you're familiar with the proper format for posting a question, namely, by posting the URL to the page on DD where you got the script.

  6. #6
    Join Date
    Sep 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    Not sure what script you are using so, cannot tell what you've put in your topmenu.js file. Make sure you also removed:
    Apologies - this script: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    and the content of topmenu.js (copied directly from the above):


    /***********************************************
    * 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://www.javascriptkit.com">JavaScript Kit</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='165px' //default menu width
    var menubgcolor='lightyellow' //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 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


    As I mentioned before, it works fine when in the HTML between the head tags, but not as an external .js file.

    I'll try and get a copy of the page up, but it doesn't seem to be my week - my ftp keeps timing out. I'll try again in the morning, see if the host has fixed the issue.

  7. #7
    Join Date
    Sep 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Apologies for the double post, but I've got the troublesome pages up for you to look at.

    This is the DD Script I'm using: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    First, with the menu working (with the script in the head tags)

    Working script

    Then, the exact same page, the only difference being that the script for the menus is external (in topmenu.js) and referenced using the line:

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

    Non-working script

    Thanks again for your help with this.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    In topmenu.js, on the very last line you have:
    Code:
    document.onclick=hidemenu>
    The part in red doesn't belong there, remove it and see what happens.
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    In topmenu.js, on the very last line you have:
    Code:
    document.onclick=hidemenu>
    The part in red doesn't belong there, remove it and see what happens.
    Fantastic - thank you so much! I knew it would be something simple like that, that I was overlooking

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
  •