Accordion panels as navigation
Hi i want to use the accordion panels as navigation problem is when I load a new page the widget defaults to open on the first panel. I would like it to stay open on the panel which the link was made from also I can't figure the css to target the "AccordionPanelContent" and adjust :active.
Thanks dan
sorry ben don't know what you mean code below
cheers Dan
<!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"><!-- InstanceBegin template="/Templates/index.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>DDI</title>
<!-- InstanceEndEditable -->
<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceBeginEditable name="head" -->
<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="big_holder"><!-- InstanceBeginEditable name="main_holder" -->
<div id="wrapper">
<div id="big_holder">
<div id="main_holder">
<?php include "logo_topnav.php" ?><div id="main_pic"><?php include "gallery_print_1.php" ?><br />
hover on image to control</div>
<div id="left_holder">
<div id="copyheader">
<a href="images/our-work_TV.gif"><img src="images/our-work_TV.gif" width="150" height="49" /></a>
<!--///*end copyheader*/--></div>
<div id="left_nav">
<?php include "nav.php" ?>
<!--///*end left_nav*/--></div>
<!--///*end left_holder*/--></div> <div id="main_text">
DDI's close association with the print media, especially the glossies, has given rise to a number of special opportunities from inverting imagery to capture attention, to stitching sealed envelopes into the editorial sections and taking over entire covers!
<!--///*end main_text*/--></div>
<br class="clearfloat" />
<!--///*end main_holder*/--></div>
<div id=footer>
<?php include "footer.php" ?>
<!--///*end footer*/--></div>
</div>
<!--///*end wrapper*/--></div>
<script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});
</script>
<!-- InstanceEndEditable -->
<!--///*end wrapper*/--></div>
</body>
<!-- InstanceEnd --></html>
Similar Messages
-
hi guys,
i have a Spry accordion panel, in the first panel i have some
dynamic text and some dynamic images, when i open the other panel
below, this opens over the top of the first panel (like it should)
and the dynamic text is covered (like it should) however the images
stay visable in the same place as if the images are placed ontop of
the accordion panel. The images are in the first panel container
though and so should become hidden but don't.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Genral Info</div>
<div class="AccordionPanelContent" id="accordcontent">
<p>Username: <?php echo $row_rsFull['UserName'];
?> </p>
<p>Name: <?php echo $row_rsFull['Forename']; ?>
<?php echo $row_rsFull['Surname']; ?></p>
<p>Date Of Birth: <?php echo
$row_rsFull['DateOfBirth']; ?></p>
<p>University: <?php echo
$row_rsFull['University']; ?></p>
<p>Project Name : <?php echo $row_rsFull['pName'];
?></p>
<p>Project Description: <?php echo
$row_rsFull['pDescription']; ?></p>
<p><img src="<?php echo $row_rsFull['pImage1'];
?>" alt="image 1" class="bottomimage" /><img src="<?php
echo $row_rsFull['pImage2']; ?>" alt="image 2"
class="bottomimage2" /></p>
</div>
</div>
Any Suggestions?That would be very easy, just remove the tabindex attribute
of the top level div of the accordion. However keyboard navigation
will not work at that moment. The dotted line is a browswer
specific visualisation to show that the specific item is selected
using the tabindex.
You could also add the following style to your page
div:active,
div:focus,
div:hover
outline-style: none; -moz-outline-style:none;
Then none of the div items with a tabindex get an surrounding
border. -
I want to set up a set of nested Accordion panels but I don't know how. For instance I want to make a 3 tier Navigation structure that accordions. So I would have for example: Object 1>Sub 1> Sub Sub1, Object 1>Sub 1> Sub Sub2, Object 1>Sub 2, Object 2>Sub 1> Sub Sub1, Object 2>Sub 1> Sub Sub2, Object 2>Sub 2>Sub Sub 1, Object 2>Sub 2>Sub Sub 2. However, you seem to only be able to have a sliding panel with content under it and not be able to nest it with a panel inside a panel.
I would use the Spry Menu Bar because it has multiple tiers however I really like the sliding feature. I know I have seen this type of menue before but I cannot remember where. Any help would be greatly appreciated.
Also, can you have a diferent number of sub elements? You seem to only be able to pick one size all of your sub content. However, my content is not uniform in length.
Thanks<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false });
</script>
</body>
</html>
Gramps -
ANNC: Deja Vu Automated CSS Page Pack for Accordion Panel Magic
Deja Vu captures the clean and simple approach to design that
has gone into
our web sites for many years. In fact, we're sure you'll find
Deja Vu very
familiar.
Deja Vu comes with 5 page designs. Layouts are CSS-based,
fixed-width, and
centered. Pages are automatically created using the PVII Page
Pack interface
inside Dreamweaver.
Navigation menus are powered by the latest version of
Accordion Panel Magic
(required), which automatically highlights the current page
link and expands
the panel that contains it.
You'll learn how multi-column layouts can be designed in
Fireworks and how
Fireworks is used to develop the CSS that makes your columns
render with
equal heights. It's mathematically precise yet clear and easy
to
understand - and kind of fun if you're a designer just
getting into CSS.
Deja Vu comes with a comprehensive User Guide and free
technical support.
Additional features:
Works in Dreamweaver Templates
Search engine friendly
Standards-based code
$60
http://www.projectseven.com/products/templates/pagepacks/dejavu/
The PVII TeamWell I had the same thought when I tried your demos (very
nice looking
BTW) but I guess it's not a problem for the majority of
people. Anyway
since you announce it on this NG I guess you're also
interested in
feedback too.
Kim
http://www.geekministry.com
Al skrev:
> On Tue, 05 Dec 2006 15:34:38 -0500, Thierry |
www.TJKDesign.com
> <[email protected]> wrote:
>
>> Al Sparber- PVII wrote:
>>> It's kind of like having a CSS guardian angel
hovering over you you.
>>
>>>
http://www.projectseven.com/products/templates/pagepacks/bpotter/demo.htm
>>>
>>
>> Al,
>> I know you didn't ask, but I thought I'd give you a
heads-up regarding
>> the
>> menu in this template:
>> I find it difficult (impossible?) for keyboard-users
to "get rid of" that
>> flyout menu once it is opened.
>>
>
>
>
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
>
>
> We deliver our pages in a default configuration. It's
different from
> your opinion so let's just agree to disagree. We've had
this discussion
> before and a rehash would serve no constructive purpose.
Feel free to
> email me if you have any further questions.
>
>
> Cheers
> --Al -
Accordion Panel Widget - open and close speed.
Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit -
Globally open and close all accordion panels
Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==-- -
Using text links to open accordion panel
How do I use text links (from the page's main menu) to
programatically open a particular panel.
here is the page:
http://debrankin.com/tee/SITEDESIGN/
for example: I want to click on "Resumes and Cover Letters"
in the left hand menu to open the first accordion panel (by the
same name). I have this set this page so that all panels are closed
initially.
i know i'm missing something because this obviously does not
work: i've looked for documentation and this issue is inadequately
addressed!twinflame wrote:
> i know i'm missing something because this obviously does
not work: i've looked
> for documentation and this issue is inadequately
addressed!
Not really. The problem is that you have attempted to create
a
JavaScript object called accordion1 before the accordion HTML
is even
loaded into the browser. Moreover, the script that
initializes the
accordion is already in your HTML where it should be (after
the
accordion), but it uses Accordion1, not accordion1
(JavaScript is
case-sensitive.
Remove this after your menu.
> <script type="text/javascript">
> var accordion1 = new
Spry.Widget.Accordion("Accordion1");
> </script>
Change the links in the menu to Accordion1.openPanel(0),
etc., and it
should work.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com -
Anchor links to accordion panels not working properly across browsers
Hi everyone,
I need some help to figure out why my anchor links to specific accordion panels on another page are not working properly across browsers.
I have a Map page which has tooltips on mouseover on the site markers. 15 of the tooltips have "Click here for information" anchor links (although only 14 are currently linked) which, in theory, would take you to the Nurseries page where the specified accordion panel would be opened with the nursery entry appearing at the top of the new browser window.
Here are the links to the Map page and Nurseries page, respectively:
www.alegriadesignstudio.com/RFRI/map_v6.html
www.alegriadesignstudio.com/RFRI/nurseries_v6.html
I've tested the anchor links on IE, Firefox, Google Chrome, and Safari, and have received varying results. In most cases, the anchor links worked perfectly on two of the browsers, while on the other browsers, the correct accordion panel is opened but the nursery entry does not appear at the top of the new browser window. Anchor links using Safari and Google Chrome fared better (10 out of 14 links worked properly, and 8/14, respectively), whereas when using Firefox and IE, only 3 anchor links worked properly. The target audience for this website will be using IE and Firefox, so I would appreciate any help to figure out how to tweak the code so that the most, if not all, anchor links work properly on these two browsers in particular.
Here's an anchor link which worked perfectly in IE, GC, and Safari, but in FF, the entry did not appear at the top of the new browser window.
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green dot from the top of the map (Tooltip--Location: Mangatarem) and then click on "Click here for information."]
Here's a sample anchor link in which the entry did not appear at the top of the new browser window in any of the 4 browsers:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the bottom of the map and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet; North Cotabato) and then click on "Click here for information."]
Here's a sample anchor link in which the anchor link worked properly in GC and Safari, but the entry didn't appear at the top of the browser window in IE and FF:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island north and a bit west of "Mindanao" which is called "Bohol" and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then click on the first "Click here for information."]
Many thanks in advance for your assistance!
JoyHi everyone,
I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
Many thanks in advance.
Joy -
Slideshow Image Order of Go AND Problem with Sizing an Accordion Panel
SLIDESHOW Is there a way to set the start, middle, and end in a slideshow? I have tried arranging the position of the triggers (nothing happened); and moving the targets in the layers panel (again, nothing happened). I would like the slideshow to begin and end with specific slides.
ACCORDION PANEL Will not allow me to size it smaller than 962 pixels. The content area of the accordion panel is filled with one slide show per panel or tab, and I've checked all of the elements within the slideshow to make sure nothing exceeds 960 pixels. Nothing I can find exceeds 960 pixels, but when I remove all the elements from the content area, BOOM, I can make the panel any width I want.Slide show sorting:
No, Mylenium, you are definitly wrong, You can choose any image order you want within slideshows:
1. Make thumbnail temporarily visible and drag the thumnail to the position you want.
or
2. Identify the slides in layers panel and drag their panel entries to the position you want.
Accordion panel:
You can choose whatever size you want – even with a slideshow within:
You have to make sure, that all element of the slideshow (caption, prev, next, counter) fit within the accordion panel. And – since the single accordeon panels don’t allow individual sizes – you have to make sure, that the content of every(!) accordeon panel does not exceed the size you want. -
How do I collapse all the accordion panels
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
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;Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps. -
Accordion Panels not collapsing in Adobe AIR
Hi,
I'm trying to create an AIR application with HTML/CSS/AJAX (spry).
I've got my xml dataset set up and my accordion panel widget set up.
When I preview in Safari everything works fine, but when I preview in Adobe AIR the xml data shows up and the panels, but the accordion panels aren't working, clicking on the AccordionPanelTab doesn't do anything.
Any ideas on how to fix this, (if it is even possible)??Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<link href="_Assets/css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_Assets/frameworks/AIRAliases.js"></script>
<script src="_Assets/spry/xpath.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryData.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
var dsSeasons = new Spry.Data.XMLDataSet("http://www.tvrage.com/feeds/episode_list.php?sid=21704", "Show/Episodelist/Season", {sortOnLoad:"@no", sortOrderOnLoad:"descending"});
var dsEpisodes = new Spry.Data.NestedXMLDataSet(dsSeasons, "episode", {sortOnLoad:"seasonnum", sortOrderOnLoad:"descending"});
dsSeasons.setColumnType("@no", "number");
function airdate(region, lookupFunc) {
var realdate = lookupFunc("dsEpisodes::airdate");
var array = realdate.split('-');
return array[2] + " - " + array[1] + " - " + array[0];
function seasonnr(region, lookupFunc) {
var nr = parseInt(lookupFunc("dsSeasons::@no"));
if (nr < 10) { return "0" + nr; }
else { return nr; }
</script>
<link href="_Assets/spry/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<h1>TV Show Title</h1>
<div id="showInfo" spry:region="dsSeasons dsEpisodes" class="SpryHiddenRegion">
<h2>Episode List</h2>
<div id="eplist" class="Accordion">
<div spry:repeat="dsSeasons" class="AccordionPanel">
<h3 class="AccordionPanelTab">Season {@no}</h3>
<div class="AccordionPanelContent">
<table spry:repeatchildren="dsEpisodes">
<tr class="{dsEpisodes::ds_EvenOddRow}">
<td><input name="seen" type="checkbox" value="1" /></td>
<td>{function::seasonnr}<span class="ex">x</span>{dsEpisodes::seasonnum}</td>
<td>{function::airdate}</td>
<td><a href="{dsEpisodes::link}" target="_blank">{dsEpisodes::title}</a></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var acc = new Spry.Widget.Accordion("eplist", { useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
</body>
</html>
Sorry, I don't have an online url for you, I'm still working locally.
In the browser everything works fine, only when I preview in Adobe AIR the panels stop working.
I hope you can figure it out and point me in the right direction.
Thanks -
Accordion Panels and List Menu don't work if I place html files in subfolders
Hi all,
Switched from Dreamweaver to Muse and I have very limited knowledge of code.
Not an IT expert and not a web developer this is just for my own site.
I have sub-folders in my site. All html files are inside sub-folders except index.
ie contact.html or products.html I move them manually from root to the subfolder, using the easy interface of Dreamweaver. I call the subfolder "en"
so I can have pages such as mysite.com/en/contact.html
In the subfolder I copy and paste from root the css, images and script folders,
keeping the original css/images/scripts as well, in the root, so index.html is not affected.
and same time the look of the html pages inside the subfolders does not change.
BUT
list menus and accordion panels don't work. I click and there is no movement
How can I solve this ? I know Muse does not allow the creation of subfolders,
everything is uploaded in the root.
When in Dreamweaver I had placed 50 pages in subfolders and I was indexing them in google and bing.
Now can't again put 50 pages in root and can't remove URLs and make new indexing for all these pages
Any help ? many thanks for any assistance.The iPhone, like the Ipad, uses the Mobile Safari browser, so here's an earlier thread that might give you some insight: http://forums.adobe.com/thread/613494
-
Is the Accordion Panel Capable of Holding a Gallery (with multiple pages)?
I'm trying to create a website similar to this: http://www.christianschmidt.com/ using the Accordion Panel. Can the panel's content panel hold javascript? I've tried several types of javascript based galleries and nothing seems to work correctly..
the site I'm working on: www.anhstudio.com/sample
if you have any suggestions on what javascripts I should use/work, let me know - thanks.I have spent a lot of time on this, mainly because the problems crops up every now and again. Unfortunately it goes above my ancient head and I have only managed to come up with a very partial solution. In the following, I have taken all of the links to JS files and moved them down to the bottom of the document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../SpryAssets/SpryAccordion.js"></script>
<script src="../js/jquery.ui.widget.js"></script>
<script src="../SpryAssets/SpryDOMUtils.js"></script>
<script src="../js/jquery.smoothDivScroll-1.1-min.js"></script>
<script>
var nav = new Spry.Widget.Accordion("nav", {defaultPanel: -1});
Spry.$$('.AccordionPanelTab').addEventListener('click',function(){
Spry.$$(".AccordionPanelOpen").forEach(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart",
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 12,
startAtElementId: "startAtMe",
visibleHotSpots: "always"
</script>
If you click the first tab first, you will see it working. Alas, if you happen to click any other tab first, it will not work.
HELP ARNOUT KAZEMIER!!!
Apology for the outburst. Getting closer though.
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; -
.js update of spry accordion panel tab data for countdown functionality
Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> <!--
accordion panel tab -->
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> <!-- loading -->
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> <!-- error -->
<div id="details" spry:state="ready"
spry:content="{detail}"></div> <!-- detail when ready
-->
</div> <!--accordion panel content -->
</div> <!-- accordion panel -->
<script type="text/javascript">
<!--
var AccordionSpecials = new
Spry.Widget.Accordion("AccordionSpecials", { defaultPanel: 0,
duration: 1000, useFixedPanelHeights: false, enableAnimation:true }
var observer = { onPostLoad: function(notifier, data) {
CD_Init() ; /*alert("postLoad"); */} };
//specialDisplay dsSpecials.addObserver(observer);
Spry.Data.Region.addObserver("specialDisplay", observer);
//-->
</script>
</div> <!-- accordion -->
</div> <!-- specialDisplay -->
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.
Maybe you are looking for
-
In mail, how do I attach pictures or documents as icons that open full size
in mail, how do I attach pictures or documents as icons that will open full size?
-
How do i find reminders in iCloud?
I should have a reminders option in icloud on my iMac so I can share my reminders with my hubby. It doesn't show it anywhere that I can find. I've gone to icloud.com and checked the systems icloud settings on my iMac...nothing. Please help!
-
How to find out the application server info
Hi, I am wondering how to find out the application server info in Java code, just like how to find out the db platform being used. Thanks
-
Eclipse BPEL Designer with Oracle BPEL Process Manager
Gurus, I am tryting to develop a BPEL 2 process using Eclipse Helios BPEL Designer (v0.5). Request your help with a problem that I am facing, which is as follows: I am trying to create a Partner Link (PL) in my BPEL process, using the Partner Link Ty
-
Hi, I realise af:tree cannot be view when use safari browser.(3.04) but not in 3.03 Is there any way to over come this? Thanks KheeTeck Message was edited by: kheeteck