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

Similar Messages

Spry collapsible panel with spry data

I have created a spry collapsible panel and wanted to put
srpy data in it, to dynamically load.
i also want to hide the entire panel if no data is available.
It will show the data, but the click to open/close does not
work.
here is the code.

I have made some progress, thanks, however im still getting
some odd formatting issues, for example, the 1st panel shows with
different design to the rest of the panels.
this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}"
class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
{amended}</h1></div>
<div
class="CollapsiblePanelContent"><strong>{message}</strong>
Added by <strong>{owner}</strong> on
<strong>{added} </strong>(REF:
<strong>{id}</strong>) <a href="/service/index.asp"
target="_self">View full details</a></div>
</div>
<script type="text/javascript">

</script>
As you can see, I am inserting {ds_RowID} in the variable
name, in order for the panels to operate independantly, however
have I coded it correctly?

Spry Collapsible Panel animation not working

I've inserted a spry collapsible panel into a web page and it works fine when I preview it. But when I upload it to the server the animation does not work in both Safari and Firefox (haven't tried any other browsers). The panel is just static, showing the tab and the panel is open showing the content. It is supposed to be closed by default.
I've added CSS styles but I've also tried it with the default CSS and it didn't work then either.
Both the .css and .js files that were saved in the SpryAssets folder have been uploaded to the server in the same location as the webpage.
I'm working on a Mac and CS4.
URL is www.alpinism.com/New/about.html

Thanks. That didn't resolve my issues unfortunately and the corrections it was suggesting started interfering with other functions on the page so I've gone back to square one, deleted the Spry collapsible panel and inserted javascript from http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm that does the same thing and seems to work in Safari and Firefox. Just need to check in IE but I expect this is going to be the best solution for me.

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 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

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

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

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

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

Spry collapsible panel fix for IE

hey
anyone out there knows how to fix the spry collapsible panels to work properly on IE ?
Firefox is perfect but they appear and stay open even when clicked
how could i make them appear closed and open only if clicked, close again when clicked to close? just like firefox
( http://www.pupr.edu/template )

Remove the empty element
<ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MAINbtn"><a href="index.asp">Deanship</a></li>
<li class="MAINbtn"><a href="research.asp">Research</a></li>
<li class="MAINbtn"><a href="faculty.asp">Faculty</a></li>
<li class="MAINbtn"><a href="labs.asp">Labs</a></li>
<li class="MAINbtn"><a href="events.asp">Events</a></li>
<li class="MAINbtn"><a href="students.asp">Students</a></li>
<li class="MAINbtn"><a href="Programs2.asp">Programs</a> </li>

<li class="MAINbtn" style="margin-left:400px"><a href="interested.asp">Interested ?</a></li></ul>
and remove the unused CollapsilbePanel1 constructor
<script type="text/javascript">

Gramps

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

Spry Collapsible Panel Rotation

I have been looking through many tools that have came with Dream Weaver and the spry collapsible panel would look great in my site but im having trouble putting it in the way I would like it to look. Im trying to insert the spry so that the tabs are read verticaly and open horizantaly with all of its contents being able to be read normaly instead of verticaly. What would I have to edit to to do this?

To convert the Spry Collapsible Panel would require a lot of changes in the JS. It is therefore better to find a ready-made solution such as here http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
Gramps

Spry collapsible panel - panel (link) border issue

Hi folks. I'm new to spry and I'm inserting a spry collapsible panel into a web page in Dreamweaver CS4. It all works fine but i have this very ugly border around the panel tab (the link that you click to open the panel). In frefox its a dotted line and in safari its a blue border. I havent had change to check this in other browsers/platforms. (I'm using a mac) I've read that its an accessabilty thing? which can be overcome in a different way. I have to get rid of this border as it completely spoils the design of the site..
Anyone know how to remove this?
Thanks in advance :-)

Hi, I asked that same question a minute ago, then I saw your solution you wrote to someone else previously.
Works for me too!
Thanks for solving it!
Here is another question if you can help...
I currently have ">>read more" at the end of the text in my top content tab panel, so the user knows to click and read more in a lower panel.
I want that ">>read more" text to disappear when it is clicked and lower content section is open.
And then a "read less" to appear so user knows to click the top tab content to close the bottom panel.
Can this be done using this Spry Collapsible technique?
Thanks!

Spry Collapsible panel and ul

Similar Messages

Maybe you are looking for