PDA

View Full Version : Problems with Accordion script



marcelplomp
06-04-2010, 02:32 PM
1) Script Title: Accordion script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-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&nbsp;//&nbsp;<a href="mailto:info@giladproduce.nl">info@giladproduce.nl</a>&nbsp;//&nbsp; Gilad Produce 2010&nbsp;//&nbsp;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!!!

azoomer
06-04-2010, 07:17 PM
Hi marcelplomp !
I have looked at your page and the menu seems to work. What I don't quite understand is how you would like it to function. Would you care to elaborate on that ?

marcelplomp
06-07-2010, 08:52 AM
Thanks for your attempt in helping me,

the menu does work but not entirely, I'll try to explain a little better:

when you go to the submenu page > 'Trostomaten'
and you scroll over the menu looking for antother page the active page (trostomaten) dissappears when another header is collapsed. This doesn't happen with the submenu pages which are first or last in the list of these pages. These stay visible when other headers collapse.

It's something with the order of the menu items i gues because only the first and last submenu items stay visible and the 'middle' ones disappear...

Hope this explaination is clear enough for you to help me out,

Thanks in advance!!

marcelplomp
06-07-2010, 09:21 AM
Hi again Azoomer,

I've been trying out some things and I think it's really an issue with not being the first or last submenu item. This because when i give all the submenu items the same style (all in the same div) the middle one still doesn't stay visible...

azoomer
06-07-2010, 08:32 PM
Hi Marcel. Looking at you site i think the same as you. There might be a smarter way to do it but I dont know enough about the script.
The only thing i can think of is to switch the place of the links on the pages so that on "trostomaten" you put the active .submenunolink on top oustside the submenu div like this:


<div class="silverheader"><a href="producten.html">PRODUCTEN</a></div>
<div class="submenunolink"> Trostomaten</div>
<div class="submenu">
<a href="paprikas.html">Paprika's</a>
<a href="diversen.html" >Diversen</a>
<a href="biologisch.html">Biologisch geteelt</a>
</div>

It is not the most elegant solution but it will keep the active div visible (I think). Seems like everything that is inside div.submenu collapses

marcelplomp
06-08-2010, 02:15 PM
I'll figure asome way around to get rid of the problem, thanks for your input!