Dreamweaver accordion spry

Hi all,
Hoping someone can help me with this one. I have a drop down
menu on one page which when I click a submenu item, opens a spry
accordion panel on a different page. The panel item that opens
depends on which sub menu item is selected on the afore mentioned
page. Problem is that if the accordion panel that opens is small
and then I click another accordion panel tab it cuts off part of
the content if it is larger that the content in the previously
viewed panel. This only occurs when I use the drop down menu to
display the page that contains the panel and then click another
panel tab after that. If I open the page that contains the
accordion panel directly I can switch different panels with
absolutely no problem. This has me stumped I am afraid.
Thanks

This is the problem
.AccordionPanelContent {margin-bottom:25px; margin-top:5px;}
Change the values to 0 (zero) and all is well.
To give the top and bottom some space, either insert <p> </p> or give the paragraph a style rule.
Gramps

Similar Messages

Accordion Spry problem

The issue is basically this:
I have an accordion (Spry). Let's say I click an element on
it, shifting it. Now if that element was also a link, it will load
a new page. Unfortunately, it also resets the accordion to default
state, totally nullifying any semblance of "flow" between the
pages.
How can I fix this?

http://foundationphp.com/tutorials/spry_url_utils.php
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"scripting_challenged" <[email protected]>
wrote in message
news:fs007u$mmi$[email protected]..
> The issue is basically this:
>
> I have an accordion (Spry). Let's say I click an element
on it, shifting
> it.
> Now if that element was also a link, it will load a new
page.
> Unfortunately, it
> also resets the accordion to default state, totally
nullifying any
> semblance of
> "flow" between the pages.
>
> How can I fix this?
>

In Dreamweaver CS5 - Spry elements visable in LiveView Only

Web page: www.muohio.edu/youth
In Dreamweaver the Spry Tabbed Panels and Collapsible panels work fine as published, and in LiveView. However in Design View the tabbed panels only show the top content, the styling is not applied. The collapsible panels are functional, but the styling is not applied.
Hope someone has an idea of what needs to be changed in the code, it is very difficult to update the page as it is.

Yes, on some complicated pages, DW can have a hard time rendering the Design View.
What you can do (that is the solution I use) is:
for the styling, create you rules in Design view, and edit them in Live view. You sometimes have to refresh the view to have the changes apply, but it is still a time-saver.
for the content, just switch to Code View and copy the content that needs updating. Open another HTML page, select all, and paste over your copied content. DW renders HTML bits pretty well even if there is no <html>, <body>, etc, tags. Then edit in Design View, switch back to Code View, copy all, and paste over your old content in the original document.
Hopes this helps.
Xav

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>

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

Accordion spry

Is there a way to make it so that when you go to the accordion spry, all the tabs are closed initally. Currently, when I go to the accordion spry, the first tab is open and all the rest are closed.

@Sudarshan,
On a sidenote, Spry has been deprecated and is no longer officially supported or actively developed by Adobe
Isn't it a sad situation? The current version of DW is CS6. This version supports Spry. It has been purchased - and is still being purchased - in good faith. It is not until a DW user is confronted with a Spry problem, that he/she finds out that Spry is no longer supported.
Compare that with buying a new car and, as you drive out of the showroom, being told that the warranty has run out by saying "we do not support this model anymore".
Something is very wrong here.

Close accordion spry when clicked

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Accordion Spry not collapsing in IE but it is in other browsers even Chrome

This is my first Accordion Spry that I am creating and I
cannot figure out why it is not
fully collapsing in IE but it is working flawlessly in all
the other browsers.
Pleease check out the site,
http://www.enrieap.com/. The
accroding is on the right.
Thank you.

If the above didn't help then please attach a screenshot.
*http://en.wikipedia.org/wiki/Screenshot
*https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
Use a compressed image type like PNG or JPG to save the screenshot.

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

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?

Adding links in dreamweaver accordion

Hey Guys,
I'm having trouble adding links inside my dreamweaver
accordion menu. Basically they don't display at all? Does anyone
know why?
Thanks
Shell

Let's see your code, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"shelleyfish" <[email protected]> wrote in
message
news:g6cf49$3v1$[email protected]..
> Hey Guys,
>
> I'm having trouble adding links inside my dreamweaver
accordion menu.
> Basically they don't display at all? Does anyone know
why?
> Thanks
>
> Shell

Dreamweaver CS5 Spry Menu problem;

