Incontext Editing: Spry Accordion

Editing content in Dreamweaver's Spry Accordion is distorting the functionality of the widget (Version 1.61.) Can this be fixed?

Hello chandra111,
Please elaborate on the behavior you're seeing with the Spry widget and InContext Editing. Can you provide steps the recreate the problem?
Also, please make sure you're using InContext Editing and the Spry widget according to the following tutorial: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site.html
The fourth page of the tutorial specifically discusses working with the Spry Accordian: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site_04.html
Best regards,
Corey

Similar Messages

ERROR: Spry Dataset -vs- InContext Editing

I am having horrible luck importing ICE editable content into a Spry Dataset.
What I'm trying to achieve is something similar to the YUI Calendar Method performed by George & Pablo here: http://tv.adobe.com/#vi+f1500v1435
The easiest way is to take a web page I have set up in tables.. but you can only create Editable Regions for InContext Editing using <div>s...
No matter which method I try, I come up with an error. I need the end user to be able to edit his own "Calendar" and I need to be able to imort this information into a Spry Dataset. Any way I can accomplish this???

I forgot to mention one other problem
The layout that I sketched up is the one I am going for. So a tip on how to get the text and the headings to flow around the image like shown in the picture would be greatly appreciated. Is it recommended to use tables inside div tags or spry for that matter?
Thanks a million.

The underline is in the middle of the links in my spry accordion

I created a spry accordion menu in Dreamweaver CS4, and when I test it the underline is in the middle of the links in my spry accordion. This is not happening when I test it in a browser on the Mac I'm working on, but when I test it on a PC my rollover links have the line going through the center verses being underlined. The rest of the links on my page are fine, this is just happening when I rollover my submenu links in my Spry accordion when I test it in a browser on a PC. I am a "spry virgin," so please help!!!

Hello Em_needs_help,
You posted this message in the InContext Editing Web Developer discussion. I'm going to move your post to the Spry forums where more spry experts will be able to help.
Best regards,
Corey

Spry Accordion(or Template?) error

I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
It's telling my contentA is null.
Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

codeOutsideHTMLIsLocked="false" -->
That says that anything outside of that area can't be modified, right?
Nope. It says anything outside that area is editable, i.e., it's treated as an editable region. This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page.
Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

Spry accordion subpage troubles

Hello all,
I used DW CS4 to set up a spry accordion for my site (www.apposite.us) navigation menu. I was able to change some of its behaviors and appearance and am mostly satisfied, but I have two lasting issues:
1. I want the 'Home' tab to share the style and behavior of the rest of the accordion, but since it does not have any content, DW seems to interpret it as 'broken' and refuses to return the index page upon selection. I tried to fix the issue by defining an empty content panel, which fixes the 'broken' issue, but the change messes up spacing relative to the rest of the menu.
2. I want a particular panel to remain open upon selection of its content (right now, the panel reverts to collapsed when a content page is opened). I found a solution that involves working with several templates, but I would like to avoid this if at all possible.
Any suggestions on either improving the function of this accordion or setting up the menu more effectively using a different method would be greatly appreciated.
Jane

Sorry, my followup message should read:
Hi Gramps,
Your suggestion for part one of my problem worked (thank you!), but I am still having problems implementing part two.
As it is currently constructed, all pages are set up with the same template, which includes
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { useFixedPanelHeights: false });
in its code. Is there a way to make any selected content return its parent panel? Or is there a way to make an editable code region within the template (I have tried but not succeeded in doing this)? If the code you suggested
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { defaultPanel: 2, useFixedPanelHeights: false });
must be added to each linked content page, how do I achieve this without divorcing it from the template?
Thanks again,
Jane

Spry Accordion not working!

I have a spry accordion in my page and I'm using Dreamweaver to do my editing. I use this all the time, but have never had this happen before. When in Design mode, if I click anywhere within the accordion structure a blue box appears around the structure, and I am unable to made any edits. When I hover over the structure, I get a pop-up that shows ID, DIV, Overflow, etc.
Can anyone help me?

You probably have overflow:hidden specified somewhere in your CSS code for float containment.
Use Split View or Code View to edit the code.
Or, double click in Design View.
Or, right-click in Design View and & select Element View > Full.
Nancy O.

SPRY accordion widget IE8 ONLY issue

hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.

ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Spry Accordion issue in IE6/IE7

I'm having a problem with the Spry Accordion widget that I
placed on this page:
WireCare Customer
Support
It works flawlessly in Firefox, but the tab expansion is
erratic in IE 6 and IE7.
If anyone has a solution, I'd love to hear it.
Thanks in advance.
Ken
Edit to add:
I'm using CS3 with the version of Spry that installed with
the original software. I don't know if that's the latest version,
or if the new version has a fix for this problem. I'll upgrade to
the latest Spry version and hope that helps.
K
Edit 2:
I am using the latest version of Spry, so it may not be a
version issue.
K

