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

Similar Messages

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!

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

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 collasible panels: open/closed

I see that it is possible to set the default state for spry
collapsible panels and have had success doing so. However,
is it possible to designate the open/closed state for each
individual panel within a Collapsible Panel Group? I can
foresee times when one or more of my panels may be empty and
therefore don't want to waste space by having them open
automatically.

You can indeed.
Click into any of the panels, and the definition box above it
comes up (something like Spry Collapsible Panel:
CollapsiblePanel[number]) comes up. Click on this box (it's blue
coloured in CS3) - then the properties box at the bottom of the
screen displays the options for display and default state, as it
did when you put in the first panel.
Matt.

Spry Collapsible panel works in Safari, Firefox but not in IE 7 and 8

Revising a page and wish to have the Spry Collapsible Panel load "closed". Never used Spry before but is works ok as mentioned but when page is opened in IE the panel is open and stays open. Clicking does not close it.
The panel tab reads "CLICK To See Matched Rail & Stile Set-Up Blocks".
Did I mention I am not a programmer? Thanks for the help.
http://www.mlcswoodworking.com/shopsite_sc/store/html/smarthtml/pages/set_3pc_roundover_co ve.htm

jonholcombe wrote:
Did I mention I am not a programmer? Thanks for the help.
Jon,
Not a good way to start. You need to have some basic skills to work on websites. OK, if you want to build a bridge for your toy cars to cross a model railway line, you could probably cope, but to build a bridge in the real world, you need real knowledge.
Having said that, I have pulled all of the relevant code from your page to re-construct the collapsible panel and, although the markup would not be the one I would have gone for, the widget works in all browsers, see the code below. This means that the problem lies elsewhere.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://www.mlcswoodworking.com/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="http://www.mlcswoodworking.com/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style>
#collapsiblepaneltab {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     height: 18px;
     width: 645px;
     color: #512b05;
     text-align: center;
     margin-top: 0px;
     padding-top: 0px;
     line-height: 21px;
     font-weight: normal;
</style>
</head>
<body>
<table width="645" border="0">
<tr>
    <td><div id="CollapsiblePanel3pcset" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" id="collapsiblepaneltab" tabindex="0"><img src="http://www.mlcswoodworking.com/shopsite_sc/store/html/smarthtml/graphics4/collapsiblepanelarrow102.gif" alt="" width="8" height="8" border="0" /> CLICK To See Matched Rail & Stile Set-Up Blocks</div>
<div class="CollapsiblePanelContent"><table border="1" cellpadding="0" cellspacing="0" width="645">
<tr>
    <td colspan="4" align="center" valign="middle" bgcolor=""><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="2" color="black"><strong>SET-UP BLOCKS FOR MATCHED RAIL AND STILE BITS</strong></font></td>
</tr>
<tr>
    <td align="center" valign="middle" bgcolor="#cccc99" width="55"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font color="black"><strong>Item</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font size="2" color="black"><strong>Set-Up Block Profile</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99" width="55"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font color="black"><strong>Price</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99" width="58"></td>
</tr>
<tr>
    <td align="center" valign="middle" width="55"><font size="1"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" color="black"><strong>#9745</strong></font></font></td>
    <td align="center" valign="middle"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Set-Up Block for round over matched rail & stile bits</font></td>
    <td align="center" valign="middle" width="55"><font size="1"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" color="black"><strong>$9.95</strong></font></font></td>
    <td align="center" valign="middle" width="58"><a href="http://www.mlcswoodworking.com/cgi-mlcswoodworking/sb/order.cgi?storeid=*16f8a8beab2fd058071ebc4eb5&dbname=products&sku=%239745&function=add"><font size="2"><img src="../graphics/orderbut.gif" alt="" width="58" height="17" border="0" /></font></a></td>
</tr>
</table>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3pcset", {contentIsOpen:false});
</script>
</body>
</html>
To help you any further would take me way outside the scope of this forum, but if you were to employ me to untangle the mess, I would start afresh.
Gramps

Question about Spry Collapsible Panel

Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!

Definitely possible.
You should first import the image into DW.
Insert > Spry > Spry Collapsible Panel
It'll insert a demo panel.
You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
You'll basically be removing 'TAB' from here to replace it with your img src tag.
Your HTML should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapsible Test</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel.

Spry collapsible panel stays open in Internet Explorer.

I'm trying to use the spry collapsible panel to hide and show inormation, and it will not stay closed. I've used the default closed option in the properties panel, and made sure the eye in design view is closed. Please give some suggestions for correcting this problem.

