Results 1 to 4 of 4

Thread: easy Apple Silver accordion menu updates

  1. #1
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default easy Apple Silver accordion menu updates

    1) Script Title: Apple Silver accordion menu

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

    3) Describe problem: I really love this menu - my problem is that its time consuming to add/change menu options. I was using the anylink drop down menu prior to this and would like to be able to change menu options in the same manner - an outside js source? Any ideas?

  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

    You could put this part or your equivalent (excerpted from the Full HTML Source section on the demo page):

    Code:
    <div class="applemenu">
    <div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>
    <div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	<img src="http://i27.tinypic.com/sy7295.gif" />
    	</div>
    <div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
    	<div class="submenu">
    	Some random content here<br />
    	</div>		
    </div>
    In a file by itself and use a server side include or even a use a synchronous request via the mis-titled (it's not really AJAX):

    Ajax Includes Script
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    msjynxie (11-11-2010)

  4. #3
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The SSI worked .. I'm self taught, been building sites since 96 - can't beleive I didn't know the magic of that ONE line Thanks so much!

    Can you please look at www.fisherriver.com and tell me if the same ssi would work for the popit menu .. linkset starting at line 82...

  5. #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

    With that one, since it's already a javascript, just put its code (without the opening and closing script tags):

    Code:
    var defaultMenuWidth="150px" 
    
    var linkset=new Array()
    
    
    linkset[0]='<a href="dcrate.htm">Chief David Crate</a>'
    linkset[0]+='<hr>' //Optional Separator
    linkset[0]+='<a href="vcrate.htm">Vince Crate</a>'
    linkset[0]+='<a href="ccochrane.htm">Carl Cochrane</a>'
    linkset[0]+='<a href="dmckay.htm">Dion McKay</a>'
    linkset[0]+='<a href="dthaddeus.htm">Darrell Thaddeus</a>'
    
    linkset[1]='<a href="profile.htm">Location</a>'
    linkset[1]+='<a href="pro3.htm">History</a>'
    linkset[1]+='<a href="pro2.htm">FRCN Now</a>'
    linkset[1]+='<a href="pro4.htm">Community Services</a>'
    
    
    linkset[2]='<a href="upcoming.htm">All Events</a>'
    linkset[2]+='<a href="calendar.htm">Community Calendar</a>'
    linkset[2]+='<a href="bcmscalendar.htm">B.C.M. Sportsplex</a>'
    linkset[2]+='<a href="terrierscalendar.htm">F.R. Terriers</a>'
    
    linkset[3]='<a href="nnadap.htm">NNADAP</a>'
    linkset[3]+='<a href="mh.htm">Mental Health</a>'
    linkset[3]+='<a href="compliance.htm">Compliance Officer</a>'
    linkset[3]+='<a href="ss.htm">Support Services</a>'
    linkset[3]+='<a href="yss.htm">Youth Support</a>'
    linkset[3]+='<a href="cw.htm">Community Wellness</a>'
    
    linkset[4]='<a href="2006.htm">2006</a>'
    linkset[4]+='<a href="2007.htm">2007</a>'
    linkset[4]+='<a href="2008.htm">2008</a>'
    linkset[4]+='<a href="2009.htm">2009</a>'
    
    var ie5=document.all && !window.opera
    var ns6=document.getElementById
    
    if (ie5||ns6)
    document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
    
    function iecompattest(){
    return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
    }
    
    function showmenu(e, which, optWidth){
    if (!document.all&&!document.getElementById)
    return
    clearhidemenu()
    menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
    menuobj.innerHTML=which
    menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
    menuobj.contentwidth=menuobj.offsetWidth
    menuobj.contentheight=menuobj.offsetHeight
    eventX=ie5? event.clientX : e.clientX
    eventY=ie5? event.clientY : e.clientY
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
    var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<menuobj.contentwidth)
    //move the horizontal position of the menu to the left by it's width
    menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
    else
    //position the horizontal position of the menu where the mouse was clicked
    menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
    //same concept with the vertical position
    if (bottomedge<menuobj.contentheight)
    menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
    else
    menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
    menuobj.style.visibility="visible"
    return false
    }
    
    function contains_ns6(a, b) {
    //Determines if 1 element in contained in another- by Brainjar.com
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function hidemenu(){
    if (window.menuobj)
    menuobj.style.visibility="hidden"
    }
    
    function dynamichide(e){
    if (ie5&&!menuobj.contains(e.toElement))
    hidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    hidemenu()
    }
    
    function delayhidemenu(){
    delayhide=setTimeout("hidemenu()",500)
    }
    
    function clearhidemenu(){
    if (window.delayhide)
    clearTimeout(delayhide)
    }
    
    if (ie5||ns6)
    document.onclick=hidemenu
    in a file. Place that file in the same folder as the page(s) that will be using it. Call it - say linkset.js and replace it and its opening and closing script tags on the page(s) with:

    Code:
    <script src="linkset.js" type="text/javascript"></script>
    General information including some details on making a script external:

    Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

    HTML Code:
    <script src="some.js" type="text/javascript"></script>
    Common problems arise when:

    1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

    HTML Code:
    <script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>
    2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
    Code:
    <script>
    <!--
    and
    Code:
    //-->
    </script>
    and any of their many variations from the beginning and end of the external file.

    3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

    4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

    Code:
    http://www.somedomain.com/images/button.gif
    
    http://www.somedomain.com/~mysitename/index.html
    5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

    A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

    One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex (see usage terms for more info on this, especially item 4 from the terms):

    HTML Code:
    <script src="some.js" type="text/javascript">
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

    There is also info here:

    http://www.javascriptkit.com/javatutors/external.shtml
    - John
    ________________________

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

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
  •