Accordion Spry panel sizes

CS3 Accordion spry (can't see version in html) and I want to
make 1 of the panels a different size that the others. I have
already used the useFixedPanelHeights: false, defaultPanel: -1, so
they all close. I have text in the first panel and want to set the
height just to fit the size?

Hi,
to find out which Spry version do you have, open the
SpryAccordion.css file or the SpryAccordion.js file and look at the
beginning of these files. You should see there the Spry pre-release
version.
You probably have Spry 1.4 because this behavior works only
on spry 1.5.
An working sample you can find
here.
Diana

Similar Messages

Accordion Spry default all panels closed

How do I setup the Accordion Spry to have all panels closed
when my page initially loads? I don't want any of the panels to be
set as the default opened panel and for the browser to select the
panel they want open first.

I have installed Spry 1.6.1.
Here is my code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
defaultpanel: -1 });
Still opens the first panel upon loading my page with the
Accordion spry. There must be something else to be
configured?

Accordion Spry is defaulting to all tabs open. What's wrong?

Hi,
I had my accordion spry working perfectly a week ago. Then, I tried to add another panel at the top, and all of a sudden all tabs default open. I'd like them to go back to all being closed on default. I've been over my coding again and again for a week and can't figure out what I did wrong. I can get the first panel to close on default by changing the default panel to -1, but that only makes the other panels look odd for being open. Here's my code shortened to the important parts:
<div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love...
(rest of content + 5 more tabs)
</div><script type="text/javascript">

</script>
my url is: http://www.7elementsBR.com/courses
Can anyone help me figure this puzzle out? Thank you.

C F McBlob wrote:
There are SEVERAL paragraph tags that are "unclosed". That can throw the whole Spry function off.
No, it can't. The closing tag of a paragraph is optional. The reason it's triggering an error in the W3C validator is because an XHTML doctype is being used. Many of the other "errors" are caused by the JavaScript being read by the validator as though it were HTML.
However, you're right about unclosed tags. The problem with the accordion is being cause by incorrectly nested divs.
This is how the content div should look:
<div class="content">
    <h1>Courses (Fall 2013) </h1>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love being in a class with your friends/family learning exactly what you like learning and on your schedule? You can customize what materials you use, how often you come, the time you come, studying only abstract or realism, maybe a little bit of everything? Price is determined by your selections.
          <p><a href="customcourse.html">Custom Course Form</a><br />
        </div>
        </div> 
        <div class="AccordionPanel">
        <div class="AccordionPanelTab">Basic Art (ages 6 - 12)</div>
        <div class="AccordionPanelContent">
          <p>Mondays 4:30 - 6pm (No longer accepting Fall registrations.)     </p>
          <p>Students will get to sample these various mediums: pencil, charcoal, soft pastel, oil pastel, printmaking, watercolor, and acrylic painting. We will explore all 7 elements of art in order to create a good foundation for our young artists. Students are welcome to bring papers or canvas to create on, or feel free to visit the <a href="shop.html">shop</a>. All mediums are available for use and are included in the price. Course begins August 12.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Drawing (ages 6+)</div>
        <div class="AccordionPanelContent">
        <p>Thursdays 4:30 - 6pm (No longer accepting Fall registrations.)</p>
          <p>Students will learn the 7 elements of art through various drawing tools including: pencil, charcoal, soft pastel, and oil pastel. This is a class based on realism first, and finding your own style as an artist later. Students are welcome to bring papers to draw on, or feel free to visit the shop. All mediums are available for use and are included in the price. Course begins August 15.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </p></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Open Studio </div>
        <div class="AccordionPanelContent">
        <p>Monday - Friday, 12 - 4pm (Call ahead of time @ 225.366.7442)</p>
          <p>This course is all about the artist as an individual. Instruction is not provided, and artists may come and go as pleased. Weekly critiques are Fridays 3 - 4pm and are not mandatory, but allow for feedback from multiple artists and provide answers for you to grow as an artist. Artists may work with any medium, and may choose to rent media for $5/hour. The studio is not open on 1st Fridays, holidays, Easter week, Halloween week, Thanksgiving week, or Christmas week. </p>
          <p>Pricing: $5/hour or FREE for current students</p></div>
      </div>
            </div> 
            <script type="text/javascript">

