Problems with Accordion script
1) Script Title: Accordion script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-urban.htm
3) Describe problem: I'm having some problems with the menu expanding and collapsing on some of the opages of my website-concept. This is the site: www.totalenergyservice.nl/gilad
The menu's collapses completelty when clicked on the second or third submenu item and then scrolling over the menu again: the active page is collapsing as well. While with the first and last submenu pages, this doesn't happen and the active menu item is not collapsing while scrolling over the menu.
I'm not an expert in this but i think there's just a simple thing i'm missing here, hope someone can help me out.
This is the code of one of the pages where things go wrong:
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gilad Produce :: Freshly the best ::</title>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="gilad, groenten, israel, paprika, trostomaat, komkommer, aubergine, luchtvracht"/>
<meta name="description" content="."/>
<meta name="author" content="MindXposure"/>
<link rel="shortcut icon" href="G.ico"/>
<LINK REL="stylesheet" HREF="gilad.css" Type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
<!--
html, body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #7f997f;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/mx-over.png','images/nl-over.jpg','images/de.jpg','images/us.jpg')">
<div class="achtercontainer">
<div class="container">
<div class="top">
<div class="flags">
<a href="trostomaten.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nederlands','','images/nl-over.jpg',1)"><img src="images/nl.jpg" alt="Nederlands" name="Nederlands" width="16" height="11" hspace="15" vspace="0" border="0" id="Nederlands" /></a>
<a href="de/tomaten.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Deutsch','','images/de.jpg',1)"><img src="images/de-over.jpg" alt="Deutsch" name="Deutsch" width="16" height="11" hspace="15" vspace="0" border="0" id="Deutsch" /></a>
<a href="us/tomatoes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('English','','images/us.jpg',1)"><img src="images/us-over.jpg" alt="English" name="English" width="16" height="11" hspace="15" vspace="0" border="0" id="English" /></a>
</div>
</div>
<div class="header">
<div id="logo"><a href="index.html"><img src="images/logo.jpg" alt="Gilad Produce" width="350" height="105" border="0" /></a></div>
<div id="header-image"><img src="images/header2.jpg" /></div>
</div>
<div class="mainpic"><img src="images/mainpic2.jpg" /></div>
<div class="menu">
<div class="headernosub"><a href="index.html">HOME</a></div>
<div class="silverheader"><a href="producten.html">PRODUCTEN</a></div>
<div class="submenu">
<a href="paprikas.html">Paprika's</a>
<div class="submenunolink">Trostomaten</div>
<a href="diversen.html" >Diversen</a>
<a href="biologisch.html">Biologisch geteelt</a>
</div>
<div class="silverheader"><a href="werkwijze.html" >WERKWIJZE</a></div>
<div class="submenu">
<a href="proces.html/">Proces</a>
<a href="logistiek.html">Logistiek</a>
<a href="kwaliteit.html">Kwaliteit</a> </div>
<div class="headernosub"><a href="team.html" >TEAM</a></div>
<div class="silverheader"><a href="contact.html" >CONTACT</a></div>
<div class="submenu">
<a href="route.html">Route</a> </div>
</div>
<div class="content">
<div class="contentheader"> TOMATEN. </div><br />
<div class="contenttext"> There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. <br />
</div>
</div>
<div class="footer">
<div class="footertekst">T : +31 174 528 067 // <a href="mailto:info@giladproduce.nl">info@giladproduce.nl</a> // © Gilad Produce 2010 // created by <a href="http://www.mindxposure.nl" target="_blank" onmouseover="MM_swapImage('mx','','images/mx-over.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/mx.png" alt="MindXposure" name="mx" width="26" height="12" border="0" id="mx" /></a></div>
</div>
</div>
</div>
</body>
</html>
[CODE]
THanks in advance!!!
CSS Codes
Reply With Quote
Bookmarks