Collapsible panel in morphing panel

Hi,
Hope this isnt too complicated:
I searched and found that if you have a nested collapsible panel within another, you can fix the downward expandible problem by changing line 431 of SpryCollapsiblePanel.js from:
this.content.style.height = this.toHeight + "px";
to:
this.content.style.height = "auto";
I'm having a similar problem only I have a collapsible panel nested into one of the tabs of a spry morphing panel. When clicked the collapsible panel expands downwards under the border of the morphing panel, so the content cannot be seen. The above fix did not work.
Here is a link to a morphing panel sample:
http://labs.adobe.com/technologies/spry/ui/samples/MorphPanelsSample.html
My collapsible panel is nested within the second tab at the bottom.
Anyone have a fix for this?
I wrapped the collapsible panel in a div with an overflow of hidden and that didnt work, I also played around with the SpryMorphPanels.js but couldnt come up with anything.

100+ views, any takes on this?
Gramps your magic is needed.
Maybe the markup would help:
<div id="ex1" class="liveSample">
             <ul id="ex1-tabs" class="SimpleTabs" style=" font-size:16px;">
<li><a href="#ex1-s1" >Card</a></li>
<li><a href="#ex1-s2">Biography</a></li>
<li><a href="#ex1-s3">References</a></li>
<li><a href="#ex1-s4">Articles</a></li>
</ul>
                 <div class="content">
        <div id="ex1-s1" class="section">
            <div class="content">
                               content1
                           </div>
                                                </div>
            <div id="ex1-s2" class="section">
            <div class="content" align="left" style="font-family: Lekton;">
<h2>Biography</h2>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content</p>
<p>info</p>
<p>info</p>
                      </div>
                </div>
</div>
</div>
            <div id="ex1-s3" class="section">
            <div class="content" align="left">
<h2>References by this Author</h2>
</div>
                                                </div>
</div>
</div>

Similar Messages

Spry Collapsible panel - open and closed default question...

I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
Thank you all!
Aza

Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

Collapsible Panels - Links to open one, and close others

Hi,
I am new to Dreamweaver and have been creating my site by
learning as I go along. I have already read through all the other
related topics associated with Collapsible Panels on this blog and
have still not found an answer. I have been able to open and close
Collapsible Panels by using links - but unfortunately, I need more
than just opening and closing.
On my site i have approximately 5 pages, all with the same
header and Menu bar. The Information (that i have presented in
numerous Collapsible Panels) does however vary from page to page.
What I need to try and figure out is:
How can I open one collapsible panel and close all others? I
have seen the one example which leads to my next question:
How can I group Panels? Some examples of how to open one and
close all others use this grouping. Is there any other way of
opening one and closing all others without grouping?
Lastly, is it possible to set up a link that can be viewed on
one page which when clicked opens the relevant page and collapsible
panel? i.e. on my About Us page there is a link (using the Menu
bar) for one of my several services on the services drop down menu
(but services is on a different page with the same setup). When a
viewer clicks on the specific service, is it possible to get the
site to open the services page, and open the relevant collapsible
panel (with all other Panels closed)?
Any assistance would be greatly appreciated - I have been
searching for days now and cannot seem to find any
answers/directions in laymans terms.
Kind regards,
John

