Spry Accordion - disaster
Hi
I am having some problems with my SPRY Accordion. I have
ruined the default CSS file for
the Spry Accordion (spryAccordion.css)
I have changed the settings and now made a mess.
The problem seems to be with Mozilla Firefox mostly, but also
with IE and Navigator.
It is hard to explain so an example of the problem can be
seen at:
http://www.brettenman.com.au/test-acc.html.
Also i cannot figure out how to make the Spry Accordionit
aligned at the top in Dreamweaver?
I would greatly appreciate some help!
Thanks
Brett
Brett,
> I am having some problems with my SPRY Accordion. I have
ruined the default
> CSS file for the Spry Accordion (spryAccordion.css)
>
> I have changed the settings and now made a mess.
Delete spryAccordion.css from your site, then add a new
Accordion
somewhere, and DW will copy the original file back to your
site.
Hint: you should override the CSS in your own style sheet
instead of
editing the original.
HTH,
Randy
Similar Messages
-
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) -
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 can I make the spry accordion remember the panel open
when I refresh the page or jump to a new page?
I am using the accordion feature on all my pages as a
navigation aid. It has three panels. When you refresh the page the
panel goes back to the default pane... Is there a way of
controlling this so that the browser can remember the pane that is
open (say set a variable, cookie, other?)Look for "Set the default open panel" on the following page:
http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
Keep in mind you would need to change that bit of code on
every page. The only way to do it more dynamically would be to
include a custom javascript or PHP/ASP style script in order to
change the value. -
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 -
.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. -
Spry Accordion not working in IE7 and IE6
My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
The site is www.christendom.edu/n. It is there on the left. I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
Please help!Remove the offending comma (marked in red)
var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
I hope this helps.
Ben -
Spry Accordion default panel in Master Detail Page
Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
<div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
<div class="AccordionPanelContent">
<table width="385" border="0" class="AccordionPanel" id="content1">
<?php do { ?>
<tr>
<td >
<a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
</td>
</tr>
<?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
</table>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0, useFixedPanelHeights: false});
-->
</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben -
Controlling spry accordion from flash doesn't work in IE 8
Hi all,
I created a spry accordion in an html page and a little spry controller in flash, on the same page.
The flash controller contains buttons that should trigger the accordion in the same page.
here is the code I inserted in a flash button:
on (release) {
getURL ("javascript:acc_ricette.openPanel('mypanel_ID'); return false;")
where mypanel_ID is the ID of the accordion on the page.
When I click any flash button this works perfectly in firefox and chrome, but it doesn't work in IE 8 and Opera.
The accordion itself (not using the flash buttons) works in all browser.
Is there a solution
TIA
tonyHi all,
I created a spry accordion in an html page and a little spry controller in flash, on the same page.
The flash controller contains buttons that should trigger the accordion in the same page.
here is the code I inserted in a flash button:
on (release) {
getURL ("javascript:acc_ricette.openPanel('mypanel_ID'); return false;")
where mypanel_ID is the ID of the accordion on the page.
When I click any flash button this works perfectly in firefox and chrome, but it doesn't work in IE 8 and Opera.
The accordion itself (not using the flash buttons) works in all browser.
Is there a solution
TIA
tony -
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?
Maybe you are looking for
-
I bought song on my iphone and they did not show up on my computer
I bought music on my iphone and it did not transfer to my computer. Also the itunes on my computer will not let me purchase any music.
-
Can't load data to cubes - same error for all DTPs "exception in substep write to fact table"
Hi Experts, This initial DTP error is: Data package processing terminated Message no. RSBK229 Error while updating to target <cubename> (type INFOCUBE) Message no. RSBK241 If I drill down to the specific package in the process monitor the error is:
-
Problem Deploying Composites to Oracle SOA 11.1.1.5 (STUCK Thread Issue)
Hi All, I got stuck thread issues when deploying composites to Oracle SOA 11.1.1.5 running on Windows Server 2008 R2. Even the SimpleApproval composite which ships with the standard installation is having trouble deploying. The composites are deployi
-
Open PDF files automatically by Reader
How do I get Reader to open a PDF file without dragging it into the Reader icon?
-
Multiple Speaker Output Control using Java!
Hi, I am trying to connect around 4 speakers in 4 different rooms of the house. I would to create a Java program to play music through only 1 of the four at any one time or even better play different music in different speakers. How would i go about