PDA

View Full Version : Conflict between ddacordion.js and equalcolumns.js



parboy
01-04-2013, 04:18 AM
1) Script Title: CSS Equal Columns Height script (v1.01) AND
Bullet List Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/ AND http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem: It seems that when accordion list expands, pushing content deeper than containing div, the content pushes through the bottom of the containing div. The containing div should expand as needed. This works if I remove the equalcolumns script. See example: http://dev.inkari.com/experience.php. How can I get these two scripts to work together?

Thanks,
Bill

Beverleyh
01-04-2013, 12:16 PM
As you're using jQuery, you might like to switch to a jQuery responsive height solution as provided here : http://css-tricks.com/forums/discussion/20153/equal-height-columns-in-the-context-of-this-pen/p1

Here is also another solution : http://stackoverflow.com/questions/10218253/make-jquery-equal-heights-script-recalculate-with-new-content

vwphillips
01-04-2013, 12:31 PM
add an anchor below the text


<p style="color:red; margin: 200px 90px 0 60px; line-height: 14px;">This text gets pushed below the containing div's bottom edge. <br />The containing div should expand with the list.</p>
<a id="anchor" ></a>

</div> <!-- arrowlistmenu -->


then


ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //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: 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: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //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
document.getElementById('main-content').style.height=document.getElementById('side-bar').style.height=document.getElementById('photo-bar').style.height=document.getElementById('anchor').offsetTop+'px';;
//do nothing "side-bar", "main-content", "photo-bar"
}
})

parboy
01-05-2013, 09:34 PM
Thanks Beverley and Vic,

I don't know much about Javascript yet so I opted for Vic's solution because I could plug it in without understanding syntax. It works!

Bill