PDA

View Full Version : Anylink Dropdown menu firefox problem



sou
04-23-2008, 01:26 PM
1) Script Title:
Anylink dropdown menu

2) Script URL (on DD):
http://www.dynamicdrive.com/forums/showthread.php?p=12304

3) Describe problem:
I am using this program above. With IE it works alright but not with firefox
the submenu I created just goes miles away when I attach css file which I normally use.

This is the code;


<head>

<style type="text/css">
.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 8pt Arial;
line-height:17px;
z-index: 100;
background-color: lightyellow;
width: 133px;
color: black;
}

.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: #ffffbb;
font-weight:bold;
}
}
</style>
<script type="text/javascript">

/***********************************************
* AnyLink CSS Menu script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.google.com/ for full source code
* Modified here for a second 'drop over' level
***********************************************/

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)

/////No further editting needed

var ie5=document.all
var ns6=document.getElementById&&!document.all

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){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function subshowhide(obj, e, visible, hidden){
if (ie5||ns6)
subdropmenuobj.style.left=subdropmenuobj.style.top=-500
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=ie5 && !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=ie5 && !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 dropdownmenu(obj, e, dropmenuID){

if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
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 ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function subdynamichide(e){
if (ie5&&!subdropmenuobj.contains(e.toElement))
subdelayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
subdelayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)

}

function subdelayhidemenu(){
subdelayhide=setTimeout("subdropmenuobj.style.visibility='hidden'",disappeardelay)

}


function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

function subclearhidemenu(){
if (typeof subdelayhide!="undefined")
clearTimeout(subdelayhide)
}



function rightmenu(obj, e, dropmenuID){
if (document.all&&!window.opera){
var subObjB='', ieStyle=document.all.tags('style')[0].innerHTML
ieStyle=ieStyle.substr(ieStyle.indexOf('anylinkcss a'))
ieStyle=ieStyle.substr(ieStyle.indexOf('border-bottom'))
ieStyle=ieStyle.substr(0, ieStyle.indexOf(';'))
for (var i_tem = 0; i_tem < ieStyle.length; i_tem++)
subObjB+=ieStyle.charAt(i_tem).replace(/[^0-9]/,'')
subObjB=parseInt(subObjB)
}
else if (!window.opera)
var subObjB=parseInt(document.styleSheets[0].cssRules[1].style.borderBottomWidth)
else
//alert(obj.offsetHeight+' '+getposOffset(obj, "top") )
subObjB=-6
if (window.event)event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof subdropmenuobj!="undefined") //hide previous menu
subdropmenuobj.style.visibility="hidden"
subclearhidemenu()
if (ie5||ns6){
obj.onmouseout=subdelayhidemenu
subdropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) subdropmenuobj.onclick=function(){subdropmenuobj.style.visibility='hidden'}
subdropmenuobj.onmouseover=subclearhidemenu
subdropmenuobj.onmouseout=ie5? function(){ subdynamichide(event)} : function(event){ subdynamichide(event)}
subshowhide(subdropmenuobj.style, e, "visible", "hidden")
subdropmenuobj.style.left=obj.offsetWidth+"px"
subdropmenuobj.style.top=getposOffset(obj, "top")-(dropmenuobj.y)-(obj.offsetHeight)+subObjB-1 +"px"
}
return clickreturnvalue()
}
</script>
</head>

<table border="0" width="61%" height="121">
<tr>
<td width="71%">

<div style="position: absolute; width: 107px; height: 37px; z-index: 101; left: 166px; top: 35px" id="MenuProducts">
<!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'products')"><b>
<font color="#000000">products</font></b></a>
</div>



<div id="products" class="anylinkcss" style="position: absolute; left: 326px; top: 112px">

<a href="http://www.google.com/">Custom design</a>
<a href="http://www.google.com/">New products</a>
<a href="http://www.google.com/">Cam locks</a>
<a href="#" onClick="return clickreturnvalue()" onMouseover="rightmenu(this, event, 'quarterturn')">
Quarter turn locks</a>
<div id="quarterturn" class="anylinkcss">
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Contenta>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>

</div>
<a href="http://www.google.com/">Content</a>

</div>

sou
04-23-2008, 01:27 PM
THis is the css file;

CSS file (part of it);
* { padding: 0; margin: 0; }

/*General*/
body {
position: absolute;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font: 9px
}


/*menu,newsflassh*/
.menu { font-weight:700; font-size:12px; font-family:Arial,Helvetica;TEXT-ALIGN: left; color:#ffffff;}

.normal { font-weight:400; font-size:11px; font-family:Arial,Helvetica;TEXT-ALIGN: left;}


div#header A { text-decoration:none;}
div#header A:link {color:#ffffff;}
div#header A:visited{color:#ffffff;}
div#header A:hover {color: #ffffff;}
div#header tabb { font-weight:bold; font-size:10px; font-family:Arial,Helvetica;TEXT-ALIGN: left; color:#000000;}
div#header tan {FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}
div#header tann {FONT-WEIGHT: bold;FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}
div#header tanc {FONT-WEIGHT: 400;FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}

div#scroller A { text-decoration:none;}
div#scroller A:link {color:#000000;}
div#scroller A:visited{color: #000000;}
div#scroller A:hover {color: #000000;}

div#scroller div.tabbimg2 { margin:0px 0px 0px 0px;text-align: center;}
div#scroller div.tabbimg { margin:5px 0px 0px 0px;text-align: center;}
div#scroller div.tabb { font-weight:bold; font-size:14px; font-family:Arial,Helvetica;TEXT-ALIGN: left; color:#1A2999;}
div#scroller div.tan {FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}
div#scroller div.tann {FONT-WEIGHT: bold;FONT-SIZE: 14px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}
div#scroller div.tanc {FONT-WEIGHT: 400;FONT-SIZE: 10px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: left;}
div#scroller div.more {
FONT-WEIGHT: 600;FONT-SIZE: 12px; COLOR: navy;
FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: right;
}
div#scroller div.more a:hover{
color: cceecc;
}

#scroller { border: 1px solid #666;margin:0px 0px 0px 0px;}

ddadmin
04-23-2008, 08:19 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<div id="products" class="anylinkcss" style="position: absolute; left: 326px; top: 112px">

<a href="http://www.google.com/">Custom design</a>
<a href="http://www.google.com/">New products</a>
<a href="http://www.google.com/">Cam locks</a>
<a href="#" onClick="return clickreturnvalue()" onMouseover="rightmenu(this, event, 'quarterturn')">
Quarter turn locks</a>
<div id="quarterturn" class="anylinkcss">
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Contenta>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>
<a href="http://www.google.com/">Content</a>

</div></body>

sou
04-24-2008, 09:43 AM
AnyLink drow down menu
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Thanks for the post, I've tried moving <div> tag outside the container but it still doesn't work...

rangana
04-24-2008, 10:33 AM
One obvious mistake in your CSS is higlighted :)


.anylinkcss a:hover{ /*hover background color*/
background-color: #ffffbb;
font-weight:bold;
}
}


...I veiwed the page on IE7 and FF...and it works identical.