Found the problem.
The solution was in a previous post on a similar subject.
I added a DOCTYPE declaration to the page, and it works much
smoother now. Not as nice as in Firefox, but acceptable.
Ken

Spry accordion works in template, but not pages using that template

So I added a spry accordion to one of my templates and changed the script to default closed. It works great. In the template. But not in any of the pages using that template. Basically I can see the content in the accordion on the page as if there is no accordion at all. And I can see the script and html telling me an accordion should be there. It just isn't. I can see the framework when in edit mode. But in live mode, it's like there's not there but the content.
I'm using Dreamweaver CS6.
Any thoughts?
Thank you for your time!

If the template has been created properly, then the Spry files should automatically be included in the child page(s).
My template looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
My child page looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

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.

Spry Accordion - disaster

Hi
I am having some problems with my SPRY Accordion. I have
ruined the default CSS file for
the Spry Accordion (spryAccordion.css)
I have changed the settings and now made a mess.
The problem seems to be with Mozilla Firefox mostly, but also
with IE and Navigator.
It is hard to explain so an example of the problem can be
seen at:
http://www.brettenman.com.au/test-acc.html.
Also i cannot figure out how to make the Spry Accordionit
aligned at the top in Dreamweaver?
I would greatly appreciate some help!
Thanks
Brett

Brett,
> I am having some problems with my SPRY Accordion. I have
ruined the default
> CSS file for the Spry Accordion (spryAccordion.css)
>
> I have changed the settings and now made a mess.
Delete spryAccordion.css from your site, then add a new
Accordion
somewhere, and DW will copy the original file back to your
site.
Hint: you should override the CSS in your own style sheet
instead of
editing the original.
HTH,
Randy

Curious about the Spry Accordion widget?

Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:
Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)
Curious about Spry, but have never used Spry widget features in Dreamweaver
You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver
Familiar with CSS styling and how it works
We are offering a small incentive to those willing to help us complete this study.
If you meet these requirements and would like to participate, please contact me at [email protected]
In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.
Thanks!

I added an accordion widget and it works on one site page while same code won't work on another page.
It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now/K-5th-Grades.aspx
Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx
Yet both pages have identical code (with absolute links to the CSS and JS files).
Can anyone shed some light on a solution?

Validating Pages that use InContext Editing tags

When will be possibile validate the pages with InContext Editing tags, when running it through the W3C validator?

Hello SallivanV2,
Here are a couple of links to unobtrusive Spry Data samples:
http://labs.adobe.com/technologies/spry/samples/dom_utils/unobtrusive_spry_data.html
http://labs.adobe.com/technologies/spry/samples/dom_utils/unobtrusive_spry_data2.html
But I think you might be better off posting the question in the Spry Framework for AJAX forum, since I'm certainly not the foremost expert on Spry:
http://forums.adobe.com/community/adobe_labs/spry_framework_ajax_prelease
I hope this helps!
Best regards,
Corey

How to edit the accordion height?

Hi,
first of all, sorry for my english ;)
I tried to edit my Spry Accordion's height like that:
<div id="Services" class="Accordion" tabindex="0"
style="height: 500px;">
but it seems to make an error in the accordion (
view
screen). how can i modity the height of this "control" without
any problem in the design...
Thanks,
Regards.

Hi,
if you want to use a fix layout, then you should use a
formula for computing correctly the height.
For the accordion situation, you should use a formula like
this:
Accordion_container_height = sum of all (PanelTabs_height) +
PanleContent_height + sum of all(margins, paddings and borders).
This is translated to: the Accordion container height
depends by all the tabs height, the PanelContent height and also
you should not forget by the borders, paddings and margins.
In your case, you should compute first the height for all
Panles tabs together plus content plus borders, margins and then
you'll have the correct size for the container that you initially
set to 500px
Hope this helps,
Diana.

Spry: Accordion does not close properly

Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one   I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
Chuck

Hey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!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>Untitled Document</title>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
    <div id="NavBar">
      <div id="SmallerNavBar">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
            <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
              <p><em><strong>Friday Night :</br>
              <br>     <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
              <p><em><strong>Saturday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
              <p><em><strong>Sunday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
              <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 5</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 6</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p>2007</p>
              <p>2008</p>
            </div>
          </div>
</div>
        <div id="Cover">
          <p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
          <br>Cover Designed By:</br>
          <br>Andrea Pagenkopf</br>
          <br>Rolling Rockets 4-H</p>
        </div>
      </div>
    </div>
</div>
<div id="MainContentBox">
    <div id="BoxForText">
      <p align="center">Welcome to the new</p>
      <p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
      <p align="center">Webpage</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>News:</u></em></strong></p>
      <p align="center"><em>Buttons for 2009 are on sale now! </em></p>
      <p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>Updates:</u></em></strong></p>
      <p align="left"><em>7/10/2009</em> - New Homepage</p>
      <p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
    </div>
</div>
<div id="BottomBox"></div>

</div>
</div>
<script type="text/javascript">

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

Incontext Editing: Spry Accordion

Similar Messages

Maybe you are looking for