PDA

View Full Version : AnyLink Drop Down Menu



madmagna
08-02-2005, 11:52 AM
HI,
I am super new to this.

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

I have copied the script into the right places, it all works perfectly except for one thing.

I have set up my pages to have frames. There is a header frame for the site title, a middle frame about the height of the text and the main frame below with the information.

The problem I have is the script is in the middle frame, when I hover on a link instead of the menu dropping down over the lower frame, it goes up and is hidden by the upper frame.

How can I fix this to be "on top" of other frames and to also drop down instead of up.

Thanks

IanMarlowe
08-02-2005, 12:12 PM
Could you give us a url so we can see exactly what your problem is?

madmagna
08-02-2005, 12:34 PM
Thanks,
The site is
http://madmagna.atspace.com/pages/eccsamain.htm

I have just uploaded a basic page, have not changed the script in any way until I can get this sorted.

The effect I want is for the menu to drop down over the lower frame and still remain "on top" so all likns can be seen.

Thanks again

IanMarlowe
08-02-2005, 12:55 PM
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
}

#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
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 windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+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, "bottom")
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>

this way, the menu will open down, not up. (just change the contant)

madmagna
08-02-2005, 12:58 PM
Thanks for that, will give that a go.

Will this also allow the menu to stay on top of the lower frame instead of being hidden by it

Thanks again

nrapt
08-08-2005, 07:04 PM
Aloha,
Having a similar problem with the one mentioned above, frames using AnyLink Drop Down Menu for navigation. I also 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 the fix suggested above, 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:


#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()"


Jennifer