Accordion Jitter Problem

An Accordion menu I'm building exhimits a lot of jitter
during animation. It occurs in Safar, Firefox and Camino on a Mac.
(Have't tested yet on Windows.)
I added extra content in an adjacent column, as I saw
suggested elsewhere here, but it didn't work. My DOCTYPE is
correct. I'm using 1.5.
Is there a fix for this?

Hi, Kin. Thanks for the tips.
Unfortunately, neither solved my jitter problem totally.
First, I set the Accordion element with a height, as you
suggested. While this seemingly diminished the jitter, it did not
eliminate it. (I did away with the rules on the Tab elements to
make sure my height count was simple and accurate: 10 tabs at 30
pixels, one open panel at 400 pixels = 700 pixels.)
Then I followed your second suggestion, calling the
SpryEffects.js file and adding code for that. It had a small effect
as well: the Accordion's jitter was diminished, and that of the
adjacent column disappeared. (The Accordion's jitter was mostly
eliminated, except when the cursor was dragged over several tabs
quickly. Also, various tabs would cause a jitter at seemingly
random points.
As a test, I thought perhaps the mouseover code I added was
having an unintended effect, so I cut that. But that only increased
the jitter on both columns.
I've never liked flyout/dropdown menus, and the Accordion
seems a fine alternative for space saving.
I used v1.5 on all tests. I could return to v1.4, but that
causes those temporary sliders to appear in the tab content area,
at least in Safari. Is there a way to fix the slider problem in
1.4?

Similar Messages

My ongoing infernal full screen jitter problem

Hello all,
Upgraded to CS6 recently and am still suffering the jitter problem I described here (http://forums.adobe.com/thread/882562) - after multiple tweaks and adjustments I can't seem to resolve it - what's more I've seen the same problem on another machine with different hardware, in both instances the full screen preview is being driven from the video card and not from an external third party device.
All screens are set to 1080p/50Hz, project is 1080p/25.
I stumbled on the developers shortcut to display the playback debug info (http://forums.adobe.com/thread/1006498) and what's interesting is that the debug reports *no* dropped frames, full despite me seeing them on screen.
And yes, latest Nvidia drivers.
Would appreciate any suggestions please - I can't use a BM Intensity since my screen won't support 1080p/25 and I'm not a fan of Matrox having been through many painful experiences from Digisuite to Axio.
Any starting points to diagnose?
Sacha Goodwin

Out of interest wanted to see what a 50p project would do - display starts at 50fps for about a second and then drops to 25FPS (i.e. dropping every other frame) and yet debug reports more or less consistent 50FPS - with only occasional dropped frames in the stats now showing up. How/why is this being missed?

Finally, a Workaround for the JITTER PROBLEM

OK, after ******* around (wonder if Apple's naughty-check will allow "*******") for many hours, burning many coasters, I have figured out a way to use iDVD, with its truly lovely menus, and beat that unfortunate problem the encoder has with jittery video. These videos always worked fine if I encoded them with Toast, but were very jittery (jiggly?) in spots if I encoded them with iDVD, even if I burned a disc image from Toast. The solution I came up with is one of two things:
1. The video started out as something I extracted with Toast; I tried saving it as a Progressive thing, rather than an interlaced thing.
2. I bought Toast 7, thinking that its new selectable menus would probably get me by; they are UGLY, UGLY, UGLY, can't use them to represent your portfolio. BUT, after adding all the movies to the Toast window, I noticed the "export" button below, exported the movies (I think just to .dv format), loaded them into iDVD and the PROBLEM WAS SOLVED. Not sure what happens here; I don't think the movies I exported from Toast were ever encoded by it, but something about the export process fixed the jitter.
Sorry I don't know which of these two it is (I did them both, and don't have time to whittle it down), but one or the other finally solved my problem. If anyone identifies which of these ideas was the solution, please post it...

Perhaps if you posted in the Lion discussion rather than the How To Use These Forums discussion you will get a an answer. The Lion gurus hang out over there. https://discussions.apple.com/community/mac_os/mac_os_x_v10.7_lion

Accordion defaultPanel problem

Hi Everyone, I'm using Spry Accordion as a menu and im
loading the data from an xml file, and that part is working fine :D
the problem is if I try to set the defaultPanel to anything else
besides "0" like the following
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: 5});
</script>
It only highlights the panel and doesn't open
Here's the source code
XML file:
==================================================================
<?xml version="1.0" encoding="utf-8"?>
<NewDataSet Nivel="1">
<Content>
<IdMenu>1</IdMenu>
<Menu>Introduction1</Menu>
<SunMenu1>SUB1</SunMenu1>
<Link1>Link 1</Link1>
<Link2>Link 2</Link2>
<Link3>Link 3</Link3>
<Link4>Link 4</Link4>
<Link5>Link 5</Link5>
<URL1>URL1</URL1>
<URL2>URL2</URL2>
<URL3>URL3</URL3>
<URL4>URL4</URL4>
<URL5>URL5</URL5>
</Content>
<Content>
<IdMenu>2</IdMenu>
<Menu>Introduction2</Menu>
<Link1>Link 1</Link1>
<Link2>Link 2</Link2>
<Link3>Link 3</Link3>
<URL1>URL1</URL1>
<URL2>URL2</URL2>
<URL3>URL3</URL3>
</Content>
</NewDataSet>
==============================================================
HTML File:
==============================================================
<div spry:region="strategic1">
<div id="Accordion1" class="Accordion" tabindex="0">

<div spry:repeat="strategic1" class="AccordionPanel">
<div
class="AccordionPanelTab">{strategic1::Menu}</div>
<div class="AccordionPanelContent">
<a href="{URL1}"
class="SubMenu">{Link1}</a><br />
<a href="{URL2}"
class="SubMenu">{Link2}</a><br />
<a href="{URL3}"
class="SubMenu">{Link3}</a><br />
<a href="{URL4}"
class="SubMenu">{Link4}</a><br />
<a href="{URL5}"
class="SubMenu">{Link5}</a><br />
</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: 5});
</script>