</script>
    
    <p> </p>
    <p><a href="referafriend.html"><img src="images/refer.gif" alt="refer a friend" width="228" height="64" longdesc="images/refer.gif" align="right" /></a></p>
</div>

The unclosed paragraph tags should also be fixed, but what's causing the problem with the accordion is incorrectly nested divs.

Accordion Spry Widget default loading behaviour

Am using the accordion spry widget to display some
spring/summer courses and
I need all panels closed when the page first loads. I've
tried to find the
relevant code, but have not been successful in changing it to
make this
work. If I change the behaviour of the 'this.defaultPanel'
the whole
accordion stops working. How can I change the accordion
behaviour to have
all panels closed at page load?
Thanks for any help.
Marianne

Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
<!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>Lorem Ipsum : about us</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="css/main.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style></head>
<body
onload="MM_preloadImages('images/menu_images/nav_a2_f2.jpg','images/menu_images/nav_a3_f2 .jpg','images/menu_images/nav_a4_f2.jpg','images/menu_images/nav_a5_f2.jpg','images/menu_i mages/nav_a6_f2.jpg')">
<div id="homebg">
<div id="spry1">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry1.jpg" width="747"
height="35" alt="Vision / Purpose / Mission" /></div>
<div class="AccordionPanelContent">
<table width="744" height="179" border="0">
<tr>
<td width="95" height="175"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Vision:</strong>
Lorem Ipsum Dolor</p>
<p><strong>Purpose:</strong> Lorem ipsum
dolor.</p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry2.jpg" width="746"
height="34" alt="Guiding Principles / Core Values"
/></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Integrity</strong><br
/>
Lorem Ipsum</p>
<p><strong>Understanding</strong><br
/>
Lorem Ipsum</p>
<p> <strong>Innovation</strong><br
/>
Lorem Ipsum</p>
<p><strong>Perseverance</strong><br
/>
Lorem Ipsum</p>
<p><strong>Simplicity</strong><br />
Lorem Ipsum</p>
<p> <strong>Lorem
Ipsum</strong></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry3.jpg" width="746"
height="34" alt="Lorem Ipsum" /></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Lorem
Ipsum</strong><br />
<br />
<br />
<a href="mailto:blahblah</a></p>
<p><strong>Lorem Ipsum</strong><br
/>
<br />
<br />
<a href="mailto:blahblah"</a></p>
<p><strong></strong><br />
Manager<br />
9<br />
<a href="mailto:blahblah</a></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
</div>
<h6></h6>
</div>
<div id="text">
<h1>about us
<p>Lorem Ipsum </h1>
<p> </p>
</div>
<img src="images/bg_images/bg_interior.jpg" width="1374"
height="931" /></div>
<script type="text/javascript">

</script>
</body>
</html>

Combining image and text in accordion content panel

Hello,
I'm having difficulty displaying image and text together within an accordion content panel. What I need is a thumbnail photo of a staff member plus a short bio. I've put a panel together so it displays as needed in Live View, but not in IE8, Foxfire8, or Chrome. I'm using Dreamweaver 5.5, Spry 1.6.1, Windows 7.
Here's the code for the panel that includes an image not displaying:
<div class="AccordionPanel">
<div class="AccordionPanelTab">Stan Swiercz, Training Manager</div>
<div class="AccordionPanelContent">
<div class = "PanelImage"> <img src="/images/StanSwiercz.jpg"/></div>
Bio text goes here</div>
</div>
Here's a link to a test page (ignore funky color variations, still settling those). The panel that is set to open should display an image floating left with text wrapping, as it does in Live View.
http://cet-training.org/Test%20folder/people.html
I''ve double-checked documentation, help, and done searches, but can't find any information about what should be an easy thing to do. Any help out there?
Thank you very much,
George

