Anylink dropdown menu .js / links conflicts?

[StephanieH]

1) Script Title: Anylink dropdown menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

I do not understand the javascript syntaxt, and that is surely at the root of my problem.

I am developing this site http://dev.coeur.asso.fr/index.html
and here is the .js, as well as the .css

I cannot find what it coming into conflict, and I am almost sure it might be an evidence for the specialists of this site, but please Help, my eyes are getting square


Thanks in advance,

Stéphanie.


.js
/***********************************************
* 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

//Contents for menu 2, and so on

var menu2=new Array()
menu2[0]='<a href="http://dev.coeur.asso.fr/phytosanitaires.html">Les Phytosanitaires</a>'
menu2[1]='<a href="http://dev.coeur.asso.fr/phosphates.html">Les Phosphates</a>'
menu2[2]='<a href="http://dev.coeur.asso.fr/assainissement.html">Assainissement</a>'

var menu3=new Array()
menu3[0]='<a href="http://dev.coeur.asso.fr/sediments.html">La gestion des s&eacute;diments en Rance</a>'
menu3[1]='<a href="http://dev.coeur.asso.fr/lyvet.html">Le pi&egrave;ge &agrave; s&eacute;diments en Rance</a>'

var menu4=new Array()
menu4[1]='<a href="#">Les Mammif&egrave;res aquatiques en Rance</a>'
menu4[2]='<a href="#">Les Oiseaux</a>'
menu4[3]='<a href="#">La Flore sensible</a>'


var menu5=new Array()
menu5[1]='<a href="#">Patrimoine Gallo-Romain</a>'
menu5[2]='<a href="#">La Pr&eacute;histoire</a>'
menu5[3]='<a href="#">Le b&acirc;ti moderne</a>'

var menu6=new Array()
menu6[1]='<a href="#">Les Parcs Naturels R&eacute;gionaux</a>'
menu6[2]='<a href="#">Le Projet de Parc Naturel Régional en Rance</a>'


var menuwidth='120px' //default menu width
var menubgcolor='white' //menu bgcolor
var disappeardelay=500 //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="-500px"
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-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth, dropupBool){
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"
if (dropupBool==true)
dropmenuobj.style.top=dropmenuobj.y-dropmenuobj.offsetHeight+"px"
else
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


.css

body {
background-color: #CCFFCC;
background-image: url(http://dev.coeur.asso.fr/images/body_bg2.jpg);
background-repeat: x;
color: #1E4220;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
line-height: 150%;
}

#boitepp {
width: 900px;
margin: 0px auto 10px auto;
position: absolute;
top :0px;
left: 50px;
}

#en-tete {
margin: none;
padding: 0px;
border: none;
position: absolute;
top :0px;
left: 0px;
}

/* dropdown menu */

#dropmenudiv{
position: absolute;
text-align: center;
display: inline;
top: 180px;
left: 0px;
color: #339933;
background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
border: 0px;
width: 100%;
border-bottom-width: 0;
font:normal 12px;
line-height:25px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: inline;
text-align: left;
text-indent: 5px;
border-bottom: 0px;
padding: 1px 3px;
text-decoration: none;
font-weight: bold;
background-color: #FFFFFF;
background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
}

#dropmenudiv a:link{
display: block;
padding :0px;
font-weight: normal;
text-decoration: none;
background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
color: #000066;
}

#dropmenudiv a:hover{ /*hover background color*/
background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
color: #6699FF;
}

/* end dropdown menu */


#contenu {
width: 900px;
position: absolute;
top :205px;
left: 0px;
z-index: 1;
background-image: url(http://dev.coeur.asso.fr/images/contenu_bg3.jpg);
background-repeat: y;
text-align: justify;
}


.col-gauche
{
text-align: left;
background-color: transparent;
width: 150px;
float: left;
margin: none;
padding-bottom: none;
}

.element-de-chapitre
{
color: #627137;
margin-top: 20px;
margin-left: 10px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px dotted #669933;
border-left: 0px;
}

.element-de-chapitre a:link
{
color: #758642;
text-decoration: none;
}

.element-de-chapitre a:hover
{
color: #6699FF;
text-decoration: none;
}


.col-milieu
{
padding-top: 20px;
padding-left: 30px;
padding-right: 20px;
background-color: transparent;
width: 680px;
float: left;
margin: none;
}


#pied-de-page
{
width: 900px;
clear: left;
color: #23297F;
font-size: 0.8em;
line-height: 1.5em;
background-color: #99CCCC;
letter-spacing: 0.1em;
text-align: center;
text-indent: 120px;
padding-bottom: 10px;

}

h1 {color: #339933;
font-size: 2em;
font-family: georgia, Verdana, sans-serif;

}

h2 {color: #339933;
font-size: 1.7em;
font-family: georgia, Verdana, sans-serif;

}

h3 {color: #339933;
font-size: 1.2em;
font-family: georgia, Verdana, sans-serif;
}

h4 {color: #8A0934;
font-size: 1em;
font-variant: small-caps;
font-family: georgia, Verdana, sans-serif;
margin: 3px;
}

p {
margin-top: 0;
text-align: justify;
color: #003366;
}

a:link {
font-weight: bold;
text-decoration: none;
color: #339933;
}

a:visited {
font-weight: bold;
text-decoration: none;
color: #339933;
}

a:hover {
font-weight: bold;
text-decoration: none;
color: #6699FF;
}


a:active {
font-weight: bold;
text-decoration: none;
color: #3366FF;
}

img {
float: left;
}

[ddadmin]

Try removing the DIV in red in your HTML:

<div id="dropmenudiv">			<!navigation dans le site>


<a>ACCUEIL</a> |
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px', true)" 
onMouseout="delayhidemenu()">EAU</a> |
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '250px', true)" 
onMouseout="delayhidemenu()">SEDIMENTS</a> |
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '250px', true)" 
onMouseout="delayhidemenu()">FAUNE ET FLORE</a> |
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '250px', true)" 
onMouseout="delayhidemenu()">PATRIMOINE</a> |

<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '270px', true)" 
onMouseout="delayhidemenu()">PROJET PNR</a>  

</div>	

The DIV with id=dropmenudiv is dynamically generated by the script. I'm not sure why you have it physically on your page.

[StephanieH]

well, I took the div away, but now it is not here at all any more have a look : http://dev.coeur.asso.fr/index.html


....

at first, I thought it might be because of my background images, but the contenu_bg3.jpg is 900px large, and contenu_bg4.jpg is 4x3px.

I thought it was because the links in the head of the html, as it is the main thing I "touched" before it all went awock.

[StephanieH]

I understood that the link I was putting between the "" of the main menu of the html were the culprits . I was only leaving # between the "" and it was not enough for it to work for me...putting a true web adress, even though the link doesn't work on the site, makes the trick.

Now I have another problem : I would like the visited links in the menu to be the same as when they have not been visited yet.

So I tried to add a #dropmenudiv a:visited rule, but it doesn't accept it...it makes a whole thing disappear...

Any idea?

Stéphanie.