Hi, I'm doing a web-site project for my Web Design class, and I ran into a problem. In Dreamweaver my spry menu only shows one part of the menu, but when I go to preview it, its perfectly normal. When I turned it into my teacher he sees the spry menu just like the one in Pic 2. I can't really upload it to a public domain/website because I can't at school. The way we see websites is by transfering folders into the teachers folders and click the index.html. Is there any way to fix this?
Code if needed:
<!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>Kelsey's Page</title>
<style type="text/css">
body {
background-color: #EBF2FE;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td align="center"><img src="asdasdawe.jpg" width="907" height="331" /></td>
</tr>
<tr>
    <td width="100" align="center"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.htm">Home</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
        <ul>
          <li><a href="enterport1.html">Personal</a>            </li>
          <li><a href="enterport2.html">New PRHS</a>            </li>
          <li><a href="enterport3.html">Performance</a>            </li>
          <li><a href="enterport4.html">Teacher</a>            </li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Schedule</a>
        <ul>
          <li><a href="enterweb.html">Web Design</a>            </li>
          <li><a href="enterani.html">Animation</a></li>
          <li><a href="enterlatin.html">Latin 4</a></li>
          <li><a href="enterapush.html">APUSH</a></li>
        </ul>
      </li>
      <li><a href="derp.htm">Derp</a></li>
    </ul></td>
</tr>
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td> </td>
</tr>
<tr>
    <td><img src="bigpic2.jpg" width="910" height="510" /></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

We can't view or "fix" your teacher's folder.
Why not be a rebel, find yourself some free hosting,
upload all your files and post a link for us.

Nested Accordion Spry problem

What I am trying to accomplish is fairly simple, but I'm not seeing what the problem is. I have a nested accordion spry that, for all intents and purposes, is working fairly well. There's a weird problem with some of them not collapsing, but I can live with that. What I'm trying to do is put a checkmark beside any pages in the index that the student has viewed.
I'm setting up an array called yesPages here:
var yesPages = Spry.$$("yesPages");
What I want to happen is that it will hold an array of all the pages in my XML file that the student has already viewed. A bookmark, basically. To start it out, I place the first page in the array like so:
yesPages="10000";
That way, when the student starts the lesson, they've already seen the first page. As they progress through the course, I have a function called clickNext that will add to the yesPages array in this for loop:
for (var w=0;w<lessonStatus.length;w++)
if (lessonStatus[w]=="Yes")
   yesPages=yesPages + "," + rowsPage[w]["@pageNo"];
   alert(yesPages);
I put the alert in there to ensure that the yesPages array is building properly--it does. When the student clicks on next, I get an alert that says "1000,1001" and so on and so forth, each time adding whatever page they're on to the end of the array. Oh, and it also will sort them appropriately, too. That way, if the student jumps around in the index, the array is still sorted numerically like so: "1000, 1001, 2020, 3001, 3002, 4000."
Here's my accordion code:
   <div spry:region="courseData topicList pageLister topicData">
   <div id="Accordion1" class="Accordion" tabindex="0">
     <div spry:repeat="courseData" class="AccordionPanel">
        <div class="AccordionPanelTab">{lessonTitle}</div>
        <div class="AccordionPanelContent">
             <div spry:repeat="topicList">
    <div id="{lessonTitle}" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">   {topicList::topicTitle}</div>
         <div class="AccordionPanelContent">
                      <div spry:repeat="pageLister">
                             <div spry:choose="spry:choose">
                                  <div spry:when="'yesPages.search({@pageNo})' != '-1'">√ {pageLister::pageTitler}</div>
                                   <div spry:when="'yesPages.search({@pageNo})' == '-1'">  {pageLister::pageTitler}</div>
                             </div>
                      </div>
          </div>
        </div>
    </div>
                      <script type="text/javascript">
                            var Accordion2 = new Spry.Widget.Accordion("{lessonTitle}",{ useFixedPanelHeights: false });
                      </script>
             </div>
        </div>
     </div>
   </div>
            <script type="text/javascript">
                  var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false });
            </script>
</div>
Not sure if I copied all the </div>s to here or not, but they're all there in my code. Anyway, courseData, topicList, pageData, and topicData are all datasets. topicList and pageLister are nested datasets within courseData and topicData respectively. {@pageNo} is the page number in my XML. What I'm trying to do with the .search of the pageNo is to ensure that that page number exists within the yesPages array. If it does, put the checkmark beside it. Otherwise, leave it unchecked.
What I'm getting instead is a full list of all the pages, and they are all checkmarked. If I put a quick alert in there of yesPages, I get only the pages that they've seen. So, this doesn't make sense as to why it's not behaving correctly.
Anyone have an idea?

Well, we're on the right track. By changing Accordion2 to {lessonTitle}, it now allows me to accordion the first topic of each lesson. However, the subsequent topics of each lesson still won't accordion. This is so weird. You would think that if one would do it, all of them would.

Dreamweaver template Spry Accordion displays error on Firefox

Hi,
I downloaded and try to use the template 02 with Dreamweaver CS5 from
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
However, when I try to browse the theme_02_design.html in firebox, the spry accordion is corrupted ( see image) ,
it didn't displays as the way it looks in here: http://www.adobe.com/devnet-archive/dreamweaver/articles/dreamweaver_custom_templates/temp late2/Publish/theme_02_design_from_template.html
I already finished the whole editing to create a new site and it works perfectly fine in google chrome and IE.
I only browse the theme_02_design.html in firebox and it doesn't look right already.
Or is this template doesn't work well with firefox? How should I fix this problem?
Thanks a million for any help, appreciate it.

#1 Validate code with the tools below and fix reported errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
#2 Upload your test page and dependant files to a web server space you control.
#3 Come back to the forum & post the URL to your page.
Nancy O.

Dreamweaver accordion spry

Similar Messages

Maybe you are looking for