wlsjoh013 wrote:
> Hi,
>
> I am new to Dreamweaver and have been creating my site
by learning as I go
> along. I have already read through all the other related
topics associated
> with Collapsible Panels on this blog and have still not
found an answer. I
> have been able to open and close Collapsible Panels by
using links - but
> unfortunately, I need more than just opening and
closing.
>
> On my site i have approximately 5 pages, all with the
same header and Menu
> bar. The Information (that i have presented in numerous
Collapsible Panels)
> does however vary from page to page. What I need to try
and figure out is:
>
> How can I open one collapsible panel and close all
others? I have seen the one
> example which leads to my next question:
This page has an example that has a link that can open and
close a panel:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
One way to do this would be to have a single link that would
open one of your panels using the code, but then add to it code
that closes each of the other panels, for example:
<a href="#"
onclick="CollapsiblePanel4.open();CollapsiblePanel5.close();CollapsiblePanel6.close();">O pen
4, close 5 and 6</a>
To make this work, you'll need to look that the panel
constructors at the bottom of your page and make sure to match up
the panel variable names i.e. "var CollapsiblePanel1 =...." the
variable is CollapsiblePanel1.
You could also write a function that gathers together the
various panels you have on the page and then pass to it only the
panel that you want kept open. For now, though, it might be best to
use the above method, given your expertise. And taking that even
further, you could apply the function call unobtrusively. Both the
function call and the unobtrusive part you can work on later to get
this working for now.
> How can I group Panels? Some examples of how to open one
and close all others
> use this grouping. Is there any other way of opening one
and closing all
> others without grouping?
This is a little confusing, on one hand you ask about how to
group, but then ask how not to group. There is a concept of a
collapsible panel group:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
But there is another type of group, that may be more what
you're looking for, and that's an Accordion panel, which is similar
to the collapsible panel group, with the exception that it can only
have one panel open at a time.
> Lastly, is it possible to set up a link that can be
viewed on one page which
> when clicked opens the relevant page and collapsible
panel? i.e. on my About Us
> page there is a link (using the Menu bar) for one of my
several services on the
> services drop down menu (but services is on a different
page with the same
> setup). When a viewer clicks on the specific service, is
it possible to get
> the site to open the services page, and open the
relevant collapsible panel
> (with all other Panels closed)?
Probably the easiest way to do this particular one would be
to make sure that you have all of the panels set to be closed when
the page loads, and then take a look at the code for the last
example on this page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
That example uses a tabbed panel, but the concept is the
same, use a URL parameter to determine what to show. You'll need to
link in the SpryURLUtils file in the Spry download package (look in
the includes folder):
http://labs.adobe.com/technologies/spry/home.html
Essentially, your link will look similar to:
sample.html?panel=1
Then your code could look something like:
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:(params.panel==1 )} );
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2",
{contentIsOpen:(params.panel==2 )} );
Basically what this is doing is creating an object from the
URL parameters. Then for each of the panels the constructor has
code that determines whether or not to expand the panel when the
page loads. So it checks the value of params.panel to see if it
matches 1 (for the first one), if it does, then that means that
contentIsOpen is set to true, if it is some other number or is not
present at all, then that means that the panel is closed. This
would then be repeated down the line for how ever many panels you
want to operate like that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

How do I make a Spry collapsible panel close by clicking a link in its content?

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

Target Named Anchor in a Spry Collapsible Panel from a different page

Let me start by saying I have combed this forum (and others) looking for a resolution to this. I am familiar with David Powers solution on Foundationphp.com and am using that code in project to open the collapsible panel from a separate page and it works beautifullly. The problem I have is that I want the browser to move down to a specific named anchor inside that opened collapsible panel when clicked from a different page.
Snippets of my current code here.
Below is the code that I have on an image that when clicked goes to the correct page and opens Panel1. Works Perfectly!
<a href="bamboo-species.php?col1=open#CollapsiblePanel1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
Below is the link to the .js file and the script in the head of the target page
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
Below is the code that I have on the target page for Panel1
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:params.col1 ? true : false},{duration: 1000});
</script>
If I have a named anchor say <a name="species1" id="species1"></a> down in the page, how do I target that named anchor from my link on the separate page. I have tried adding the #species1 to the end of the link on the link page (see below) but with no luck. I believe those were the instructions on foundationphp.com site.
<a href="bamboo-species.php?col1=open#CollapsiblePanel1#species1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
I hope (and suspect) that this is an easy fix, I just do not know what it is. Any help or direction where to look is greatly appreciated.