The location of the image is http://cet-training.org/Test%20folder/images/StanSwiercz.jpg (click the link to see the image)
This is the markup from your document <img src="/images/StanSwiercz.jpg"/> which means that the image is located in the images folder which is located in the root directory.
Hence the image cannot be found by your document.
The following are possible solutions, please choose one only
change the location of the images folder to reside in the root directory
delete the leading slash from the link as in <img src="images/StanSwiercz.jpg"/>
change the link to an absolute value as in <img src="http://cet-training.org/Test%20folder/images/StanSwiercz.jpg"/>
Gramps

Nested accordion spry

Can someone please give me some direction as to how to do a nested accordion spry with different tabbed panel widths? Thanks

Never seen that done with an accordion. Why would you want different widths? Not sure what you mean by "nested" as well. I've placed accordions inside sidebars, inside Spry tabbed panels, and even in another accordion. You simply have to make a few CSS changes so it doesn't conflict with other Spry elements (change IDs).

How to hyperlink to particular spry panel tab

I have spry panel which has 3 tabs. Everythings works fine.
When I load the page which has spry panel, the content of the
first tab is shown which is fine.
Now I am trying to make a link from another page which points
to the page which has spry panel. I can easily put the link but
what I want to do is when the link is clicked I was show the
content of third tab instead of the first tab. How do I do this?
Can someone please help me?

Meant to do? Meant to do anything you can get it to do
Put this in the head of your document:
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
</script>
Link the SpryURLUtils.js per the first line in my quoted code.
The second script bit above calls the variable and sets up a function. Don't mess with it, just use it.
You'll have material like this in the foot of your page, just before the closing body tag:
<script type="text/javascript">

</script>
These help to make your widgets work. Don't worry if you don't have what I have exactly; I copied this from one of my sites. But the
var TabbedPanels1 = etc. etc. line you WILL have. You will also have a second one if you have TWO sets of tabbed panels on your page. The first should be TabbedPanels1, the second will be TabbedPanels2, etc., etc.
Here's a quote from my site, showing a "call" or link to widgets in other parts of the page. I set my whole site (except more recent pages) as ONE page, so this should be similar to how you set up your call:
<div class="image_gallery">      <a href="?tab=5&panel=3#TabbedPanelsTab&Accordion1" title="Disappeared Children" target="_self"><img src="images/homeArgentina.gif" alt="Argentina website" /></a><br />
      <em>Website (early project):<br />
      “Disappeared Children: We Search for Them”</em></div>
Note the <a href... tag. You don't need a page name, because you are staying on the same page. But this calls tab 5 AND panel 3. If you look at my page www.gravenimagedesign.net, look for the fourth image from the left on the top row on the "home" screen. Click on it, and see where it takes you.
Remember that all is based on zero being the first tab, 0, 1, 2, 3, etc.
Oops, gotta go. Let me know if you need more help with this. It is something that I have to dig back into my own code to remember.
Best,
Beth

Using Spry Panels & Browser BackButton

Hi,
I successfullly programmed opening a Spry panel from a remote
link. However, I have run into another issue. Say a user clicks on
a link appearing on a panel, for instance, with a tab index of 2
(IOW, not the default panel), is taken to the page to which the
link is referring, and then hits the browser back button to get
back to the panel where he or she was. I know it is a redirect
situation, but don't know how to program it. Can you all help me
with this?
Thanks,
KT Pardue

This document contains JavaScript code for a widget that no
longer exists. If you don't remove
the code, the browser might display JavaScript errors when
loading the page. Would you like
Dreamweaver to find all instances of this code for you?
var sp1 = new Spry.Widget.SlidingPanels("PANELS",{
duration:850, fps: 60, defaultPanel:0 });
Yes No
Just above the end-body tag I have the script:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
duration: 350, useFixedPanelHeights: false, defaultPanel: 0 });
The only ID I have is " <DIV id="Accordion1"
class="accordian_div Accordion">" as a container for the panels.
Should I
change an ID name or a var name ? The SlidingPanels work
fine. It's just that I'm using the "open recent files automatically
on startup" sort of option and each page displays the above
error and stops, until I reply to it, then continues to load the
next file.
- GR

