PDA

View Full Version : AnyLink Drop Down Menu - frames problem



nrapt
08-12-2005, 06:03 PM
Aloha,
Having a problem with frames using AnyLink Drop Down Menu for navigation. I have several frames on the page, and the menu I'm referring to (Online Course: Lessons) has appx 22 options to choose from, which makes it quite long. It needs to come to the top of the screen and be viewed over the three frames where it is located. I tried a fix from someone else's post, but it only moved the menu up in regards to length. It showed the bottom of the list of options, rather than bringing it to the top of all windows.
The page can be viewed here: Alphabet Angel (http://alphabetangel.com/treeOfLife/tree/frameset.html)
Thank you in advance for your assistance
Here is the script (minus non-relevant code from page):



#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, Lessons
var menu1=new Array()
menu1[0]='<a href="../lessons.html" target="content">Lesson Sign-up</a>'
menu1[1]='<a href="lessons/aleph.html" target="content">Aleph (Aa)</a>'
menu1[2]='<a href="lessons/bet.html" target="content">Bet (Bb)</a>'
menu1[3]='<a href="lessons/gimel.html" target="content">Gimel (Cc)</a>'
menu1[4]='<a href="lessons/dalet.html" target="content">Dalet (Dd)</a>'
menu1[5]='<a href="lessons/hei.html" target="content">Hei (Ee)</a>'
menu1[6]='<a href="lessons/vav.html" target="content">Vav (Ff)</a>'
menu1[7]='<a href="lessons/zain.html" target="content">Zain (Gg)</a>'
menu1[8]='<a href="lessons/cheth.html" target="content">Cheth (Hh)</a>'
menu1[9]='<a href="lessons/tet.html" target="content">Tet (Jj)</a>'
menu1[10]='<a href="lessons/yod.html" target="content">Yod (Ii)</a>'
menu1[11]='<a href="lessons/kaf.html" target="content">Kaf (Kk, Uu)</a>'
menu1[12]='<a href="lessons/lamed.html" target="content">Lamed (Ll)</a>'
menu1[13]='<a href="lessons/mem.html" target="content">Mem (Mm, Ww)</a>'
menu1[14]='<a href="lessons/nun.html" target="content">Nun (Nn)</a>'
menu1[15]='<a href="lessons/samech.html" target="content">Samech (Xx)</a>'
menu1[16]='<a href="lessons/ayin.html" target="content">Ayin (Oo)</a>'
menu1[17]='<a href="lessons/pey.html" target="content">Pey (Pp, Vv)</a>'
menu1[18]='<a href="lessons/tzadi.html" target="content">Tzadi (Yy, Zz)</a>'
menu1[19]='<a href="qoph.html" target="content">Qoph (Qq)</a>'
menu1[20]='<a href="lessons/resh.html" target="content">Resh (Rr)</a>'
menu1[21]='<a href="lessons/shin.html" target="content">Shin (Ss)</a>'
menu1[22]='<a href="lessons/tav.html" target="content">Tav (Tt)</a>'

//Contents for menu 2, and so on, Teachings
var menu2=new Array()
menu2[0]='<a href="../spirit_alph.html" target="content">Spirituality of the Alphabet</a>'
menu2[1]='<a href="../handwriting.html" target="content">Power of Handwriting</a>'
menu2[2]='<a href="../grid.html" target="_blank">Alphabet Grid</a>'
menu2[3]='<a href="../news_article.html" target="content">Kauai Island News Article</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
}
}
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>
-----------
and in the document:
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()"


Mahalo,
Jennifer

nrapt
08-15-2005, 07:36 PM
I really need help with this script. I would gladly offer a donation to anyone who could help me with this issue.
:confused:
Thanks!

shachi
08-16-2005, 04:48 AM
Hi, can you give me the exact location where you placed that menu or where you are having problems with the menu?

nrapt
08-16-2005, 05:44 AM
The whole page can be viewed at
http://alphabetangel.com/treeOfLife/tree/frameset.html
The menu is in the top frame, which is
http://alphabetangel.com/treeOfLife/tree/top2.html.
I have used AnyLink Drop Down Menu twice, there is a 'click for' menu on the leaf that says "Teachings" and a mouseover menu where it says "Online Course: Lessons."
I am having trouble with the "Online Course:Lessons". The menu has 22 options, and due to the size of the frame, only five are showing. I need the menu to come to the top of the frameset.
Thank you SO much for your assistance.