</div>

<script type="text/javascript">
var strategic1 = new Spry.Data.XMLDataSet("Strategic.xml",
"NewDataSet/Content");
//-->
</script>
Thanks in advance

This forum is to discuss the forums, not products
You need to ask your question in the forum for the Adobe product you are using
How to Select a Forum http://forums.adobe.com/docs/DOC-1015

Jitter problem after burning DVD from avi or mpeg2 that was exported from original timeline edit

When burning a DVD directly from the timeline in Elements 7, there is usually no problem, however, when first exporting it to an .avi or .mpeg2 file, and then putting that new file back into the timeline, and then burning that new file to a DVD, there is jitter or "strobing" when the subject in the video moves (when playing the DVD).
It's not an install, or re-install issue, because before I started with this new computer, the exact same thing happened with the last computer I was using.
Thanks.

Les,
I do not know the newer Pinnacle Studio products, but going back to 8 and 9, through 9.4.3, the workflow was based on DV-AVI, just like PrE is. Pinnacle might have changed over to MPEG-2 in later versions, but I just do not know, as I have not seen a version, since Studio 10 hit was such a disaster.
One of the problems when working from DVD-Video material is that it has already been compressed to MPEG-2, loosing a good bit of data, and also converting the material to GOP (Group of Pictures), so that individual Frames are not present any longer. This precludes Frame-accurate editing, unless that compressed material is converted to all I-frame. See this ARTICLE for some background on GOP. Then, upon Burn to Disk, that I-frame material is once more compressed (again) to MPEG-2 and GOP for use in a VOB container. This WILL cause degradation of the image, most noticeable where there is motion, either subject, or camera motion. Some NLE's offer what is referred to as "Smart Rendering." This can help in some areas. For portions of the footage, where no changes have been made, beyond just cuts, the material will NOT be Transcoded again to MPEG-2, but will be used, as-is. Note: add a Transition, or a Title, or a PiP, or any Effect, and that footage WILL be Transcoded, so the Smart Rendering aspect will be moot. Sony's Vegas has been recommended for Smart Rendering, but I have never used it. This might be worth investigating. Also, if Pinnacle Studio is working fine, you might want to consider using that program. I have 5 different NLE's on my workstation, and use each for specialized situations, though the vast majority of my editing is done in PrPro.
Regarding the existing DVD-Videos, much depends of the source. PrE can Import and work with 100% DVD-compliant (very important) VOB's. Unfortunately, most DVR's do not create 100% DVD-compliant discs. This is most often manifested in the first VOB, which will contain any Menus and navigation. This ARTICLE will give you some background on VOB's, which are Video Object "containers."
As you point out, there can be issues with the resulting MPEG-2, as it will span part of VOB 1, and then all remaining VOB's. With 100% DVD-compliant VOB's, there will be a perfect flow in the MPEG-2 that spans the multiple VOB's. When the VOB's are not 100% DVD-compliant, issues can arise.
Considering your DVR, it is likely that ripping is going to be the best workflow, as that will strip out the other material in the first VOB and should then gather the data for the spanned MPEG-2. The ultimate rip will be to a DV-AVI Type II file w/ 48KHz 16-bit PCM/WAV Audio. This is an older FAQ Entry from the Encore Forum, on ripping, but might have some useful tips. Note: this was for getting material from a DVD-Video for authoring to a new DVD in Encore, and not editing.
For non-commercial DVD-Video editing, I will use an A-D bridge and my DVD deck, and capture to DV-AVI Type II w/ 48KHz 16-bit PCM/WAV Audio, and Import the resulting files into PrPro/PrE. This is exactly the same workflow that I use, with analog material, like VHS.
Also note that PrPro, a US$900 program did not get VOB Importing until CS4.2 (current version), while PrE has had it for some time now. Also, PrPro is a DV-AVI-based, I-frame, program, just like PrE, so no "Smart Rendering" there either. Same exact issues exist in "big-brother," PrPro.
Most of all, good luck,
Hunt

