Collapsible Panel Stutters on Opening

My collapsible panel is working great in IE 6 & 7, Safari
(Mac & PC), Opera (Mac & PC), Firefox PC, but not in the
Firefox Mac browser. When you click on the tab to show the content
panel, the content flashes quickly, then animates out the way it is
supposed to.
User Lee Goolsby had a similar problem, but it was thought to
be due to a missing DOCTYPE declaration.
My page
specifies the DOCTYPE, so that can't be the problem. This issue is
most visible when there is a lot of content showing. If you open
the bottom tab on my test page, then the top one, it should leap
out at you.
Apart from renaming it, the only change that I've made to the
.js file was to change the "duration" on line 346 from 500 to 250
to speed it up.
Firefox does another strange thing -- if you leave the
<tabindex="0"> in the html, it places a blinking insertion
point in the <div> that has focus.
Any ideas?

Diana, thanks for your prompt response.
I am running version 2.0.0.6, which I believe is the latest.
Oddly, on my MacBook I have v. 2.0.04 and the page displays
properly. Both FF installations have the Developer's Toolbar
installed, but no other settings have been customized.

Similar Messages

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

Multiple Spry Collapsible Panels with different Open-Close defaults

Hello,
The site I am working on has a page with (5) Spry collapsable panels. (4) are set default open, (1) is set default closed.
I am trying to get (3) Open, and (2) closed. However, setting a second panels default to closed gives a syntax error.
Anyone know how to make it work, if it can at all?

Remove the closing parenthesis after "CollapsiblePanel5". It should be like this:
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen: false} );

My spry collapsible panel will not open or close

I've been working on a website in dreamweaver cs5 and im trying to add a collapse panle with text feild and submit button to it so people can signup to get more info and be apart of the email list. i have the animation button checked in the properties and the default postion set on closed, but when i go to live veiw or test it on the net it is in the open position and will not animate.... Any help out there....

Have a look at these samples http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
Gramps

Spry Collapsible Panels - Way to set them open only once per visit?

I'm wondering if there is a way to set a Spry Collapsible
Panel to be automatically open on the initial loading of the site,
but as people navigate around the site and back and forth from the
home page, to be able to have it closed on subsequent visits to the
home page.
Right now I have a collapsible panel set to OPEN by default
when someone first hits the home page, but if they navigate around
the site and then click to the home page again, they get the panel
open again. Naturally, that will end up annoying people.
Any suggestions?
Thanks in advance!
Sara

Flash local shared object can help with this. Here is some info:
http://www.bestflashanimationsite.com/tutorials/4/
http://www.permadi.com/tutorial/flashSharedObject/index.html
http://www.kirupa.com/developer/mx/sharedobjects.htm
Best wishes,
Adninjastrator

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 Panel open on new page

I am using the Spry Collapsible Panel as a sidebar menu. I
would like to be able to click on a menu link, which takes me to a
new page with the relevant panel staying open on that new page. Is
this possible? If so, how do I make it happen? I am not great with
codes and other jargon, so if someone could help me with "exactly"
what I need to do, it would be most appreciated.
Many thanks,
Caryl