The out-of-the-box SpryCollapiblePanel works like a charm.
This means that you have altered the HTML, CSS and/or the JS.
Because we are not privy to what you have done, it is not possible to help you find a solution.
I recommend that you upload the site and supply a link to that site.

Spry problems in IE, menus stuttering when opening and closing

I just intserted some spry collapsible panels into a dreamweaver page I am developing but when I preview the pages in IE8
the spry menus stutter and shake when opening and closing.
Does anyone have any idea what is causing this?

alexk2077 wrote:
I just intserted some spry collapsible panels into a dreamweaver page I am developing but when I preview the pages in IE8
the spry menus stutter and shake when opening and closing.
Does anyone have any idea what is causing this?
That is strange, I just did the same without any problem.
I did use the original Spry files (JS and CSS).
How about you, are you using the original files or are you using your own modified files?
Ben

Spry Collapsible panel and ul

I've got 5 spry collapsible panels in a page, each panel with
<ul>'s inside them.
Now whats happening is when you click to open a panel the
<ul> is appearing and overlapping all the other panels while
the panel is opening, rather than gradually appearing as the panel
opens.
Is there anyway to stop this. It works spot on in
firefox.

HI Littlened,
First of all, it's best to use the last version of the Spry
files (1.6), I see you are using 1.4. You can download the latest
version of the Spry Framework
here.
The problem is caused by one your CSS classes:
.navbar_ci ul li {
position: relative;
IE has problems with relative positioned elements; if you use
them, their parents must also be relative positioned; but if you
don't need this, it's best to avoid using it.
--Florin

Spry Collapsible Panel question

I have a file online that uses a Spry collapsible panel. It can be viewed here. It works beautifully. For one exception. The logo is supposed to be up some 10 pixels or so. The CollapsiblePanelTab is occupying the space.
So I took the CSS for the CollapsiblePanelContent and moved it up 1em <margin-top: -1em;>. That put my logo where it should be. Problem is that when I do this the transparent portion of the logo covers most of the "Hide / Show Logo." It leaves only a sliver of the right of the tab. This file can be viewed here.
The logo consists of the image and the bar underneath it. Yes, I could crop the image down to the central part, making it narrower, but I do want the bar which is wider. And I want the bar to disappear when the Spry is activated so that rules out having it as a separate image..
Even better I would like when the panel is open for the "Hide / Show Logo" to be just above the bar. I tried that and it threw everything out of kilter.
Any suggestions! Thank you in advance for any responses.

Beth,
   Thought of it, did it, didn't work.
   If I remove the logo from the HTML of the page and instead place it in the "background-image" of the CollapsiblePanelContent CSS I get disastrous results. The panel collapses (because there is nothing in the DIV) and the CSS placed background image disappears. Following this thread of thought I could try a much narrower transparent image with nothing in it, just the transparency, and see how that might work. This would keep the DIV open to the desired height. Then I could place the actual, true image in the "background-image" of the DIV CSS.
   For the moment I am going to see if someone perhaps comes up with a solution other than this. The chief reason is that I would lose my dynamic linking of the PSD to the placed image. This file will be a template of thousands of pages spanning many years so the logo will change appropriately.
   This method, of using the image in the CSS itself, also causes some alignment problems within the DIV. My background-image does not center properly. It does so when placed in the HTML of the document.
   Getting back to the original problem, which seems to be the transparency of the image and its width, I don't see any reason why I could not break my image into two pieces and place each one within the CollapsiblePanelContent. Each image in their own DIV contained within the panel content. I could then make the logo part separate from the bar but still have the bar collapse. The logo portion could then be much narrower. I think I will try this method and see what transpires. I could then keep my dynamically linked images. Theoretically!!!
   Thanks for letting me bounce ideas off a fellow thick skull. Not seeing the trees for the forest and all that.
Regards,
Wayne

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

Spry Collapsible Panel at bottom of page - how to make the browser scrolldown automatically

The question is -
i have a collapsible panel at the bottom of my page that I'm using as a footer menu.
It is 200px tall. The visitor clicks on "FIND OUT MORE", then the panel opens 200px tall.
I want the viewing area of browser to focus on the content of this panel, and automatically scroll down 200px to accomodate the new real estate at the bottom of the page.
Now they click on it, but then have to manually scroll down.
How can I do this? What do I add to the Spry Collapsible Panel js scripts?
I tried using a tag at the bottom of the 200px but can't get it to work correctly.
Dreamweaver CS5.
thanks

I have been closing IE and reopening it for 7 months now. I don't of any other way to reload an applet.
Jason

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 - open and closed default question...

Similar Messages

Maybe you are looking for