Spry Accordion collapsing problem

I am using an accordion on my site, and also took the advice to update to the latest spry, which didn't seem to make a lot of difference to be honest (I am using DW CS3)
But the problem I am having is when you first come to the page the menu isn't completely collapsed and I wonder if there is a way of doing this...
This is not happening in latest firefox, IE8 or safari on a windows pc
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. 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>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="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
width: 174px;
overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Teisho wrote:
Thanks for your answer, the problem that I still have is that I am trying to close all the Accordions when clicking
on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
thanks Ant
I am not sure what you want to do here. When you click on an open panel, the panel closes; when you click on a closed panel, it opens and closes any panel that is open.
Please explain.
Sorry, did not see your new post which does explain what you want.
Message was edited by: vw2ureg

Accordion selectedIndex problem

Hi everybody,
I am trying to set my selectedIndex property to a certain value for my accordion upon click.
Here is my code snippet
public function changeItemClick():void{
if(inboxView.inboxGrid.selectedIndex == -1 && (applicationVs.selectedIndex == 1)){
applicationVs.selectedIndex = 0;
Alert.show(
"Please select a task " + String(applicationVs.selectedIndex));}
<mx:Accordion
id="applicationVs" change="changeItemClick();" width="100%" height="100%" historyManagementEnabled="true" creationPolicy="all" >
The problem is. when the functions are satisfied, the selectedIndex doesnt get assigned to 0 again.
It stays at 1.
Did anybody encounter such a problem? Could someone suggest a workaround. Please?
Really appreciate your help
Thank you
Nikhil

Did you search past threads? I thought someone had already solved this.

Accordion IE Problem

I have put together an accordion with 15 items and everything
works just fine in Firefox. It works fine in IE too, the only
problem with IE is that if i scroll down the page and select the
item, it will expand but it will scroll the page up the first item.
It seems like the first item in the list ( i suppose) act like a
"href="#" or something... Any suggestions?

Hi Tsiger,
Is this page available to see? These scenarios are "Picture=
1000 words"....
Thanks,
Don

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.

Accordion menu problem. Doesn't move.

Hello!
Here are files I've modified.
http://failiem.lv/u/jhqapxy
I was making an accordion menu after this tutorial.
http://www.thetechlabs.com/xml/build-a-dynamic-accordion-menu-in-flash-cs4-with-actionscri pt-30-and-xml/
In basic tutorial there is extra part of button where you add menu name "home, about us" etc.
But I don't need this. I needed more simplier. From xml file I load an image or swf. And then you just mouse over it and it moves and it clicks. No extra 30 pixels for button space.
If i change AS line
ldr.x=0
to ldr.x=27
then it moves, but there is extra unnecessary empty space between content things. I don't need it. What should I do?
I'm total beginer at these things, but I really need this thing.

You need to find where the space between is being added. If you include the relevant code in your posting you are more likely to get help. Also, probiding screenshots to show the problem you want to solve can be helpful.
People are generally not too keen about chancing downloading files and researching tutorials or other external information when trying to help in forums.

Accordion menu problem

Dear all,
I have a website, i want to place a image right side of accordion menu how can i do it (RED AREA)
WebLink

Firstly, please accept my apologies, I did not study the problem to the extent that the solution I gave solved the problem.
Please undo the changes above and add a new column that spans the height of the tabel as per
<tr>
<td width="33%"><b>Your Name*:</b></td>
<td width="3%"> </td>
<td width="4096" colspan="2"><input type="text" name="yourname" /></td>
<td rowspan="17"><img style="margin-left: 50px;" name="" src="http://www.newtonclients.com/sky3/images/bo.png" width="210" height="275" alt="" /></td>
</tr>
Gramps

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

Spry Accordion Widget problems - please help

I've been trying to modify the settings for an accordion
widget - basically to open the widget with no panels open, and to
have varying panel heights. I have been to the help and the lab
forums and have put in the code, but alas, nothing worked. So I
downloaded the 1.5 prerelease just to see - and saw there was an
example of exactly what I wanted to do! (AccordionSample.html)
however when I went to preview this in DW CS3, it did not work ...
it did the same thing that mine was doing - opening all the panels,
and none were clickable. Is this something you cannot test locally?
Does it have to be on a test server? I am running this on a G5 with
10.4.9, if that helps at all.
Hmmm - uploaded it to my web server and still get the same
thing ... here's the
link:

Hi!
The version of the spry files on your server are 1.3, not 1.5
- hence using the options from 1.5 with the 1.3 files won't work
(they don't understand the options).
You need to a) update the spry files in DW CS3 to 1.5 so that
they will work with DW, and b) update the spry files on the
webserver to 1.5, as DW will not overwrite them itself incase you
changed something in them.
See:
here
for details

Accordion panel problem in Firefox, etc.

I am wondering if someone could please help me with the spry accordion on this page http://www.safetybath.com/practicedec09/index4notabbedpanels.html . The panel appears to work well in IE but not in Firefox, where the two bottom panels should say SanSpa and LeisureIsland and then open, this does not appear to happen. I have attached the css file
2. Also I am wondering if there is a way to get rid of the "dotted Line" box that appears around the panel in Firefox?
3. How does one go about putting another spry accordion on another page in the site...will the css for the first spry accordion not take over the second one?
Thanks for your help

Hi
substitute this
Spry.Widget.Accordion.prototype.onFocus = function(e)
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
with this
Spry.Widget.Accordion.prototype.onFocus = function(e)
if(this.blur)this.blur();
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
in your xxxxxxx.js file

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

Accordion Jitter Problem

Similar Messages

Maybe you are looking for