First Include SpryDOMUtils.js in your file;
Than add this script in the head of the page, or include it
in a script.
<script language="JavaScript" type="text/javascript">
//please note, that my SpryDOMUtils.js is packed so i have a
the extra onUNLOAD listener in the code below.
// * Declare vars;
var Spry;
if (!Spry.Utils) Spry.Utils = {};
var coll1; //declare vars outside the function so u can use
then tab panel everywhere
// * This is a addition to the SpryDomUtils.js U can include
it under line #262
// Or leave it in a javascript external / internal
// This function will fire anything when u leave the current
page.
Spry.Utils.addUnLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('unload', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('unload', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onunload', handler);
//This function will be used by cookie to check if the value
is allready in the cookie, if so it returns it position
Spry.Utils.CheckArray = function(a, s){
for (i=0; i<a.length; i++){if (a
== s)return i;}return null;
* SPRY COOKIE; HOW TO USE;
* constructor:
Spry.Utils.Cookie(type,string,{name:'cookie_name',path:'/',days:'number'};
* TYPE:
* - create : this creates *saves* the cookie
* : Spry.Utils.Cookie('create','string or
array',{name:'Spry_Cookie'});
* - get : this will return the cookie in array format
* : Spry.Utils.Cookie('get','',{name:'Spry_Cookie'});
* - destory: this will destroy the cookie
* : Spry.Utils.Cookie('destroy','',{name:'Spry_Cookie'});
* - add : this allows u to add value to the cookie with out
creating a whole new string
* it will place the add value behind the older cookie
values, it checks if the value is allready in the cookie,
* if it is, it will NOT add it in the cookie.
* STRING:
* This is the data what u want to store in to the cookie, it
can be an Array or a normal string / var
* OPTIONS:
* - name: : this is the name of the cookie so u can identify
it
* - path: : optional path for the cookie;
* - days: : the amount of days for the cookie to be saved.
Spry.Utils.Cookie = function(type,string,options){
if(type == 'create'){
var expires='';
if(options.days != null){
var date = new Date();
var UTCString;
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toUTCString();
var thePath = '; path=/';
if(options.path != null){
thePath = '; path='+options.path;
document.cookie =
options.name+'='+escape(string)+expires+thePath;
}else if(type == 'get'){
var nameEQ = options.name + '=';
var ca = document.cookie.split(';');
for (var i=0; i<ca.length; i++){
var c = ca;
while (c.charAt(0)==' '){
c = c.substring(1,c.length);
}if (c.indexOf(nameEQ)==0) return
unescape(c.substring(nameEQ.length,c.length)).split(",");
}return null;
}else if(type == 'destory'){
Spry.Utils.Cookie('create','',{
name: options.name
}else if(type == 'add'){
var c = Spry.Utils.Cookie('get','',{name:options.name});
if (typeof string == 'object') {
for (i = 0, str; str = string
, i < string.length; i++) {
if (Spry.Utils.CheckArray(c, str) == null)c.push(str);
}else{
if (Spry.Utils.CheckArray(c, string) == null) c.push(string)
Spry.Utils.Cookie('create',c,{name:options.name});
// * check if we have a panel to set from cookie value
// * becouse we are using spry dom we can also include the
tab construction within this function.
Spry.Utils.addLoadListener(function(){
//becouse cookie GET returns a array we have to add a var
before it to store the data
var tab = Spry.Utils.Cookie('get','',{name:'tabs_history'});
coll1 = Spry.Widget.CollapsiblePanel('ID_OF_PANEL');
if(tab == "open")coll1.open();
else coll1.close();
Spry.Utils.addUnLoadListener(function(){
var classnames =
document.getElementById('ID_OF_THE_PANEL').className;
if(classnames.match("CollapsiblePanelOpen"))var tab =
'open';
else var tab = 'closed';
//destroy old cookie (i want a clean cookie)
Spry.Utils.Cookie('destory','',{name:'tabs_history'});
//setting the new cookie value
Spry.Utils.Cookie('create',tab,{name:'tabs_history'});
</script>
The best way to copy the script is to press the | Quote |
button and copy it out of th quote becouse there are some taggs
used by the forum sofware in it.
If u have placed it in your header u need to do few edits.
im using coll1 as collaps variable name (constructor) if u
use a other, change it to yours.
also change coll1 = new
Spry.Widget.CollapsiblePanel("coll1"); to your desired ID
This will solve your problem ;)
To see it in action on tab panels (where i created it for)
http://www.3rd-eden.com/Spry-it.com/examples/restyled_tabs/
This is option 1. If u want 1 panel to be open on your page
if the user want it. If u want to open a random panel on click
function, u can use:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
SpryURLUtils.js
This will read param's that u send true a url. and responds
to it. U can see it in action with the tab panels in the example
above.
add this in the header of your page; (also include the
SpryURLutils.js)
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
and change your constructor like this
<script type="text/javascript">
//sets default as open.
var ac1 = new
Spry.Widget.CollapsiblePanel("myCollapsiblePanel",{contentIsOpen:(params.ac1open
? params.ac1open : true));
</script>
U can add this behind a url to activate it:
<a href="testpage.html?ac1open=true" > test page ac1
open </a>
true is open, and false is closed. ;)
I hope this helps :D

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

Make a spry collapsible panel open on hover??

Hi All,
I'm trying to play with the Spry Collapsible Panel and would
like to have it open on hover but not on the on click, I've
attached the standard js code Dreamweaver produces, and would be
very grateful if you could highlight what needs to be
changed,---

http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
See the section titled Open panels programmatically
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"miachu" <[email protected]> wrote in
message news:fvihb0$miq$[email protected]..
> hi there,
>
> did you ever find a solution to this dreamweaver
collapsible panel problem? i
> am having the same problem...i need it to open on hover
instead of click. it
> makes so much more sense for them to have it on
hover/roll over!
>
> help would be much appreciated!
> thanks.
>

Spry collapsible panel open by default

Hi there,
I've done a couple of sites where the left nav bar is a
series of
collapsible panels, each one housing links to products within
a specific
line. Would it be possible to insert code somewhere to get
one of the panels
open by default when you open a certain page, ie if you open
the 'suncare'
page the 'suncare' panel is open on load. I read something
about this on the
Adobe documentation but when I tried it it did't work.
It needs to be code somewhere on the page that interacts with
the spry
panel, I can't put it on the panel itself as I'm using a SSI
to insert the
nav bar into dozens of pages.
Many thanks...

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

Collapsible Panels with one default open

I'm using the collapsible panels widget, I was wondering if
there was a way to have one panel open while the others are closed
by default. I know it's possible with the spry accordion, but is it
possible for the collapsible panels as well?
Thanks!

Yes it is possible and it has a different look and feel to
it.
An accordion panel can only have one panel open at a time
whereas the sliding panel can have more open or closed.
Try something like this:
cpg = new
Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", {
contentIsOpen: false });
cpg.openPanel(4);

How to make Spry Collapsible Panels open one at a time?

Hello,
I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
I was told you would probably help me find the right answer by Hans-g!
Thanks again!

How to open multiple collapsible panels?

http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
This "Open Panel with Link" sample opens only one panel, but
I'd like to open multiple collapsible panels at the same time with
one button/link click.
I'm trying to use a class name "Collapsible Panel" instead of
the id name "cp1, cp2,cp3,cp4, ....", but I'm stuck on how to
open/close by class name.
If anyone knows how to do it, I'm appreciated to hear it.
Thanks,
(^_^)/

I'm not sure if this is what you're going for, but here is an
example of using a text link to open multiple collapsible panels:
<a href="javascript:;"
onclick="CollapsiblePanel1.open();CollapsiblePanel8.open();">Click
to open</a>
<a href="javascript:;"
onclick="CollapsiblePanel1.close();CollapsiblePanel8.close();">Click
to close</a>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS, it
affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<div id="CollapsiblePanel8" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS,
it affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel8 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel8");
</script>

How to force page to scroll when collapsible panel is opened by link

Hi,
I have seen similiar questions asked but not answered, so maybe there isn't away to do this.
I have numerous collapsible panels going all the way down the page, actually I just formed a Collapsible Panel Group. They are opened by a list of links at the top of the page.
This is an example of a link...
<li><a href="#CollapsiblePanel14" onclick="cpg.openPanel(13);">AKC CGC & TDI Testing</a></li>
And this is the javascript at the bottom of the page...
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1", { contentIsOpen: false, duration: 800 });
When a link to one of the lower panels is clicked, I would like the page to scroll down so when the panel opens all of the content is within view.
Is there any way to do this?
Thanks
Dennis

On line 431 of your JS change
this.content.style.height = this.toHeight + "px";
to
this.content.style.height = "auto";

Collapsible Panel Group - automatic close/open?

Is there a way to set it so the Spry Collapsible Panel Group automatically closes an open panel when you select to open another one?
Thank you.

Uhm... I think you should swap the collapsible panel group for a Spry Accordion: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

Collapsible Panel Stutters on Opening

Similar Messages

Maybe you are looking for