Disable a mitre of spry panel with mitre

hello,
I use spry panel with mitre of dreamweaver in a dynamic
website (PHP) , and i want to disable a mitre of spry panel with
mitre ,by code ( javascrypt or PHP).
How to do ?
thanks

im so sorry im just a newbie in php, i still dont know how to publish it on the net, im using wamp server.
here are the codes for the recordset paging navigator which are inside the spry accordion content:
<td><?php if ($pageNum_rs_ProgramList > 0) { // Show if not first page ?>
                    <a href="<?php printf("%s?pageNum_rs_ProgramList=%d%s", $currentPage, 0, $queryString_rs_ProgramList); ?>">First</a>
                    <?php } // Show if not first page ?></td>
                  <td><?php if ($pageNum_rs_ProgramList > 0) { // Show if not first page ?>
                    <a href="<?php printf("%s?pageNum_rs_ProgramList=%d%s", $currentPage, max(0, $pageNum_rs_ProgramList - 1), $queryString_rs_ProgramList); ?>">Previous</a>
                    <?php } // Show if not first page ?></td>
                  <td><?php if ($pageNum_rs_ProgramList < $totalPages_rs_ProgramList) { // Show if not last page ?>
                    <a href="<?php printf("%s?pageNum_rs_ProgramList=%d%s", $currentPage, min($totalPages_rs_ProgramList, $pageNum_rs_ProgramList + 1), $queryString_rs_ProgramList);?>">Next</a>
                    <?php } // Show if not last page ?></td>
                  <td><?php if ($pageNum_rs_ProgramList < $totalPages_rs_ProgramList) { // Show if not last page ?>
                    <a href="<?php printf("%s?pageNum_rs_ProgramList=%d%s", $currentPage, $totalPages_rs_ProgramList, $queryString_rs_ProgramList); ?>">Last</a>
                    <?php } // Show if not last page ?></td>
                </tr>
              </table></td>
thanks in advance...

Creating Multiple Collapsible Spry Panels

Hey all. I am quite happy with the Lawn and Bed Maintenance spry panel on the site that i'm creating.
http://leaflandscaping.net/
However when I create the other spry panels, the content is different from the first one. I don't quite understand since it's linked to the same css code. Is there a work around? Please help, Thanks.

Your CSS applies only to your first panel as per
#wrapper #bodycontent #paragraph #CollapsiblePanel2 .CollapsiblePanelContent p {
    font-size: 14px;
    color: #FFF;
    font-family: Calibri;
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 2em;
    margin-left: 3em;
    padding-bottom: 4em;