I once had the same issue can created a small function that allows me to "jump" to a element.
function scrollTo( element ){
     var stylize = function( element){ return !+"\v1" ? element.currentStyle : document.defaultView.getComputedStyle( element , null ) },
          getPosition = function( element ){
               // based on the SpryEffect's module:
               var computedStyle, tryComputedStyle,
                    position = { x: 0, y: 0 };
                    if ( element.style.left && /px/i.test(element.style.left) ){
                         position.x = parseInt(element.style.left, 10); // without padding
                    } else {
                         computedStyle = stylize( element );
                         var tryComputedStyle = computedStyle && computedStyle.left && /px/i.test( computedStyle.left );
                         if (tryComputedStyle)
                              position.x = parseInt( computedStyle.left, 10 ); // without padding, includes css
                         if(!tryComputedStyle || position.x == 0) // otherwise we might run into problems on safari and opera (mac only)
                              position.x = element.offsetLeft;   // includes padding
                    if ( element.style.top && /px/i.test(element.style.top) )
                         position.y = parseInt( element.style.top, 10); // without padding
                    else
                         if ( !computedStyle )
                              computedStyle = stylize( element );
                    var tryComputedStyle = computedStyle && computedStyle.top && /px/i.test( computedStyle.top );
                         if ( tryComputedStyle )
                              position.y = parseInt( computedStyle.top, 10 ); // without padding, includes css
                         if( !tryComputedStyle || position.y == 0 ) // otherwise we might run into problems on safari and opera (mac only)
                              position.y = element.offsetTop;   // includes padding
               return position;
          scroll( 0, getPosition( element ).y );
So now we have a scrollTo function that accepts a pure HTML element as argument, all what is left to do is figure out if we have a hash, and if the anchor exits on the page.
( hopes this works, i wrote it without testing, but you get the general idea ):
if( window.location.hash ){
     var hash = window.location.hash.substr(1), // remove the # from the hash
     element;
     // as anchors can also be used with id attributes, check that first,
     element = document.getElementById( hash );
     // maby we used name="" attribute
     if( !element && ( element = document.getElementsByName( hash )) ){
          element = element[0];
     // if we have a match:
     if( element ){
          // give the collapsible panel some time to init and update the DOM;
          setTimeout(function(){ scrollTo( element ) },0);
\o/

IE 7 issue with Spry Collapsible Panel

Hi Folks
My problem is I have dropped in a small collapsible panel at the top (right) of my site pages
which basically houses a sharing panel and a Google+1 button.
As ever it works well on all the other major browsers with the exception of IE (7).
Here it remains in the open position and clicking on the tab has no effect.
I have tried many of the suggestions put forward including;
1. Altering the js file (line 431 to now read 'this.content.style.height = "auto";')
2. Given the panel a height of 'auto'
3. Tweaked the z-index stacking
4. Reordered my other js files in case of interference
5. etc.
I was wondering whether placing the Google+1 button inside the panel was the issue...
Needless to say it was not with the other browsers.
Here is the site URL : hughsitton.com/slideshow/grey_Site/contact_Grey.html
As per usual the site goes ok then these seemingly inocuous little problems become huge and eat up oceans of time!
Any help would be greatly appreciated as my tether end is close to being reached!
(Apologies if you find my coding a little messy. Hope not.)
Many Thanks
Chris
Message was edited by: m4hs33r

Thank you, that gave me what I was looking for. Although now I have come across another issue when I put text in that is not the same length. What would cause the extra white space in the menu box.

Preventing overlapping divs (using spry collapsible panel)?

I'm using a collapsible panel. below that is another div.
When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
             <div class="clean-graypop">
               <input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
<p><strong>Part 1: Statistical inference</strong></p>
            <p> Questions revealed and hidden using buttons.</p>
            <div id="CollapsiblePanel2" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
                <br />
              </div>
              <div class="CollapsiblePanelContent">
                <p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
                <ol>
                  <li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
                  <li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
                  <li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
                  <li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
                  <li>A prevalence ratio can be calculated in an ecological study.</li>
                </ol>
                <p>Which one of the following options (a-e) is correct?</p>
              </div>
            </div>
            <br />
            <div class=""> </div>
            <div class="clean-graypop">
              <input type="radio" value="a" name="question1" />
              a) Statements 1 and 2 are correct<br />
              <input type="radio" value="b" name="question1" />
              b) Statements 1, 3 and 5 are correct<br />
              <input type="radio" value="c" name="question1" />
              c) Statements 1, 2, 3 and 4 are correct<br />
              <input type="radio" value="d" name="question1" />
              d) Statements 2, 3, 4 and 5 are correct<br />
              <input type="radio" value="e" name="question1" />
              e) All of the statements are correct<br />
            </div>
            <br />

Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
Mylenium

Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari

I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
I created links from the top of a page to the tabs of a spry collapsible panel underneath.
In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
I am using Windows XP and Dreamweaver CS4
http://www.judydiamondstone.net/Writing.html
click any of the links in the first section of the page
Thanks.

Arnout, Thank you so much for the guidance!
My code now looks like this:
(Click the first tab
below to open; click to close.)
but it still doesn't work
(I still like the error effect in IE!)
Do I need to add to the CSS or JS script that comes with the spry widget?
I am accessing all the tutorials I can find, including a very clear
explanation of event handlers in a Safari online search but I'm obviously
missing one or more basic concepts.
Page with new code on the
elements:
http://www.judydiamondstone.net/Writing.html

Google map inside the spry collapsible panel

So this time I've bumped into interesting 'bug'. I've placed the google map inside the spry collapsible panel. Panel is set to the closed mode on load of page. When I open the tab, map appears, but address marker is hidden behind the top left corner. If I place the same map outside the collapsiple panel it renders all well.
So my question is whether there is any way around this issue. When I know where the marker is hidden I can simply move the map and see it, but customer who's not aware of the problem will see only blank map with not marked address which is not acceptable.
cheers,
Simon

Sure mate. Here you go:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
              <div class="CollapsiblePanelContent">
              <cfmap width="242" height="200" zoomlevel="12" name="mainMap" markercolor="333444" showscale="false"
typecontrol="none" showcentermarker="true" centeraddress="#get_event.event_address1#, #get_event.event_address2#, #get_event.event_city#,#get_event.event_county#, #get_event.event_postcode#, #get_event.event_country# "
></cfmap>
              </div>
            </div>
And this bit goes at the bottom of the code :
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
And that would be the preview that I get once the panel is open:
And that is the preview of how it should look:
As you can see the map marker sticks to the top left corner. I was wondering whether there is any way to re-focus it once the panel is open.
cheers,
Simon

Why is my Spry Collapsible Panel not working in IE

I have created a very very simple website, in dutch (i'm dutch). http://www.dgvastgoed.nl
And on the 'projecten' (dutch word for projects) page i've made some collapsible panels.
The picture is only showing when you click on the text once, when you click again the picture disappears, that's what i want.
But in Internet Explorer it always shows, and that's not what i want.
How do I get this right in Internet explorer?
(if it's possible a second question: How do i get on the 'werkzaamheden' page the 3 links in the top left corner on the position like they are in safari and firefox.)

It lookslike you fixed it, it works fine in IE7 and 8

Need help with spry collapsible panel (menu)

I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well. Now this is what I want to add to the page:
I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
Once selected it will move directly to that panel and open it.
I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
Is there a way this can be done? Please help
I'm really not that good at this stuff- please be easy with your response- thank you

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Dynamic data in Spry Collapsible Panel

Hi guys,
Am trying to get data from a Data Set into the Spry
Collapsible Panel, with little luck. Have tried the following and
was wondering if i am doing something wrong?
<div spry:region="dsProduct">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="0">{product_name}</div>
<div
class="CollapsiblePanelContent">">{product_details}</div>
</div>
</div>
This example displays the field i want from the data set
{product_name}, but will not collapse open the panel containing
{product_details}.
Any suggestions?

hi Jay,
will this help you?
Forum
thread

XML generated Spry collapsible panel Group.

I have been trying to generate a set of collapsible panels from a XML file. I've managed to get only so far but have not quite fully suceeded. The panels are all open even though I've tried to set the default as closed. Additionally, none of them close. I know I'm close but I've been unable to get this finished. The page is at http://www.esaa.us/History/PastNationalSpecialtyWinners4.html.
Any Help someone can offer would be greatly appreciated.
LJD

You haven't received any replies so far - and this generally means that no-one here knows the answer.
You may want to ask your question over at the Spry Frameworks forums:
http://forums.adobe.com/community/adobe_labs/spry_framework_ajax_prelease

Help with spry collapsible panel

I have several spry collapsible panels that I am using for
navigation and want an open panel to close automatically when a new
one is opened. Can this be done? I checked the "customuze this
widget" in the property inspector but does not give any info on the
behavior of them. I am sure it is in the java code but I am not a
Java expert by any means.

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Collapsible Panel - Tab start closed?

Hello
Just began working with Spry and I'm going to use the
Collapsible Panels to display multiple lists, each form a different
year, beneath eachother. Therefore I wanted the top list to start
as open, just as it normally does - but the rest that followed
would start as closed. I'll code the PHP to assign the tabs their
classes based on their position myself, but I just need help with
how to give a tab the closed-value.
Do I need to temper with the .js-file, or is it enough to
change the class of the tab-div to CollapsiblePanelClosed for
instance. I tried the latter, but it didnt work. In addition I
couldn't find the class CollapsiblePanelClosed represented in the
.css-file either.
Short example:
2007 (begins open and displays its content)
- item 01
- item 02
- item 03
2006 (begins closed)
2005 (begins closed)
etc.
Thanks,
Eirik

Hi Eirik,
you should better use Collapsebile Panel group. We can find
an working example
here.
Diana

Collapsible panel in morphing panel

Similar Messages

Maybe you are looking for