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