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">
<!-- here I set the area to be repeated -->
<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>
<!-- repeat end -->
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: 5});
</script>
<!-- here I attach the xml data local file -->
</div>
<!-- spry region end -->
<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
Similar Messages
-
Accordion defaultPanel first tab value
I have an application which has an accordion panel and
several detailregions.
- the accordian panel is dynamically generated in spry with
xml (both the tabs and the content)
- the detailregions are based on what the current selected
tab is in the accordion panel
I needed to be able to access these tabs via a URL query
string - and have the correct panel / detailregion display based on
the variable passed in the URL.
I have this working correctly.
The problem though, is that the tabs onClick events do not
number correctly when using the defaultPanel attribute.
For example,
var acc = new Spry.Widget.Accordion("test",{defaultPanel:
functionThatGeneratesDefaultPanel});
works correctly for setting the panel which needs to be
displayed, but then if you click on the tabs to navigate to a
different panel, tab one ALWAYS defaults to whatever the
defaultPanel value was instead of being 0. Obviously this disables
the accordion panel from working correctly.
Any suggestions on how I can get around this?
Your assistance is appreciated!
elaineThanks for the reply Chris. I have somewhat narrowed down the
problem, but still haven't solved it (had to move on and finish the
rest of the website:)
As I mentioned previously, I am creating these accordion
panels dynamically through xml. Inside one of the panels, there is
a secondary navigation system which is fed by xml as well. The
problem seems to be caused by having two datasets in the same
accordion panel. Here is the code:
var observer = { onPostUpdate: function(notifier, data) { var
acc = new Spry.Widget.Accordion("nav",{defaultPanel:
requestedPanel}); dsNavItems.setCurrentRow(requestedPanel);
displayCoupons(); } };
Spry.Data.Region.addObserver("nav", observer);
and the accordion:
<div id="nav" class="Accordion" spry:region="dsNavItems
dsNavSubs">
<div class="AccordionPanel" spry:repeat="dsNavItems">
<div class="AccordionPanelTab" spry:hover="rowHover"
spry:select="rowSelected"
onclick="clicker({dsNavItems::ds_RowID});">
<h3 spry:if="({ds_RowNumber}) != 2"
onClick="dsNavItems.setCurrentRow('{dsNavItems::ds_RowID}');hideLayer('comingSoon');hideL ayer('coupons');hideLayer('couponLarge');hideLayer('imageHolderScreen');hideLayer('submenu Content');hideLayer('submenu1');showLayer('featureGraphic');showLayer('ticker');showLayer( 'newsBar');"
spry:content="{dsNavItems::name}"></h3>
<!-- for coupons -->
<h3 spry:if="({ds_RowNumber}) == 2"
onClick="dsNavItems.setCurrentRow('{dsNavItems::ds_RowID}');hideLayer('comingSoon');hideL ayer('imageHolderScreen');hideLayer('submenuContent');hideLayer('submenu1');hideLayer('fea tureGraphic');hideLayer('ticker');hideLayer('newsBar');showLayer('coupons');showLayer('cou ponLarge');"
spry:content="{dsNavItems::name}"></h3>
</div>
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="images/ajax-loader.gif"/></div>
<div spry:state="error"><span spry:content="The
website is currently down. Please try again in a few
minutes."></span></div>
<!-- departments nav -->
<div spry:if="({ds_RowNumber}) == 0"
spry:state="ready">
<div class="department" spry:repeat="dsNavSubs"
onClick="{dsNavSubs::onClick}; goToURL('{dsNavSubs::url}')"
spry:hover="rowHover" spry:select="rowSelected"
spry:content="{dsNavSubs::name}"></div>
</div>
<!-- non-departments items -->
<div spry:if="({ds_RowNumber}) != 0"
spry:state="ready">
<span
spry:content="{dsNavItems::content}"></span>
</div>
</div>
</div>
</div>
This problem can be seen at
http://www.sportzoutdoor.com/index.php?panel=2
This will default to opening the page with the second tab
appearing. Trying clicking on the first tab and you will see that
it tries to refresh, but comes up as the 2nd tab. When running an
echo with this, on the rownumber, it returns as 2 for both the
selected tab and for the first tab. For some reason, it is
assigning 2 to this tab when it generates it.
The problem only occurs when it is selecting a specific panel
from the url query. Otherwise at
http://www.sportzoutdoor.com/index.php
it works fine. Also, this is the page where you can view the
secondary nav system built into the first panel.
Also, in another example - this one without a secondary nav
system, but still with the url query, works fine:
http://www.sportzoutdoor.com/cycling.php?panel=4
Let me know what you think...
thanks,
elaine -
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">
<!--
//var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"Accordion"});
//var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"AccordionPanel"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
//-->
</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
NikhilDid you search past threads? I thought someone had already solved this.
-
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 -
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? -
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. -
Dear all,
I have a website, i want to place a image right side of accordion menu how can i do it (RED AREA)
WebLinkFirstly, 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 -
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 helpHi
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 -
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?
> -
Closed Accordion Panels problem
Once I set the Accordion Panels to all be closed at the
start,
the
layout of the page is stretched really long giving me a lot of
blank white space. (In FF, the Accordion stretches outside the size
of the background box) However, if I put the text that appears
above the Accordion in a panel and set it to be the
open
panel when the page is displayed, all works fine.
HELP????? I want text above the Accordion, then I want the
Accordion Panels to open at a fixed height. Is this do-able? If
not, is there a way to make the overall height of the page change
as the height of the panel changes so I don't have a bunch of empty
white space below the Accordion?Nevermind.... seems to be working now. I moved the css that
was in the file to an outside file. The panel heights vary, but the
empty white space is gone. Good enough! -
I've noticed an issue that only seems to appear on Safari
(version 3.2.1) on the Mac. Sometimes the first few links under
each header don't show the hover state. On
http://www.singlesourcepromo.com
on the left panel, some of the links don't change when moused over.
Any help or an explanation would be greatly appreciated. I'm
working with DW CS3 in Leopard on a Mac.Here's a image of what the accordion looks like in Safari
2.0.4
http://www.socialmediafrenzy.com/spry-includes/wierd-accordion.jpg
Maybe you are looking for
-
Can't Scan from my HP Color Laserjet 2840 on my iMac.
It appears that OS X 10.6.4 only allows the print function, not the scan or fax function. I have VMware Fusion with Windows XP Professional loaded, but I can't get the install disk to load. I can upload the print drivers, but not the scanning functio
-
OS creating multiple user/library folders - need help
My computer has decided on it's own to revert back to it's original default settings causing me to lose all the changes that I have made, as well as forcing me to redo the set-up procedures for Mail, Safari and other browsers and applications. This i
-
I bought a movie last year, but now it let me watch it what do i do
it was battle los angela it wasn't the hd one so can i get it back
-
Extract R/3 Standard Texts to BW Documents
Hi Experts, I would like to know how to extract the R/3 Standard Texts into BW Documents. We can use SO01 Tcode to see the text and STXH to see other fields relative to standard text and we can also use "READ_TEXT" function module to retrieve the val
-
Finding CPU patches on oracle support
I could open a ticket and ask, but that would be a while for a response. Possibly days. So I am going to the patch screen. I am doing a search for CPUJUL2010 and nothing comes back. I need the July one on Solaris Sparc 64 bit. on the left there is a