Closing a Collapsible Panel from another link?

Hello....
I'm not a web designer and know next to nothing about HTML
and even
less about Javascript, but am trying to make a website in
Dreamweaver,
which is going quite well, and I'm learning as I go along,
but I am
having trouble with one thing: the Spry Collapsible Panel.
I'm making a photography site and I have a sidebar on my site
which is
my list of all my galleries, one of which has sub-galleries
in it, and
it is this one that I have made into a collapsible panel, so
that when
it's clicked, it expands to reveal the sub-galleries inside,
moving
the other galleries down the page accordingly.
This works fine, but what I cannot do is get the collapsible
panel to
close again when clicking on one of the other gallery titles
outside
it, so that the sub-galleries become hidden again.
The only way of collapsing this panel seems to be to click on
the tab
of the panel itself, but what I want to do is make the panel
collapse
when something outside it is clicked.
Is there a way to do this?
I have tried looking at the "Call Javascript" behaviours and
all the
rest of it but I'm afraid it's all a foreign language to me!
Any help would be much appreciated.
Thanks

You can programatically close a collapsible panel by calling
the close() function on it. So for example if you created a
collapsible panel called cp1:
var cp1 = new
Spry.Widget.CollapsiblePanel("mycollapsiblepanel");
You can close it with a link like this:
<a href="#" onclick="cp1.close(); return false;">Close
The Panel</a>
You can see more examples here:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
http://labs.adobe.com/technologies/spry/articles/data_api/apis/collapsible_panel.html#meth ods
--== Kin ==--

Similar Messages

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/

New iphone 6 with ios 8.0 crushed and didnt open again. call center told me that use itunes to update 8.0.2 but server is too slow and didnt let me download it. it stopts in the middle of the session. how can i download it from another link or server

new iphone 6 with ios 8.0 crushed and didnt open again. call center told me that use itunes to update 8.0.2 but server is too slow and didnt let me download it. it stopts in the middle of the session. how can i download it from another link or server. by the way i try to dowload from turkey.

anyone help me there? )=

Linking to a specific panel from another page and from higher up on same page Spry-UI-1.7

