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
Similar Messages
-
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 advanceThis 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 -
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.
-
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 -
Hi all
I am using an accordion having two accordion window..i want to set the skin of the second window..or if that is not possible then the corder radius of it..i have tried it using
AcrdShapeClipArt.getHeaderAt(1).setStyle("borderStyle", "solid");
AcrdShapeClipArt.getHeaderAt(1).setStyle("cornerRadius", "12");
AcrdShapeClipArt.getHeaderAt(1).setStyle("borderColor", "red");
but the corners are still not curved
How can i achieve thisThe right way (As for architecture point of view) will be to send event from the
component:
var myEvent:MyEvent = new MyEvent(newIndex);
dispatch(myEvent);
And catch it on the main application:
in the main app: _component1.addEventListener(MyEvent.EVENT_NAME, MyFunction).
And in the main app add the callback:
private function MyFunction(param:int):void {
// here u get the new index and change the accordion
* for creating custom events you can check "Flex in a week", day 3
Lior
Maybe you are looking for
-
Hi, I have a basic question about securing web applications. In our app, we have myRealm pointing to an LDAP store. The store has (lets say) a group called 'dealers' and it has a user 'dealer1'. Now, in WEB-INF/weblogic.xml I have <security-role-assi
-
Help! can't get sync to work
hi, i've put about 45 songs on the ipod 2gb with some trouble But now when i get on i-tunes and connect my ipod only get screen "IPOD + I-TUNES" welcome screen and tells whereto register but NO screen to SYNC! only lets me go to I-tunes store and thi
-
Why can I not open the web form link in ms outlook
I copied a link to my web form to ms outlook recipients. They cannot open the link.
-
Function Module for GL open Itmes
Could any body from forum tell me that "there is any Function Module for General Ledge open Items". Rgds, Raju
-
Chrome playing all symbols at once despite "stop" triggers?
Hi Everyone, I'm working on an animation (Edge Animate CC 2014) where several sets of events are grouped in symbols--each has a "stop" trigger at 0:00 and then a "play" trigger at the appropriate time. This works fine in Firefox & Safari, but Chrome