shachi
08-17-2005, 04:33 PM
would you mind if I mess a little bit with your code?

shachi
08-17-2005, 04:47 PM
Hey wait a min. Are you sure it shows you five options? In my browser none is shown. Uh what a mess.

nrapt
08-17-2005, 08:56 PM
I'm assuming you're playing with it, cause it got scrambled up? I checked in FF and Netscape, and the 'click' menu (Teachings) was working, but not the 'mouse-over' menu for Lessons. I was going to switch the Lessons menu to the 'click' code, but if you're playing with something I will leave it alone. I can fiddle with everything else, I just need the menu to come to the top of the frameset. When I open the frame itself, the menu displays fine...but it is hidden when all frames are in view.
Thanks for your help.
Jennifer

shachi
08-18-2005, 03:25 AM
hey did you tried with blank code? I mean first use the original code (from the author) with frames then just replace your chunk of code with the original ones. It usually works with me. Just try it.

shachi
08-18-2005, 06:12 AM
Hey I know your solution but cannot publish it here :(

shachi
08-18-2005, 06:32 AM
hey sorry but I cannot paste the whole code. Let the code in the head part remain the same just replace the image codes in to this. I mean that change your code with this.



<TD ROWSPAN=8><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()", togglehttp://alphabetangel.com/treeOfLife/tree/images/('top_Gift_Certificates', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), 'top_Contact_Angeline', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), 'top_Home', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'),
'spacer', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), 'top_Alphabet_Journal_copy', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), 'top_Biography', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), 'top_Ageless_Wisdom',
new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif'), '', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lesso-27.gif')); return true;"
onMouseout="delayhidemenu(), togglehttp://alphabetangel.com/treeOfLife/tree/images/('top_Gift_Certificates', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Contact_Angeline', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Home', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'),
'spacer', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Alphabet_Journal_copy', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Biography', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Ageless_Wisdom',
new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), '', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif')); return true;"
ONMOUSEDOWN="togglehttp://alphabetangel.com/treeOfLife/tree/images/('top_Gift_Certificates', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Contact_Angeline', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Home', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'),
'spacer', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Alphabet_Journal_copy', new
Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Biography', new
Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), 'top_Ageless_Wisdom',
new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'), '', new Array('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif')); return true;"
ONMOUSEUP="selected='top_Online_Course__Lessons_copy'; changehttp://alphabetangel.com/treeOfLife/tree/images/('top_Online_Course__Lessons_copy', 'http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif'); return true;">
<IMG NAME="top_Online_Course__Lessons_copy" SRC="http://alphabetangel.com/treeOfLife/tree/images/top_Online-Course--Lessons-.gif" WIDTH=78
HEIGHT=62 BORDER=0 ALT="" USEMAP="#top_Online_Course__Lessons_copy_Map"></A>
<TD COLSPAN=3 ROWSPAN=5>
<a href="default2.htm" ONMOUSEOVER="toggleImages('top_Gift_Certificates', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Contact_Angeline', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Home', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'spacer', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Online_Course__Lessons_copy',
new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Alphabet_Journal_copy', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Biography', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), 'top_Ageless_Wisdom', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif'), '', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29-over.gif')); return true;"
onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu(),toggleImages('top_Gift_Certificates', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Contact_Angeline', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Home', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'spacer', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Online_Course__Lessons_copy', new Array('top_29',
'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Alphabet_Journal_copy', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Biography', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), 'top_Ageless_Wisdom', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif'), '', new Array('top_29', 'http://alphabetangel.com/treeOfLife/tree/images/top_29.gif')); return true;">
<IMG NAME="top_29" SRC="http://alphabetangel.com/treeOfLife/tree/images/top_29.gif" WIDTH=93 HEIGHT=35 BORDER=0 ALT=""></A></TD>
</BODY></HTML>

Ok I better hurry up. My mom's flaming. I am late for the school.

shachi
08-18-2005, 08:16 AM
Find the file attached to this.