Hi all,
I am using Spry-UI-1.7 for a 4 tab tabbed panel on the bottom of my home page. I'd like to link to the second tab from another page and also from the top of the home page.
I previously used method: http://foundationphp.com/tutorials/spry_url_utils.php and it worked great.
Now, with the Spry-UI-1.7 Tabbed Panel "widget", that method isn't working.
I've reviewed the code from the samples page: http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
but cannot figure out what I am doing wrong. It shows the following code for linking from another page:
<a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>
I tried this 'as is' and it didn't work.
I tried it with index.html in place of the # and it didn't work.
(e.g.   <a href="index.html" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>   )
What am I missing here?
(I have the tabbed panel on "index.html" and want to link from "maps.html" and from the top of "index.html"
Thanks for any help for this spry newbie! (read: I need it spelled out like I was a 6 yr. old

This works
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<link href="Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css" rel="stylesheet" type="text/css">
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/xml">

</script>
</head>
<body>
<div id="TabbedPanels2">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. Phasellus blandit ullamcorper dignissim. In rutrum, ante non congue fermentum, metus odio bibendum elit, ut congue sapien arcu ac justo. Vivamus sit amet erat nibh, quis dignissim libero. Pellentesque in sapien felis, et volutpat eros. Maecenas adipiscing, eros sit amet placerat cursus, arcu lacus consectetur lectus, non ultricies neque urna laoreet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<h2>Tab 2</h2>
<p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. Pellentesque quis libero nec orci porttitor faucibus vitae in velit. Pellentesque dignissim sem ut justo interdum id egestas tellus fringilla. Vestibulum tempor, turpis eget dignissim luctus, est erat ultricies turpis, non tempus massa elit in nulla. Sed eu arcu vel enim laoreet hendrerit at vel enim. Integer semper malesuada sem quis porttitor.</p>
<h2>Tab 3</h2>
<p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. In accumsan consectetur ante a vestibulum. Phasellus eu nulla et lectus tincidunt porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris massa, venenatis ut fringilla interdum, imperdiet et neque. Sed ut risus metus.</p>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2138522: #TabbedPanels2
        var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
            injectionType: "replace",
            widgetID: "TabbedPanels2",
            autoPlay: false,
            defaultTab: params.tab ? params.tab : 0,
            enableKeyboardNavigation: true,
            hideHeader: true,
            tabsPosition: "top",
            event:"click",
            stopOnUserAction: true,
            displayInterval: 5000,
            minDuration: 300,
            maxDuration: 500,
            stoppedMinDuration: 100,
            stoppedMaxDuration: 200,
            plugIns:[]
// EndOAWidget_Instance_2138522
</script>
</body>
</html>

Collapsible Panel within another Collapsible Panel HEIGHT ISSUE

Having an issue with the height of a collapsible panel that has another collapsible panel within it not adjusting. I am using Dreamweaver CS5.
When I try the fix of changing line 431 in .js (where you change "px" to "auto" where it says this.content.style.height = this.toHeight + "auto";) it does not work in IE7 or Firefox. If I change the height inferences in the .js on lines 392, 431, and 439--it worksperfect in Firefox, however it throws an error in IE7. Anyone have a clue???
Here is my page: http://www.l-3choosewisely.com/dev/
username: owl
password: l3ae2011
Help would be greatly appreciated. PLEASE PLEASE PLEASE help me!

For right now I have "semi-fixed" the issue, by adding a min-height to my second collapsible panel set, but really am NOT HAPPY
with it... please help me, it has to be something with the auto-height... I know I am looking right at it and just not seeing it.

How to add objects to panel from another class?

Hi this is what i am trying to do. I have a drag and adrop tool working where the users and select objects on a small panel and drag them to another panel called the tpan. What i want to do is create another class, which creates objects and now i want to display these objects on the tpan. So say i have a class DisplayTpan(), this class is used to display the objects which have been dragged from the small panel, and objects on this panel have mouselisteners attached, so that these objects can be moved around on the tpan. I have created another class called creatObj(), and from this class i want to add objects to the tpan. The DisplayTpan class extends a Jpanel, would this be he case for the CreateObj() class? In the CreateClass i have made a call to DisplayTpan t = new DisplayTPan();
t.add(object);
But this does not add the object to the panel, any ideas on how it should be done?
Problem number two i have is say, I have two objects created on that oanel, i now want to draw a line t connect the two objects, this is just simply a call to the drawLine function but how would it be possible to add a ,mouselistener to that line, so it can be extended moved around etc? Any help much appreciated thanks.

As for your first problem...too confusing...too tired...mb tomorrow it will make sense :)
Fer the second...no need to add a mouse listener to each line. There are a couple options that spring to mind, the easiest I can think of is just check to see if the mouse click intersects with any of the lines (bit of geometry).
The second, ugly but a hella allot more accurate and better (me thinks), is to create a bounding box around the line, so the user doesn't have to click right right on the line. I created this bounding box by painting the pixels with a special key to correspond to that line. The other nice thing about this key is the fact that the lookup is quick.
The first step was the create a array of integers the size of the surface. Whenever a line is drawn on the graphical surface, do a corresponding line in the integer array, and create the bounding box inside this invisible array. Now whenever the user clicks just do a lookup into this array and check to see which line was selected...then go to town.
If you want a more detailed explination, i'll post some code later.

Check a checkbox in a jtable in a panel from another panel

I have a panel-> Panel A
where I have some conditions and on that condition I want to check a checkbox in a jtable in another panel ->PanelB
So Panel B has a jtable with one column as checkbox,I want to check/uncheck this checkbox based on some conditions in some other panel A
I have no idea how to do this.Please help.
Thanks

885522 wrote:
How will the change be reflected dynamically if the value changes in some other panel.By code that you write. If you want component X to change based on some changes to component Y, then first you set up a listener which will notify you when changes to component Y take place. In that listener you put code which makes the appropriate changes to component X, based on what happened to component Y.

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

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

How do I place external content in a Collapsible Panel

I figured out how to add a tooltip to a collapsible panel
today, but I am having trouble getting content to load in the
content portion of the panel from another HTML file.
I have created a loader.gif animation that I would also like
to appear in the content panel while the content is loading.
This, like the tooltips, is way above my skill level and any
help would be appreciated. I am starting from using Spry 1.6's
built in features in Dreamweaver CS3 and trying to expand on them
with help using the other spry js found here in the Labs.
Link to
collapsible panel page I am working on
Currently I have all the content panel text in panels. I
would like to copy the content to another file so it can load only
when the panel tab is opened.

Check out this example.
http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
its about updateContent which allows u to place content in
your div.
U could create a little function for it to load content in
your divs.
Example of load indicator + function setup:
the indicator div
<div id="indicatorMessageBoxId"><img
scr="imagehere.gif" /> Please wait loading content </div>
The function (place in <script> tags and place it in
header (dont forget to include SpryData.js)
function updateContent(ele,url){
//U call this by using the command:
updateContent('ID_toLoad_contentIn',url_of_new_content');
document.getElementById('indicatorMessageBoxId').style.display =
""; //this will show the indicator loadimage box
Spry.Utils.updateContent(ele, url, function() {
document.getElementById('indicatorMessageBoxId').style.display =
"none"; }); //this will hide the box when loading file is done
u can attach this function on your collapspannel by adding a
onclick="updateContent('myId','data/page.html');" to the
element.
Hope this helps :)

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>

Search in Page and Collapsible Panels/Tabs

I have a page full of collapsible panels. I want to include a
page search feature. It looks like the page search tool will only
search on open tabs/collapsible panels. Is there a way to search on
closed tabs/collapsible panels?

1. The Safari search-in-page has same behaviour as apples "Spotlight" (the global search in iPad and other).
In the ios6 that apple distributed to my ipad2 the search function DOES NOT search inside words. Neither in ios 5.1.1. But in version 4.3 it DOES search inside words, but apples user-hostile policy prevents us from downgrading ipad2 to ios 4.3.
2. A reset does not fix that issue. Neither clearing History and so on.
THE MAIN ISSUE WITH IOS6 ON IPAD2 IS SLOW PERFORMANCE. The hardware in ipad2 is not dimensioned for bloated software like ios6.
I have now "downgraded" ipad2 to 5.1.1 by getting ANOTHER IPAD2. It is faster in keyboard response and so on than ios6, but not as fast as 4.3. For now I don't care about the search issue. And I will certainly not upgrade ipad2 again to ios6 or anything above.

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

Collapsible Panel not displaying correctly in IE

I have a collapsible panel in a link list that functions
properly in FF, Safari and Opera but completely falls apart in IE 6
and 7. Does anyone know what would cause this or how to fix it? I
thought that swfobject might be interfering with spry in some way
but the problem persisted even after I remove the flash content and
script links.
The site is here:
http://www.madfatter.com/wordpress
and that collapsible panel encompasses the "Related Links" button.
Thanks for any help,

That's exactly what I'm talking about... the page is
completely messed up. Thanks for looking.
However I think I discovered my problem. I had the widget
inside ul tags which seemed to make it disappear in IE. I'm
experimenting now and seem to be finding a solution by moving the
list items around. I'd say I have a solution.

Spry collapsible panel to open from link on same page

Hi guys.
I have a page with about 17 collapsible panels. What I would like to do is in my sidebar have a quicklinks which will 1) anchor down to the relevant panel and 2) open that closed panel.
My first problem I know can easily be fixed with anchor tags which I have done. I will also assume that I can do something like <a href="#anchorname" onclick="" > to solve my 2nd problem, but can someone maybe advise to what the command is to actually open the panel. I have attached a sample below of one of my panels:
var banking10 = new Spry.Widget.CollapsiblePanel("banking10", {contentIsOpen:false});
I have VERY VERY VERY limited experience with Javascript (else I guess this would have been a breeze )
Thanks in advance!

The following is a document called untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
</head>
<body>
<div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="untitled.html?col1=1">Open 1st CP</a></li>
<li><a href="untitled.html?col2=1">Open 2nd CP</a></li>
</ul>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel" style="clear:both;">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content CP1</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel" style="clear:both;">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content CP2</div>
</div>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: params.col1 ? true : false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: params.col2 ? true : false});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Copy and paste the above into your own document to test the code, making sure that all the linked files are in their correct location. The markup contains a SpryMenuBar and two SpryCollapsiblePanel's
Gramps

Closing a Collapsible Panel from another link?

Similar Messages

Maybe you are looking for