PDA

View Full Version : easy Apple Silver accordion menu updates



msjynxie
11-10-2010, 05:31 PM
1) Script Title: Apple Silver accordion menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-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?

jscheuer1
11-10-2010, 05:53 PM
You could put this part or your equivalent (excerpted from the Full HTML Source section on the demo page):


<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 (http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm)

msjynxie
11-11-2010, 04:48 PM
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...

jscheuer1
11-11-2010, 08:58 PM
With that one, since it's already a javascript, just put its code (without the opening and closing script tags):


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:


<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:


<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:


<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:
<script>
<!--and
//-->
</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:


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 (http://www.dynamicdrive.com/notice.htm) for more info on this, especially item 4 from the terms):


<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