Spry Accordion Link on PannelTab
After updating the Spry framework to 1.6, the link i used on
the AccordionPannelTab stopped working.
How should i do it?
ooooohhhh theres a link on ON the tabs.
I see. U could add a onclick function for it.
it would be something like
function goto(url){
window.location.replace(url);
than u can add a onclick funcion on the panneltabs.
onclick="goto('
http://www.yoursitename.com/path/url/index.htm');"
please note.. this will stop showing the pannel
content.
Similar Messages
-
I want to link certain text from a homepage to a second page
that contains a SPRY Accordion with three panels. But I want to
link to the second panel open, even though this is not the default
open panel if you load that page independantly. Is there a way of
telling the widget to open a specific panel through the link code
on the homepage? I am trying to avoid the visitor having to click
the panel for the selected topic on the homepage.We have that feature built into our widgets, which are much
different than
spry:
http://www.projectseven.com/products/tools/accordion/tweaks/params/
If you don't have a development budget for add-ons, you can
look through the
spry docs:
http://labs.adobe.com/technologies/spry/docs.html
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"RGracia" <[email protected]> wrote in
message
news:fn55pk$htn$[email protected]..
>I want to link certain text from a homepage to a second
page that contains
>a
> SPRY Accordion with three panels. But I want to link to
the second panel
> open,
> even though this is not the default open panel if you
load that page
> independantly. Is there a way of telling the widget to
open a specific
> panel
> through the link code on the homepage? I am trying to
avoid the visitor
> having
> to click the panel for the selected topic on the
homepage.
> -
Greetings:
I am attempting to change the link color to "none" within a
Dreamweaver CS3 Spry Accordion navigational element and I am unable
to make the changes I need. I have tried to change the internal
link page properties within my HTML document and also set the "a"
properties in the linked CSS file to "text-decoration: none" and
the link color still remains in the Accordion navigational element.
Do you have any suggestions on how I can fix this?
Thanks for your help!in your spy accordian css file, put:
a:link
text-decoration:none;
or, even better
.nolinkunderline
text-decoration:none;
and then apply the style to your accordians hyperlinks
i am assuming it's the underline element that you want
removed -
The underline is in the middle of the links in my spry accordion
I created a spry accordion menu in Dreamweaver CS4, and when I test it the underline is in the middle of the links in my spry accordion. This is not happening when I test it in a browser on the Mac I'm working on, but when I test it on a PC my rollover links have the line going through the center verses being underlined. The rest of the links on my page are fine, this is just happening when I rollover my submenu links in my Spry accordion when I test it in a browser on a PC. I am a "spry virgin," so please help!!!
Hello Em_needs_help,
You posted this message in the InContext Editing Web Developer discussion. I'm going to move your post to the Spry forums where more spry experts will be able to help.
Best regards,
Corey -
How to create anchor links within a spry accordion?
I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser? -
Spry accordion for CS5 links not working
Hi everyone!
I build a Spry accordion for my website, and while the functionality of it works beautifully, the links do NOT work. I have double and triple checked that my links are correct, and when I am in a preview mode, the text is changing to my a:hover specifications. Does anyone have any useful suggestions? Please be gentle when answering, I know my way around HTML and Dreamweaver, but am trained as a designer, not a coder.
Thank you!Please upload your site and supply a link.
Gramps -
Hi to all,
I have a small issue with a website using a Spry Accordion Widget to create a collapsible menu. I have several items of navigation, for example:
Link 1
Link 1.1
Link 1.2
The Accordion works well, but in some level there is only one item, and no subitems.
Link 2
Link 3
When I try to add a hyperlink to that level, nothing happens. I removed the div of the content, leaving only the panel tab, but the spry tries to make the animation to open the content tab, which is no longer there. I only want to add a link in the panel tab to open another page.
Any suggestions? Newbie here...
Thanks in advance...Accordion are not ment to be used as menu bars. They are ment for hiding / displaying content.
That is why Spry cancels all "native" events that are fired on the tabs. So the accordion will still
operate if you changed your markup from divs to <a> elements and <p> tags.
You can overwrite this behaviour by adding the following attribute on your <a> element that you have
placed inside the accordion tab:
onclick="window.location=this.href;" -
Spry Accordion Menu Tab Link css - totally confused
Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Photo Gallery</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="PhotoGallery.html">Gallery 1</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Unit Newsletters</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="Newsletter.html">February 2010</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Forms</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="">Joining Instructions</a></li>
<li><a href="">Enrolment</a></li>
<li><a href="">Next of Kin</a></li>
<li><a href="">Volunteer Blue Card</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="WhatsOn.html">Whats On</a></li>
<li><a href="PSG.html">Parent Support Group</a></li>
</ul>
</div>
</div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none; -
Spry: Accordion does not close properly
Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
ChuckHey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
-->
</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
<div id="NavBar">
<div id="SmallerNavBar">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
<p><em><strong>Friday Night :</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
<p><em><strong>Saturday:</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
<br> <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
<p><em><strong>Sunday:</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
<p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><strong>Content 5</strong></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><strong>Content 6</strong></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p>2007</p>
<p>2008</p>
</div>
</div>
</div>
<div id="Cover">
<p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
<br>Cover Designed By:</br>
<br>Andrea Pagenkopf</br>
<br>Rolling Rockets 4-H</p>
</div>
</div>
</div>
</div>
<div id="MainContentBox">
<div id="BoxForText">
<p align="center">Welcome to the new</p>
<p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
<p align="center">Webpage</p>
<p align="center"> </p>
<p align="center"><strong><em><u>News:</u></em></strong></p>
<p align="center"><em>Buttons for 2009 are on sale now! </em></p>
<p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
<p align="center"> </p>
<p align="center"><strong><em><u>Updates:</u></em></strong></p>
<p align="left"><em>7/10/2009</em> - New Homepage</p>
<p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
</div>
</div>
<div id="BottomBox"></div>
<!-- end #container -->
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , defaultPanel: -1 });
//-->
</script>
</body>
</html> -
Spry Accordion - Tabs open and then close after page loads
I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{useFixedPanelHeights:false, enableAnimation: false, defaultPanel: 0 });
//-->
</script>
But, all of the tabs open and then close on page load.
My page: http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, RonWell to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
// if (e.preventDefault) e.preventDefault();
// else e.returnValue = false;
// if (e.stopPropagation) e.stopPropagation();
// else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions -
Spry Accordion gains scroll bars in IE7
Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks -
Using an image as label in Spry Accordion Menu
I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32) -
Spry Accordion Hover/Active Issue
I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional. The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded. Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/faq.html
Spry CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* 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 {
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.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(/content-opaque.png);
background-attachment: fixed;
background-repeat: repeat;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
background-color: #300;
font-size: 12px;
/* 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 {
margin: 0px;
padding: 2px;
background-image: url(../infobkgd.png);
background-attachment: fixed;
background-repeat: repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
overflow: hidden;
height: 40
[x;
height: 100%;
/* 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: #000033;
/* 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: #FFFFFF;
background-color: #003;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #FFFFFF;
/* 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: #003;
/* 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: #000033;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
Layout CSS
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Donate Today!</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/donatepage.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
<div id="navigation">
<ul id="donatemenu" class="MenuBarHorizontal">
<li><a href="profile.html">home</a> </li>
<li><a href="theride.html">the ride</a></li>
<li><a href="donate.html">donate</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">gallery</a>
<ul>
<li><a href="photo-gallery.html">photo</a></li>
<li><a href="video-gallery.html">video</a></li>
</ul>
</li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<span class="AccordionPanel">
<div class="AccordionPanelTab"></div>
</span>
<div id="faq-content">
<div id="faq-accordion" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Is this ride still going on?</div>
<div class="AccordionPanelContent">A: Yes</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
<div class="AccordionPanelContent">A: Saturday, September 7th.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
<div class="AccordionPanelContent">A: Online registration will begin in May. Check-in at 8:00am on September 7th.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Where is check-in?</div>
<div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Will the route be the same?</div>
<div class="AccordionPanelContent">A: We have changed the route this year few a few reasons. You can visit the route map to see.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by. What time will you be on our street?</div>
<div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
<div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What does that give me?</div>
<div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
<div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis. However, as we got larger, the costs associated with putting the ride together grew immensely. The minimum donation allows for us to cover the costs for the ride. However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
<div class="AccordionPanelContent">A: Of course. </div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
<div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors. Those will be announced at a later date.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
<div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
<div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
<div class="AccordionPanelContent">A: Yes</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Are scooters allowed?</div>
<div class="AccordionPanelContent">A: Eh, sure, why not?</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
<div class="AccordionPanelContent">A: Probably. We usually do not know about their appearance ahead of time. </div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
<div class="AccordionPanelContent">A: A little</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
<div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
<div class="AccordionPanelContent">A: There will.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
<div class="AccordionPanelContent">A: Yes.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What is my cost?</div>
<div class="AccordionPanelContent">A: General Public $40. Student $20. Bikers the day of $40.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
<div class="AccordionPanelContent">A: No.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
<div class="AccordionPanelContent">A: Food - $5, Drink - $2, Beer - $5</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
<div class="AccordionPanelContent">A: Yes.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: That’s awesome. I love you.</div>
<div class="AccordionPanelContent">A: Control yourself.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
<div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
<div class="AccordionPanelContent">A: Click here and fill out our application. It’s a lot easier than taking the S.A.T.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
<div class="AccordionPanelContent">A: Certainly! Click here for our sponsorship packet.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
<div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
<div class="AccordionPanelContent">A: Yup</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
<div class="AccordionPanelContent">A: We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
<div class="AccordionPanelContent">A: We admit it was slow. We know, we know. Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little. Also, the new route allows us go faster through town.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
<div class="AccordionPanelContent">A: The base will not allow that.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
<div class="AccordionPanelContent">Content 34</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
<div class="AccordionPanelContent">A: Negatory. Every individual is his/her own team. </div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
<div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Q: What is the WHF?</div>
<div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
</div>
</div>
</div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
</script>
</body>
</html>
Screenshot of how it looks locally in Dreamweaver:SpryAccordion.css
You have an error that is killing the rest of your code shown below in red. Remove it.
.AccordionPanelContent {
margin: 0px;
padding: 2px; /**suggest using 12px or more**/
background-image: url(../infobkgd.png);
background-attachment: fixed;
background-repeat: repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px; /**suggest using 16px or more**/
color: #FFF;
overflow: hidden;
height: 40
[x;
height: 100%;
Nancy O. -
Colour problem with Spry Accordion
Hi, I'm trying to create a website with a spry accordion. I've had some trouble with it (as I'm not good at CSS, it's new to me) and I've solved them all except for one: a problem with the colour of the bar when the section is open.
This is my website: http://s313354774.mialojamiento.es/saibe/design3/Publish/INICI.html
When the menu is closed everything is ok, but when you open it then the colour changes, making a gradation between the new colour and the original one. I've checked the stylesheet and there the original colour doesn't appear anywhere, so it's wierd to me.
Does anyone know why is it happenning? If i'ts because something stupid forgive me, as I told you this is quite new to me and I'm trying to learn day by day.
SergiSegi,
This one has got me stumped. If I copy your SpryAccordion.css and apply my copy to the document, there is no problem. Have a look here http://pleysier.com.au/sergi/
I know this will not help except to say, that if you change
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
to
<link href="http://pleysier.com.au/SpryAccordion.css" rel="stylesheet" type="text/css" />
see what happens.
Gramps -
A simple Spry Accordion Question (I think)
Hi all:
I've searched but can't find, but I think this is a simple one.
I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
<!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="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
JAVASCRIPT
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.duration = 500;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
// Unfortunately in some browsers like Safari, the Stylesheets our
// page depends on may not have been loaded at the time we are called.
// This means we have to defer attaching our behaviors until after the
// onload event fires, since some of our behaviors rely on dimensions
// specified in the CSS.
if (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.Accordion.loadQueue.push(this);
Spry.Widget.Accordion.onloadDidFire = false;
Spry.Widget.Accordion.loadQueue = [];
Spry.Widget.Accordion.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Accordion.processLoadQueue = function(handler)
Spry.Widget.Accordion.onloadDidFire = true;
var q = Spry.Widget.Accordion.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
Spry.Widget.Accordion.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.openPanel = function(panel)
var panelA = this.currentPanel;
var panelB = panel;
if (!panelB || panelA == panelB)
return;
var contentA;
if( panelA )
contentA = this.getPanelContent(panelA);
var contentB = this.getPanelContent(panelB);
if (! contentB)
return;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
this.animator.start();
else
if(contentA)
contentA.style.height = "0px";
contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
if(panelA)
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
Spry.Widget.Accordion.prototype.openNextPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
this.openPanel(panels[curPanelIndex+1]);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
this.openPanel(panels[curPanelIndex-1]);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[0]);
Spry.Widget.Accordion.prototype.openLastPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[panels.length-1]);
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
// if (this.enableKeyboardNavigation)
// this.element.focus();
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();
Spry.Widget.Accordion.prototype.onFocus = function(e)
// this.element.focus();
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
// this.element.blur();
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
var content = this.getPanelContent(panel);
if (isDefault)
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
else
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
content.style.height = "0px";
this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
// if (!tabIndexAttr) this.element.tabindex = 0;
if (tabIndexAttr)
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
return this.currentPanel;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
if( this.currentPanel == panels[i] )
return i;
return 0;
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.Accordion.prototype.focus = function()
if (this.element && this.element.focus)
this.element.focus();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
this.timer = null;
this.interval = 0;
this.stepCount = 0;
this.fps = 0;
this.steps = 10;
this.duration = 500;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
Spry.Widget.Accordion.setOptions(this, opts, true);
// If caller specified speed in terms of frames per second,
// convert them into steps.
if (this.fps > 0)
this.interval = Math.floor(1000 / this.fps);
this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
else if (this.steps > 0)
this.interval = this.duration / this.steps;
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel || h > 0)
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
if (this.stepCount < this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
++this.stepCount;
this.animate();
if (this.stepCount < this.steps)
this.start();
else if (this.onComplete)
this.onComplete();
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
var i, obj;
if (this.stepCount >= this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
if (obj.panel != this.panel)
obj.content.style.height = "0px";
obj.content.style.overflow = obj.overflow;
obj.content.style.height = obj.toHeight + "px";
else
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.fromHeight += obj.increment;
obj.content.style.height = obj.fromHeight + "px";On the bottom of yourpage you have this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Change it to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
Ken Ford
Maybe you are looking for
-
Photoshop CC is dramatically slow when resizing or drawing.
Hello everyone. Please assist me in finding out a bottleneck: OS: Windows 7 x64 Professional Photoshop CC, not 2014. Hardware configuration: MotherBoard- Asus P8Z77-V LX LGA CPU - Intel Core i7 2700K + Zalman CNPS10X EXTREME Video Card- Asus GTX660-D
-
Installed new hard drive and ram but freezes on apple logo
i have a mid 2010 macbook pro and last night i opened it up and installed a 750GB hard drive and 8gb of ram. now my computer doesn't want to boot up, even with the install DVD (original one) i have done the PRAM thing and even went back to my old har
-
Mass Creation of Purchasing Info Records
Hi all, we want to change the vendor for a certain amount of articles (old vendor e.g. 102, new vendor e.g. 768). To order the articles (maybe approx. 1000) by the new vendor, we need to create new Purchasing Info Record (for vendor 768) for every ar
-
File size and deleting some content out of that...
Dear All, I have a log file...using FileWriter, I am updating that file...Once if the log file's content reaches certain limit(some 1000 lines), I want to delete the first 100 lines...how to do this...any suggestions/codes please... bye & waiting for
-
Where can download Patch 13 (6.0.8.22.1)
Dear All Kindly tell me the link to download Oracle forms 6i with Patch 13 (6.0.8.22.1) or patch 14 Regards gk