PDA

View Full Version : ddaccordian inside links not working!



bobr
08-20-2010, 12:31 AM
I inherited some code that is using the ddaccordian.js (version 1.3) and have run into a problem. Links inside the accordian content wont work, they just close the accordian box. I've seen some other posts here discussing this problem, but my file doesn't seem to be set up the same way as as the solutions presented. And I'm a bit of a noob when it comes to jQuery.

Here's the js on the page:



<script type="text/javascript">
ddaccordion.init({
headerclass: "navbg", //Shared CSS class name of headers group
contentclass: "navContent", //Shared CSS class name of contents group
revealtype: "onDblclick", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 100, //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: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //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: ["", "selection"], //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: "normal", //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

switch(index)
{
case 0:
if(state == "block"){
document.getElementById('img1').src = "resources/images/nav/103West_on.gif";
document.getElementById('arrow1').src = "resources/images/arrowTop_on.gif";
document.getElementById('nav1').style.backgroundImage = "url(resources/images/navTop_bg_on.gif)";
}else{
document.getElementById('img1').src = "resources/images/nav/103West.gif";
document.getElementById('arrow1').src = "resources/images/arrowTop.gif";
document.getElementById('nav1').style.backgroundImage = "url(resources/images/navTop_bg.gif)";
}
break;
case 1:
if(state == "block"){
document.getElementById('img2').src = "resources/images/nav/atlantaFishMarket_on.gif";
document.getElementById('arrow2').src = "resources/images/arrow_on.gif";
document.getElementById('nav2').style.backgroundImage = "url(resources/images/nav_bg_on.gif)";
}else{
document.getElementById('img2').src = "resources/images/nav/atlantaFishMarket.gif";
document.getElementById('arrow2').src = "resources/images/arrow.gif";
document.getElementById('nav2').style.backgroundImage = "url(resources/images/nav_bg.gif)";
}
break;
case 2:
if(state == "block"){
document.getElementById('img3').src = "resources/images/nav/bistroNiko_on.gif";
document.getElementById('arrow3').src = "resources/images/arrow_on.gif";
document.getElementById('nav3').style.backgroundImage = "url(resources/images/nav_bg_on.gif)";
}else{
document.getElementById('img3').src = "resources/images/nav/bistroNiko.gif";
document.getElementById('arrow3').src = "resources/images/arrow.gif";
document.getElementById('nav3').style.backgroundImage = "url(resources/images/nav_bg.gif)";
}
break;
default:

}
}
})
</script>




And here's the HTML:


<div id="container">

<div id="navHeader" align="center"><img src="resources/images/ourRestaurants.gif" /></div>
<div id="topNav">
<ul>
<li class="navbg" id="nav1"><img src="resources/images/nav/103West.gif" id="img1" /><img src="resources/images/arrowTop.gif" id="arrow1" align="right" />
<ul class="navContent">
<li>
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td valign="top">
<img src="resources/images/atlantaFishMarket1.jpg" /><br /><br />
<img src="resources/images/atlantaFishMarket2.jpg" />
</td>
<td width="10"></td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c;">
404.233.5993<br />
103 West Paces Ferry Road<br />
Atlanta, GA 30305

<p>Atlanta's Premier Private Dining</p>

<span style="color:#d24a0e;">Reservations: 404.233.5993</span><br />
</td>
</tr>
</table>
</li>
</ul>
</li>
<li class="navbg" id="nav2"><img src="resources/images/nav/atlantaFishMarket.gif" id="img2" /><img src="resources/images/arrow.gif" id="arrow2" align="right" />
<ul class="navContent">
<li>
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td valign="top">
<img src="resources/images/atlantaFishMarket1.jpg" /><br /><br />
<img src="resources/images/atlantaFishMarket2.jpg" />
</td>
<td width="10"></td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c;">
404.262.3165<br />
265 Pharr Road<br />
Atlanta, GA 30305

<p>The Freshest Seafood in <br />the Southeast</p>

<span style="color:#d24a0e;">Reservations: 404.262.3165</span><br />
<a href="http://www.opentable.com/atlanta-fish-market" target="_blank"><img src="resources/images/openTable.jpg" border="0" /></a>
<p>
<strong>Lunch</strong><br />
Monday - Sunday: <br />
11:30am to 3pm<br /><br />

<strong>Dinner</strong><br />
Sunday - Thursday: <br />
3pm to 10pm<br />

Friday - Saturday <br />
3pm to 11pm
</p>
</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</div>
<div class="bar"></div>

</div>


You can see the above code in action here: http://www.dandelion-patch.com/accordian/test.html
The link that is not working is in the 2nd accordian box.

Any help is MUCH appreciated.

ddadmin
08-20-2010, 04:33 PM
The problem occurs due to the HTML markup of your menu- you're enclosing the sub menus as children of the headers, when they should be siblings instead. In the former case, the script thinks the sub menu is part of the header and assigns it the according behavior. To fix this, you should modify your markup so the two aren't parent-children anymore, for example:


<li id="nav1"><div class="navbg"><img src="resources/images/nav/103West.gif" id="img1" /><img src="resources/images/arrowTop.gif" id="arrow1" align="right" /></div>
<ul class="navContent">

<li>
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td valign="top">
<img src="resources/images/atlantaFishMarket1.jpg" /><br /><br />
<img src="resources/images/atlantaFishMarket2.jpg" />
</td>
<td width="10"></td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c;">

404.233.5993<br />
103 West Paces Ferry Road<br />
Atlanta, GA 30305

<p>Atlanta's Premier Private Dining</p>

<span style="color:#d24a0e;">Reservations: 404.233.5993</span><br />
</td>
</tr>

</table>
</li>
</ul>
</li>


In the above I've created a DIV inside the LI in question, and designated that as the header instead of the LI itself (the DIV now gets class="navbg"). With that change you may need to modify your CSS to make sure it retains the look you want. If you look at Accordion Bullet Menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm) for example, you can see an example as well of how your UL structure should be.