Just change the first line to
.CollapsiblePanelContent p {
Gramps

How to automatically open and close collapsable spry panels?

I designed a collapsable spry panel in DW to open and close automatically, with a 10 sec delay, unless person clicks on tab to close immediately.
The spry panel opens automatically, but will only close if i click the tab.
Is there a way for the collapsable spry panels to close automatically?
[Moved to Spry forum by moderator]

Arnout,
I feel certain the answer I need is in the reply you posted here, but I need a little more help to know exactly what to do. I am using a collapsible panel to show and hide a series of onload panoramic photos near the top of my page. What I want is for the collapsible panel to be open on some pages and closed on others and I want the animation of the panel closing to be seen too. I'm thinking this should be achievable with some sort of onload trigger or something. Currently I've gotten close to what I want by referencing two different .js files (one for the "open" panel state and another for the "closed" panel state), but this doesn't show the graceful animation of the panel closing. Any ideas on how to achieve what I want? Here is the url of the test site I'm developing: http://www.gregdanpartners.com/lrre2/index.html
Thanks in advance.
Dan

Set maximum panel size

Hi,
I would like to know how can I set the maximum panel size, in order
that when I maximize it with a state property node set to 5 (maximized)
when I open it, it don't pass the size I want for that panel.
How Can I do It? I can set the minimum panel size, in File->Vi
properties->Window size but I can't set the maximum panel size?
Thanks,
ToNi.

Hi,
From my vi, before I call another vi from it, I have a FP Open and FP.
State property set to True and 4 (Minimized) respectively and then I
use a Run Vi invoke node and finally, after it, I have another FP.
State property set to 1 (Standard). My front panel when opens has
the same size as I saved it but LV not redraws it well. How Can I do to
solve this kind of problem? I have this problem since a lot of time ago.
ToNi.
Attachments:
sample.JPG ‏40 KB

Panel size won't "stick" when restarting LR.

I want the left hand panel to be MUCH bigger so I can see more of my folder names. I can re-size it, but when I close and re-open LR, it returns the panel size to the original default size. Is there a way to get the re-sized panel to stay that way across LR re-starts?
On a related topic, at the moment, even with the left panel at the largest size I can make it, my folder/sub-folder structure results in part of the folder names being cut off. Is there any way to deal with this? Is there perhaps a way to get the font to be a bit smaller so that I can use longer folder names without having them cut off?
Thanks,
Larry

>In the preferences>interface>panel font size, make sure you have it >set on the smaller option
I'm referring to the panel size, not the font size (although I would also like to be able to make the font size smaller than the "small" setting.)
Zal posted about the problem I'm seeing, which appears to be a bug.
Thanks,
Larry

Panel size inconsistency

Hi all.
I am fairly new to making my panels native doc-able panels using Eclipse with Extension Builder. Up till now, I have been creating floating panels just using ScriptUI.
I am pretty happy with the new process, and its good forcing me to brush up my HTML.
I have build a panel, that works fine on my InDesign CC 2014, but when a colleague has the same extension installed, he gets strange extra blank panel space.
He has re-installed the extension (using ExtensionManager) and its still happening.
The Bundle Manifest/User Interface is set to the Min, Default and Max dimensions to be the same, so this as far as I can see should make the panel size absolute.
Here are 2 screen shots showing the effect...
The only difference is I am using Mavericks on a newer MacBook, and the incorrect Mac is on and older MacBook, running Mountain Lion.
Does anyone have any experience with this? I would happily send the extension to others to check for me..
Cheers
Roy

Hi Drazen,
Actually, the Pane Size (panel resize) event will occur twice as your sub-vi front panel is opened: first when the resizing begins, and again when the resizing is over (when LabVIEW sees that Old Boundaries and New Boundaries are equal). So, the 2 you see immediately in the indicator on the sub-vi is for both panel resize events. A timeout event when the timeout is set to zero initially never occurs because the VI registers the panel resize event first.
I hope that clarification will help you develop your application!
Product Support Engineer
National Instruments

Panel size event acts first in dialog VI?

Appearently, the event 'panel size' occurs first when a dialog subvi is called. This will cause issues if a one time timout is used. Can someone please confirm that this is true?
I have attached a caller and subvi to demonstrate. When the dialog is called, the index should show 1, indicating that only one event was executed, but in this case it shows 2.
Attachments:
caller.vi ‏8 KB
subvi_dialog.vi ‏9 KB

Hi Drazen,
Actually, the Pane Size (panel resize) event will occur twice as your sub-vi front panel is opened: first when the resizing begins, and again when the resizing is over (when LabVIEW sees that Old Boundaries and New Boundaries are equal). So, the 2 you see immediately in the indicator on the sub-vi is for both panel resize events. A timeout event when the timeout is set to zero initially never occurs because the VI registers the panel resize event first.
I hope that clarification will help you develop your application!
Product Support Engineer
National Instruments

Accordion Spry panel sizes

Similar Messages

Maybe you are looking for