Spry Collapsible Panel Error in IE

Hi,
Up until last week my collapsible panel was working fine in
IE 7, but now it has stopped working. Originally it was hideen
until a user clicks a link whereby it would be displayed. This is
working fine in firefox but now in IE7 it appears as default and
will not move when clicked. An error message is displayed saying "
'Spry' is undefined " appears. I have made sure all links to .js
files are correct. I am thinking it must be something to do with
IE7 (as usual) as this error even appears on the sample page for
collapsible panels on the adobe spry site. Could anyone shed some
light on this problem.
Many Thanks
Woodey

That error usually occurs when the page isn't actually
loading the JS files. I know you said you verified the JS paths,
but have you actually tried loading the JS files directly into IE7
to see if it is getting some access error, or if the JS file on
your server is corrupted?
--== Kin ==--

Similar Messages

Spry Collapsible Panels Safari Error

I'm working on a website with multiple collapsible panels on some of the pages. I have the Javascript set so that they automatically load closed, which works in Firefox and Chrome, but not in Safari. There, they load open. They will close when clicked on, so the script is working on some level.
This website is not live yet, so I can't send a link. I have experience with html and css programming, but Javascript is new to me and I'm a bit afraid to mess around with it too much! I haven't changed anything in the Javascript (from what is automatically loaded when you insert a Spry item) besides making the first "contentIsOpen" equal "false." That changed it in Firefox--do I have to adjust other pieces in the js code specifically for Safari?
Any other thoughts as to why Safari isn't loading the collapsible panels properly?
Thanks!

The out-of-the-box Spry Collapsible Panels work in all modern browsers including Safari. If they do not work for you, then you have altered something that upset the apple cart. At this stage you are better able to see what you have done, i.e. untill you give us a link to your site.
Incidently, do not touch the JS, there is no need to do that. If you want all panels closed to start with, all you need to do is say so in the constructor as per
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", { contentIsOpen: false });
Also see here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
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

SPRY Collapsible Panel problem in Chrome

I have a SPRY Collapsible Panel in a nested template that is not working properly in Chrome.
Here is an example:
1) Go to http://www.realestate-bigbear.com/search/map-search.html
2) In the "search big bear real estate" area... click on the [+] to expand the "QUICK SEARCH LINKS"
3) The panel opens, sometimes it works, sometimes the bottom is cut off (it is supposed to end with a red bar like at the top). If you move your mouse down a column, you will reveal the missing part
3) Now, if you choose one of the links -- lets say, the first one [Big Bear Lakefronts], you will be taken to a similar page, but to the #search-results anchor. If you again try to reveal the panel with the [+] things only get worse. Sometimes just the top red bar is revealed, sometimes 170px... I cannot figure it out.
The panel seems to be working fine in IE and Firefox, but not Chrome.
Please help,
Thanks in advance.

Using Chrome Version 23.0.1271.64, I could not replicate the problem.
During my analysis, I could not find any problem that could be associated with the proper workings of Spry. However, when I look at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.realestate-bigbear.com%2Fsear ch%2Fmap-search.html, there seem to be a number of issues that could send your version of Chrome into a frenzy.
After you have fixed the above errors and the problem persists, please come back here and I shall have a more in-depth look.

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

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 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 Problem with Safari

Hi my Spry Collapsible Panel looks great in Firefox, Camino, and IE, but the top border, which I am using as a line to divide items in the list, and which I have specified in the CSS page, doesn't show up in Safari and Google Chrome. Just nothing, and everything else works. Any help would be GREATLY appreciated!   My CSS page reads as follows:
.CollapsiblePanel {
    color: #000000;
    border-top-style: solid;
    border-top-width: 0.5px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
#apDiv3 #CollapsibleLINE {
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: #330099;
.CollapsiblePanelTab {
    margin: 0px;
    padding: 20px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: #3366FF;
    border-top-width: thick;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-top-color: #FF00CC;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
* you should never put any padding on the content area element if you plan to
* use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
* The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
.CollapsiblePanelContent {
    margin: 0px;
    padding: 0px;
.CollapsiblePanelTab a {
    text-decoration: none;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
    color: #666666;
.CollapsiblePanelFocused .CollapsiblePanelTab {
#apDiv1 .overlay {
and my page looks like this:
<link href="untitled.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style type="text/css">

div:active, div:focus, div:hover {
    outline-style: none;
    -moz-outline-style:none;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" >
<style type="text/css">

</style>
<div id="apDiv5"><img src="IMAGES/logo3.jpg" width="843" height="83" /></div>
<div id="frontphoto"></div>
<div id="apDiv1"><img src="IMAGES/Backgound.jpg" alt="back" width="1032" height="516" /></div>
<div id="apDiv2"><img src="IMAGES/overlay.png" alt="Overlay" width="174" height="720" /></div>
<div id="apDiv3">
<div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">photography</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">portraits</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">events</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">landscapes</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">experiments</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">print</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">posters</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">books & packaging</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">invitations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">motion</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">websites</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">animations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">about</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">honors</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">background</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">contact</font></div>
    <div class="CollapsiblePanelContent">
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        
        <tr>
          <td width="114"><a href="mailto:[email protected]" style="text-decoration:none"><font color="#333333" size="2" face="Georgia, Times New Roman, Times, serif">email</font></a></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">202.321.4248</font></em></td>
        </tr>
      </table>
    </div>
</div>
</div>
<script type="text/javascript">

</script>

I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.

Spry Collapsible Panel Error in IE

Similar Messages

Maybe you are looking for