-
1. Re: Spry collapsible wont expand down
Ben Pleysier Apr 6, 2011 6:33 AM (in response to onefiftymph)Thank you for a clear and concise question.
The short answer, open SpryCollapsiblePanel.js, go to line 431 and change
this.content.style.height = this.toHeight + "px";
to
this.content.style.height = "auto";
In the illustration, however there is no need for a div to be placed inside the panel. Have a look at the following example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
<style>
.CollapsiblePanelContent p {
margin: 1.5em 20px;
}
</style>
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Facilisi bis dolore ne consectetuer pneum genitus torqueo consequat ut vulpes at, luptatum abdo uxor. Ludus torqueo consequat pala humo zelus et olim sino metuo nullus amet virtus facilisi. Nullus pagus jugis vel ad diam. Vel veniam, dignissim incassum, natu ad paulatim consequat antehabeo gemino nunc sino occuro valde tego.</p>
<p>Exputo exerci consequat transverbero ne aliquip iriure ex, ullamcorper vereor. Ille vindico quidne eros, velit typicus consequat, nulla typicus voco.<br />
Facilisi bis dolore ne consectetuer pneum genitus torqueo consequat ut vulpes at, luptatum abdo uxor. Ludus torqueo consequat pala humo zelus et olim sino metuo nullus amet virtus facilisi. Nullus pagus jugis vel ad diam. Vel veniam, dignissim incassum, natu ad paulatim consequat antehabeo gemino nunc sino occuro valde tego. </p>
<p>Exputo exerci consequat transverbero ne aliquip iriure ex, ullamcorper vereor. Ille vindico quidne eros, velit typicus consequat, nulla typicus voco.</p>
</div>
</div>
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>
</html>Gramps
-
2. Re: Spry collapsible wont expand down
onefiftymph Apr 6, 2011 2:47 PM (in response to Ben Pleysier)Thanks so much Gramps! I did read through some of your enjoyable answers before my first post here. "..provide a link to your site so that we can all marvel at the phenomenon." LOL!!
Your fix to the .js file and html changes are perfect. Thanks for taking the time to help me.
I also appreciate that in your reply you noted of my example "in this illustration", because that was my attempt to re-create in a simpler version my main dilemma, where I'm trying unsuccessfully to finesse the problem on a new, fluid two-column page design for my hiking site (before hiring someone much smarter than me to fix):
http://96.0.181.107/stylingproblem/user01.html
Before finding this forum I spent an entire day reading and searching and going line-by-line, comments galore, trying height: 0, height: auto, height 160px; and more, experimenting with every CSS property to figure out why the collapsible panel - with several nested div's - on this page won't behave. (With the browser open to 12" or more, it looks almost right, but breaks on resize)
Here's what that page looks like after the change to line 431 of the .js file:
http://96.0.181.107/spryprob02/user01.html
Still a problem. Im sure I've got something else dramatically wrong and maybe my earlier example wasn't indicative of the problem here. I gave .CollapsiblePanelContent a green background to see what's happening.
Would very much appreciate taking a look and setting me in the right direction.
-
3. Re: Spry collapsible wont expand down
Ben Pleysier Apr 6, 2011 6:13 PM (in response to onefiftymph)Thank you for your feedback.
In your case, I have a faint suspicion that the problem lies with sloppy markup. When I look at the first few lines of the body section of your document
<body>
<div id= "containerHeader">
<div id= "containerHeaderLeft"><img src="images/logo-header_200x41.jpg" width="200" height="41" /></div>
<div id= "containerHeaderRight"><img src="images/hdr-login-search_539x41.jpg" width="539" height="41" /></div>
</div><!--[if lt IE 7]><script type="text/javascript" src="iehoverfix.js"></script><![endif]-->
<div class="colmask leftmenu">
<div class="colleft">
<div class="col1">
<!-- Column 1 content start -->
<span class="footer-smalltext">More information</span>
<!-- Column 1 content end -->
</div>
<!-- Column 2 start -->
<div class="col2">
<div class="container-breadcrumb"><a href="#">Home</a> > <a href="#">Members</a> > <a href="#">150mph</a></div>1. Athough this will work, I would put the script in the HEAD-section
2. There is no </div> tag for the class colmask and leftmenu
3. The > should be represented with and escape character as in >
I saw that further down there are a few more problems. Clear these up, especially closing tags, and see if it makes a difference.
Gramps
-
4. Re: Spry collapsible wont expand down
onefiftymph Apr 7, 2011 8:00 AM (in response to Ben Pleysier)Thanks Gramps
I made the changes and corrections you pointed out, went through with the page again and changed some things like removing blank lines and taking most comments off their own line. Then I tried the W3 schools validator but it wasn't finding opening and closing tags and other things that are actually there, so not much help.
Right now the CollapsiblePanelContent has height:222px - the only way i can get it to stay open.
I re-uploaded everything: http://96.0.181.107/spryprob02/user01.html
If you have any further advice to offer, I can't tell you how much I appreciate the effort! At 20+ hours into this page, it's looking like I'll have to start from scratch...sigh...maybe I'll get to this same place a lot faster the 2nd time!
-
5. Re: Spry collapsible wont expand down
TheBitBug Jun 11, 2012 4:57 PM (in response to onefiftymph)Over a year later and this post is still helping! the change in the JS of height to be auto did the trick for my problem.
I appreciate it! Thanks Gramps!


