Dreamweaver cs4 funny acting spry accordion

, I've created a spry accordion and customize it to fit the section of page for our Web site. It works great except for one hitch with the last tab? I check the css and everything seems normal not so sure of the JS. I have no JS knowledge or experience. Here is the page: http://vireomarketing.com/social.html

Need help, does anyone have the same experience or a problem with this.

Thanks in advance for your help.

That's the problem

. AccordionPanelContent {margin-bottom: 25px; margin-top: 5px ;}}

Change the values to 0 (zero) and all is well.

To give the upper and lower part of the space, either insert

or give the paragraph a style rule.

GRAMPS

Tags: Dreamweaver

Similar Questions

Where the Spry Javascript files in Dreamweaver CS4?

I'm sure this is a trivial question, but I can't find them.
Adobe's Web site indicates that Dreamweaver CS4 with Spry 1.6. I'm trying to create a SpryNestXMLDataSet, but impossible to find where the js file is stored, the copy on my site. I see nothing in the insert Spry data set Wizard that allows me to create a nested DataSet XML. So, I can get Dreamweaver to add the xpath.js and SpryData.js files, but I can't understand how to add the SpryNestXMLDataSet.js file, or find a copy in the Dreamweaver program files.
Thank you
Van

I'm curious to know why the file is NOT included with the installation of Dreamweaver CS4, especially since the site Adobe indicates that v1.6 Spry comes with Dreamweaver CS4.

No, said what the Adobe site is the following:

Spry in Dreamweaver CS4 features use the latest Spry version: 1.6.1.

Dreamweaver CS4 uses Spry 1.6.1 to support widgets, effects, and data sets that can be built through the Dreamweaver interface. It does not include all of the Spry framework, which is capable of much more than the features implemented in Dreamweaver.

My first question was about the where these files are stored in the installation of Dreamweaver CS4 on my computer. When inserting an object Spry in Dreamweaver menu, the SpryAssets folder is created and the appropriate files are copied to it. Where is Dreamweaver get these include files? I can not find anywhere inside the Dreamweaver installation on my computer.

On Vista, they are in C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\Shared\Spry.

Dreamweaver CS4 and IE 5.2 for Mac problem

I'm testing my new/first site. I use Dreamweaver CS4. Horizontal Spry menu bar works very well in Internet Explorer and Safari, but not in Microsoft Internet Explorer 5.2 for Mac 5.2.3 (5815.1). The menu bar horizontal becomes vertical and the submenus are not available. I ran to each Web page and my CSS files browser compatibility tests and they don't come back "no problems found". What can I do to fix the problem? I have a PC (Vista) and use my neighbor's Mac to check the browser. Thank you.

Don't worry if your site doesn't work at all in Internet Explorer for Mac. It's outdated software that has not been developed since Jaguar/Panther. In no way reflects IE on Windows, and statistics show the majority of Mac users use Safari or Firefox with Camino and opera in behind them.

Dreamweaver will not insert a Spry Accordion with css

I'm working on an accordion Spry in Dreamweaver and get into trouble, so I have deleted all its css in the css Panel. Now, when I say Insert > Spry Accordion, it is not all css.
Uh-oh, I did?

Make a new page. Insert the Spry Accordion and save the page folder in the root of your site.

DW should save active Spry to your folder of active Spry. If not, see below for the default CSS file.

@charset "UTF-8";

/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.

/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/ * This is the selector for the main container of the accordion. For our style by default.

* draw us left, right and bottom borders. The upper edge of the accordion

* is made by the first AccordionPanelTab which never moves.

*

* If you want to limit the width of the Accordion widget, set a width

* the accordion container. By default, our accordion expands horizontally to fill

* a space available.

*

* The name of the class ("accordion") used in this switch is not necessary

* make the widget function. You can use any class name you want to style the

* Accordion container.

*/

. Accordion {}

border-left: 1px solid gray;

border-right: 1px solid black;

border-bottom: 1px solid gray;

overflow: hidden;

}

/ * This is the selector for the AccordionPanel container which houses the

* tab panel and panel content area. It is not make it visually, but we

* ensure that it has zero margin and padding.

*

* The name of the class ("AccordionPanel") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of accordion panel.

*/

. {AccordionPanel}

margin: 0px;

padding: 0px;

}

/ * This is the selector for the AccordionPanelTab. This container houses

the Panel personnel. It is also the container where the user clicks

* to open a specific panel.

*

* The name of the class ("AccordionPanelTab") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of Accordion Panel tab.

*

* NOTE:

* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the

* the user to select the text in the AccordionPanelTab. Here is the browser owner

properties that only work in Mozilla browsers (such as FireFox) and KHTML

* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to

* validate and don't care if the user can select text in an AccordionPanelTab.

* You can remove these properties without affecting the functionality of the widget.

*/

. {AccordionPanelTab}

background-color: #CCCCCC;

border-top: 1px solid black;

border-bottom: 1px solid gray;

margin: 0px;

padding: 2px;

cursor: pointer;

-moz-user-select: none;

-khtml-user-select: none;

}

/ * This is the selector for the content area of a Panel. It is important to note that

* You should never put any padding on the content area of the group if you plan to

* use the animations of accordion panel. Place padding non-zero on the content

* area can cause accordion suddenly increase in height, while signs alive.

*

* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel

* Content container.

*

* The name of the class ("AccordionPanelContent") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of the accordion panel content.

*/

. {AccordionPanelContent}

overflow: auto;

margin: 0px;

padding: 0px;

height: 200px;

}

/ * This is an example of how to change the appearance of the tab of the Panel which is

* currently open. The "AccordionPanelOpen" class is added and removed programmatically

* to panels as long as the user clicks on the tabs in the accordion.

*/

. AccordionPanelOpen. {AccordionPanelTab}

background-color: #EEEEEE;

}

/ * This is an example of how to change the appearance of the tab of the Panel as the

* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically

* and removed containers tab panel as the mouse enters and leaves the tab container.

*/

. {AccordionPanelTabHover}

color: #555555;

}

. AccordionPanelOpen. {AccordionPanelTabHover}

color: #555555;

}

/ * This is an example of how to change the appearance of all the Panel tabs when the

* Accordion has focus. The class "AccordionFocused" is programmatically added and removed

* whenever the accordion wins or loses the keyboard focus.

*/

. AccordionFocused. {AccordionPanelTab}

background-color: #3399FF;

}

/ * This is an example of how to change the appearance of the tab of the Panel which is

* currently open when the accordion is in focus.

*/

. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}

background-color: #33CCFF;

}

/ * Printing rules * /.

@media print {}

. Accordion {}

overflow: visible! important;

}

. {AccordionPanelContent}

display: block! important;

overflow: visible! important;

height: auto! important;

}

}

Copy & paste into a new CSS file empty. Save in the Spry Assets like SpryAccordion.css file

Nancy O.

Dreamweaver CS4 errors, Spry widget does not. Help, please!

I remodel a website and downloaded the this contact page html file. I opened it in Dreamweaver and I started getting this error. I opened the html file has some JavaScripts inside and I think, the scripts had a conflict with Dreamweaver CS4. I already deleted these files, I tried to open it and I always meet these errors.
These are the errors I get:
1. when I open Dreamweaver, this pop-up message:
"While executing onLoad in RecordsetFind.htm, the following JavaScript error has occurred:
In the file "RecordsetFind".
findRs is not defined. »
2. I click OK. Then I get this message:
"While executing onLoad in design Notes_onOpen.htm, the following JavaScript error has occurred:
In the file "Notes_onOpen Design".
onOpen is undefined. »
3. I just click OK. When I open a html file to edit or create a new, this error pops up again:
"While executing onLoad in design Notes_onOpen.htm, the following JavaScript error has occurred:
In the file "Notes_onOpen Design".
onOpen is undefined. »
4. I shall yet once just click OK, then this error:
"The following translators were not loaded due to errors:
ColdFusion.htm: has configuration information that is invalid.
SpryWidget.htm: has configuration information that is invalid. »
5 then, I will just click OK again. Then, when I'm working with projects or create a new project with Spry, it does not work properly. I got the code and update the list Spry or content manually.
6. when I close Dreamweaver, I always have this error:
"While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error has occurred:
In the file "TeamAdminTempDelete".
delTempFile is not defined.
I tried to uninstall the Dreamweaver and install again, but it did not work.
What should I do to make the spry works again and remove all those annoying errors? Furthermore, all my Spry widgets do not work and these errors I encounter in all the Sites that I'm trying. How can I make it work again? I tried the search problems in CS4, but I couldn't see one, only in CS3.
Help, please.

See if the following can help (found in the Dreamweaver FAQ)

JavaScript and other unexpected errors

--
Mark A. Boyd
Keep-on-Learnine :-)
This message was processed and published by Jive.
It will not be considered an accurate representation of my words.
She may not even have been designed as a response to your message.

Spry Accordion collapses when the default Panel is set to-1

Hello
I created an accordion spry in dreamweaver Cs4 and needed all the tabs to close when the page is opened.
I set my Panel by default-1 in the following script, I inserted at the bottom of the page:
< script type = "text/javascript" >
< var Accordion1 = new Spry. Widget. Accordion ("Accordion1", {enableAnimation: false, useFixedPanelHeights: false, defaultPanel:-1}); < /script >
However, when you click on one of the closed tabs, the accorion opens just enough to show half of the first line, them immediately closes. is there a reason for this?
Thank you very much

Hello

In the visualization of source code of the page I don't see the you indicated as being used below.

I did find the following in viewing page source code, two references to the accordion1 panel:

As for the immediate above var Accordion, I am using the exact same in multiple web sites, without issues including IE8. So perhaps IE8 is having some issues with the duplicate var Accordion references. Also FYI, the var Accordion(s) do not appear to be at the bottom of the page per source code viewing.

Leonard B

My Spry Accordion will not work in IE but goes to the opera

Hello world
I'm having a problem with my Accordion widget spry in a website I'm trying. Keep in mind theres a lot of things to fix, but it is in its infancy. What happens is, if you go under the heading, business and training, then you will see a FAQ section. You will notice that the tabs are open and it does everything just not correctly in IE, Chrome and Firefos but it works in Chrome. (I've not tried in Safari as my computer crashes?) I have included the link and the code below.
Thank you
Steve
www.adelxt.NET
Code:
< name meta = "keywords" content = "computer, consulting, Director, windows, 2000, 2003, 2008, XP, Vista, Sonicwall, Novell, Netware, Virus, New Hampshire, Massachusetts, North, wireless, cabling, South, firewall" / >
< name meta = "description" content = "a local consulting company specializing in Windows Server and Novell Netware as firewalls. This company helps out and installed networks, wiredd and wireless and keep your network. "/ >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
"< html xmlns ="http://www.w3.org/1999/xhtml">".
< style type = "text/css" >

< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarVertical.css" rel = "stylesheet" type = "text/css" / > "
< script type = "text/javascript" >
var _gaq = _gaq. [];
_gaq.push (['_setAccount ',' UA-18563317-1 ""]);
_gaq.push (['_trackPageview ']);
(function() {}
GA var = document.createElement ('script'); GA.type = ' text/javascript '; GA. Async = true;
ga.src = ("https:" == document.location.protocol? ) https://SSL ' : ' http://www ( ') + «.google-analytics.com/ga.js ";
var s = document.getElementsByTagName ('script') [0]; ParentNode.InsertBefore (ga, s);
})();
< /script >

< / head >
< body class = "twoColElsLtHdr" >
< div id = "container" >
< div id = "header" >
< table width = "100%" border = "0" align = "center" >
< b >
< th bgcolor = "#FF6633" scope = "col" > < div align = "left" >
< p align = "center" class = "style2 style4" > Adel - Xt Computer Company < /p >
< p align = "center" class = "style2 style4" > Derry, NH 03038 < /p >
< p align = "center" class = 'style2 style4' > 1-603-434-5311 < /p >
< / div > < /th >
< scope = "col" th > < h1 >
< div align = "center" > the House of formation for the individual < / div >
< / h1 > < /th >
< /tr >
< /table >
<!-end #header--> < / div >

<! - beginning of Horizontal menu Bar - >
< div id = "horizontalmenu" >
<!-#include file = "files/Horizontalmenubar.ssi ISS" - >
< / div >
<!-end of Menu bar-> horizontal
<! - beginning of the right sidebar - >
< div id = "sidebarright" >
< h2 align = "center" > training FAQ < / h2 >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Steve has never taught in school? < / div >
< div class = "AccordionPanelContent" > Yes. Steve has taught several computer, math, and engineering vlasses in local colleges. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > what is the history of Steve? < / div >
< div class = "AccordionPanelContent" >
< p > Steve has a BSME in mechanical engineering, master's degree in Business Administration (MBA), advanced concentration in decision-support systems (DSS) and Microsoft certification. < /p >
< p > Steve is also 18 years working in the industry in the field of technology of Information (IT), engineering (software & amp; (Mechanical), manufacturing, engineering, management, quality, manufacturing, and much more... < /p >
< / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > what is the maximum I can get in a clasroom. < / div >
< div class = "AccordionPanelContent" > it's up to you. Steve will discuss this with you and point out the advantages and disadvantages of having too many students in a session. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Will Steve training night? < / div >
< div class = "AccordionPanelContent" > for special occasions, it will be. Evening training normally is done with a few reviews for Steve. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > does Steve have a program < / div >
< div class = "AccordionPanelContent" > No. that's exactly what he doesn't want. Steve wants to customize training to your company. An important part of the training is planning which is what he will discuss with you. < / div >
< / div >
< / div >
< p > < / p >
< p > < / p >
< / div >
< div id = "mainContent" >
Training of < h2 > < / h2 >
< div > Adel-Xt computer will create a training program for you and your employees. We will be in gear
the training program for your company then used following this class will become more efficient in their daily work skills. Times
a program is approved we will send you our instructor (Steve) to your facilities to teach to the class. < / div >
< div > < / div >
< Div > please call 434-5311
"or < a href ="mailto:[email protected]"target ="_self"> contact us < /a > for more information on how Adel-Xt computer can help your business become more efficient, which leads to bigger profits." < / div >
< p > < br / >
< /p >
< p >
<!-end #mainContent->
< /p >
< / div >
< p >
<!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child-> fleet
< /p >
< div id = "subcontent2" align = "center" >
< H2 > sound are some examples of training < / h2 >
< class p 'style4' = > beginner training for people new to computers. < /p >
< class p 'style4' = > Excel 2003, 2007, 2010 < /p >
< class p "style4" = > Word 2003, 2007, 2010 < /p >
< class p 'style4' = > Email use and precautions < /p >
< class p = "style4" >... < /p >
< p > < / p >
< / div >

< / div >
< p > < br class = 'clearfloat' / >
< /p >
< div id = "footer" >
"< table width ="100% "border =" 0 ">"
< b >
< scope = "col" th > < class p = "style5" > we are currently redesigning our Web site. "If a link does not please contact us via < a href ="mailto:[email protected] "> e-mail < /a> or call us at the 603.434.5311." < /p >
< p > Adel-Xt Computer Company, Derry, NH 03038 1-603-434-5311 contact us < /p >
< p > update:
<!-#BeginDate format: fcAm1a-> Friday, November 5, 2010 17:29 <!-#EndDate->
< /p > < /th >
< /tr >
< /table >
"< a href ="http://www.tinycounter.com"target ="_blank"title ="web counter"> < img border ="0"alt ="web counter"src ="http://mycounter.tinycounter.com/index.php?user=adelxt "> < / has>
<!-end #footer--> < / div >

<!-end #container--> < / div >
< script type = "text/javascript" >
<!--
var MenuBar2 = new Spry.Widget.MenuBar ("MenuBar2", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
var Accordion1 = new Spry.Widget.Accordion ("Accordion1");
->
< /script >
< / html >
< / body >

You are not using the latest Spry files

The latest version of the Adobe Spry 1.6.1 Framework it is the same version that ships with Dreamweaver CS4. If you are using Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can be easily done by using Updater Spry who can be found here.

If you replace

you will notice that it works as it should.

Dreamweaver CS4 for ArrauHouse

Dear Adobe Dreamweaver community,
I have developed an education extended, not-for-profit site on pianist Claudio Arrau for the last twelve years (see "ArrauHouse").
I am pretty illiterate about the technical aspects of computing and until recently, I could count on the good services of a contributor on the site for all my computer problems.
I use Adobe Dreamweaver CS4 that satisfied all my needs and meets the objective and scope of the Web site.
My question is this:
I lost the connection records and files of the tool of Dreamweaver on my desk. This tool is here where I work every day to day information, add pictures and generally to develop the Web site.
All folders and files are in Dreamweaver in my computer, I can see through an alternative route. Only the working tool Dreamweaver more access to them. The files cannot be worked within this working tool.
He has no problem with the connection of the files on my computer for the software security CuteFTP 9 and this software to host Aabaco (Yahoo).
Are there in the community a kind, well informed someone who could access my computer live and see how to restore the link between the files from my hard drive and the tool of Dreamweaver on my desk?
Very grateful. José-Manuel.

This is a public forum - no official technical support Adobe. I am a user of colleagues who does not to pry into someone's computer. Which is your property to keep as you seem. If you want, hire an it expert specialist in your area to help you. But don't ever invite strangers to your computer. Not sure what they can do for you, your files, your identity, your software, etc...

When DW starts acting strange, the first thing to try is to remove the corrupt in DW Cache

http://forums.Adobe.com/thread/494811

If this does not help, try to restore preferences

http://helpx.Adobe.com/Dreamweaver/KB/restore-preferences-Dreamweaver-CS4-CS5.html

If all else fails, use the tools in cleaning of CC below followed by a re - install software.

http://helpx.Adobe.com/Creative-Suite/KB/CS5-cleaner-tool-installation-problems.html

Nancy O.

Question of Spry Accordion Hover/active

I developed a widget spry Accordion for a page in the FAQ and in Dreamweaver CS6, it is fully functional. The color I chose does not occur with a hover or active tab once EVERYTHING is transferred. Here's a direct link to the page of problem, my CSS Spry and CSS layout as well as a screenshot of the correct functionality that occur in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/FAQ.html
Spry CSS
@charset "UTF-8";
/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* 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
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
border-top: 1px solid black;
border-bottom: 1px solid 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;
do-family: Verdana, Geneva, without serif.
color: #FFF;
background-color: #300;
do-size: 12px;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
margin: 0px;
padding: 2px;
background-image: url (.. / infobkgd.png);
background-attachment: fixed;
background-repeat: repeat;
do-family: Verdana, Geneva, without serif.
do-size: 12px;
color: #FFF;
overflow: hidden;
height: 40
XxX
height: 100%;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves 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 class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #003;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * Printing rules * /.
@media print {}
. Accordion {}
overflow: visible! important;
}
. {AccordionPanelContent}
display: block! important;
overflow: visible! important;
height: auto! important;
}
}
CSS layout
<! doctype html >
<!-[if lt IE 7] > < class = "oldie ie6" html > <! [endif]-->
<!-[if IE 7] > < class = "ie7 oldie" html > <! [endif]-->
<!-[if IE 8] > < class = "ie8 oldie" html > <! [endif]-->
<!-[if gt IE 8] > 
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width = device-width, original 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" > "

< 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 - features ' 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 path < /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 = "gallery.html" - video > 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 still ongoing? < / div >
< div class = "AccordionPanelContent" > a: Yes < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the date for this year's race? < / div >
< div class = "AccordionPanelContent" > Saturday, September 7 A:. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what time is the check-in/registration open? < / div >
< div class = "AccordionPanelContent" > was: online registration will begin in May. Check-in at 08:00 on 7 September. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: where is here? < / div >
< div class = "AccordionPanelContent" > has: Check-in will be just south of PCH on Las Posas Rd (just before the Gate 3 of the Naval Base). < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: the course will be the same? < / div >
< div class = "AccordionPanelContent" > was: we changed the road this year a few a few reasons. You can visit the roadmap to see. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: we do not race but we would like to come out and watch the bikes as they drive by. What time you will be on our street? < / div >
< div class = "AccordionPanelContent" > A: given our 10:30 departure, us will be sent the following streets in these moments here: < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the minimum amount to give up in this ride? < / div >
< div class = "AccordionPanelContent" > A: $20 to $35 per driver/passenger < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what does that give me? < / div >
< div class = "AccordionPanelContent" > was: Patch, ticket for the food and drink ticket < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: why do we need to raise/give a minimum this year? < / div >
< div class = "AccordionPanelContent" > r: as you know, during the first five years, the trip to the flags ran on a basis of everything-don-goes. However, as we got the biggest, costs related to reconstitute the journey grew enormously. The minimum donation allows for the costs for the ride. However, we do our best to bring about the authors as much as possible to help cover our costs so that we can ensure that your donation goes to good use. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: if I can give more money than the registration fee? < / div >
< div class = "AccordionPanelContent" > r: of course. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what happens if we raise a lot of money for the cause? < / div >
< div class = "AccordionPanelContent" > was: The White Heart Foundation is to give some small prizes for our major donors. Those who will be announced at a later date. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: arrival how will be different now that he is pre-registration? < / div >
< div class = "AccordionPanelContent" > was: there will be a pre-registered registration line and another line for those who seek to introduce yourself the day of. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what types of payments are accepted? < / div >
< div class = "AccordionPanelContent" > was: we prefer you use our fundraising Razoo.com online application that you will find on this site 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 authorized scooters? < / div >
< div class = "AccordionPanelContent" > was: well, sure, why not? < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be present celebrities? < / div >
< div class = "AccordionPanelContent" > was: probably. We don't usually know advance appearance. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: are you tired of all my questions? < / div >
< div class = "AccordionPanelContent" > A: a little < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is happening on the basis, now that the celebration of freedom is at the end of the race? < / div >
< div class = "AccordionPanelContent" > A: memorial service and wreath laying and perhaps a special guest. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be concerts at the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: There will. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I do not ride a motorcycle but I can still come to the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what's my price? < / 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 go for the ride and decided to simply come to the celebration of freedom at the end of the race, will I get my free patch, ticket to food and drink ticket? < / div >
< div class = "AccordionPanelContent" > a: No. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what are the costs of food & Drinks tickets? < / div >
< div class = "AccordionPanelContent" > was: food - $5 drink - $2, $5 beer - < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: WAIT? IT'S GOING TO BE BEER? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: it's great. I love you. < / div >
< div class = "AccordionPanelContent" > A: control yourself. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be sellers during the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > was: Yes! For the first time, we give you... bike sellers. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I am a vendor, how do I book a place? < / div >
< div class = "AccordionPanelContent" > was: click here and fill out our application. It is much easier to take 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 to see our sponsorship package. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can you my hiking club together? < / div >
< div class = "AccordionPanelContent" > was: If you come together, connect together, hold hands. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: are we make large flags from the start this year? < / div >
< div class = "AccordionPanelContent" > was: Yup < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year, the riders will split, how do you set this year? < / div >
< div class = "AccordionPanelContent" > A: we deposit certain permits and pay astronomical fees to stop traffic for 30 minutes Saturday while we do not get split up. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year the race ended up being really slow, it will slow down this year? < / div >
< div class = "AccordionPanelContent" > A: we admit it was slow. We know, we know. Now that we close the roads that we all pass, we will be able to pick up the pace a little. The new route allows also go faster through town. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I'm a policeman will be conducted as a civilian. Can I bring my firearm on base? < / div >
< div class = "AccordionPanelContent" > A: base won't allow that. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I want to create a team donation, where should I start? < / div >
< div class = "AccordionPanelContent" > 34 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can I start a team making a donation for my group of motorcycle cover all our registration fees? < / div >
< div class = "AccordionPanelContent" > was: Negatory. Each individual is his 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" > r: Yes, you can attend two 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" > was: The White Heart Foundation was created to help support our military community, police and firefighters. < / div >
< / div >
< / div >
< / div >
< div id = "footer" > This is the content of the div layout '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 kills the rest of your code 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;

do-family: Verdana, Geneva, without serif.

do-size: 12px; / * suggest using 16px or more * /.

color: #FFF;

overflow: hidden;

height: 40

[x;

height: 100%;

}

Nancy O.

How to apply different styles to several spry accordion panels?

Hi all
I have a site I'm building that has several functions that spry accordion.
I try to apply different styles to each accordion. A problem arises when I try to place an accordion in an another accordion.
I have style two images of different background for both of the accordians for styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) that work very well.
When I try and place an accordion in an another accordion background image for this Accordion for styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has different style applied that I said in the accordion.css folder, however the style (AccordionPanelTabHover) has the same style as the accordion, it's breast, even if I said a background image in the accordion.css file different.
I hope this makes sence, below is my source and the CSS Code.
I appriciate any help that can be given to help solve this issue I'm running too.
Source code
< div id = "content" >
< p > < span class = "first_header_word_packages" > welcome </span > < span class = "header_word_packages" > on our page of packages </span > < / p >
< class p = "content_txt" > here you can build the package Web site that meets your needs while being able to determine the cost of your site without having to worry about the scary hidden costs at a later date. < /p >
< class p = "content_txt" > we have two packages available for our clients; < /p >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< div id = "Accordion2" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< / div > <! - end #Accordion2 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion2->
< / div > <! - end #Accordion1 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion1->
< div id = "Accordion3" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< div id = "Accordion4" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< / div > <! - end #Accordion4 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion4->
< / div > <! - end #Accordion3 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion3->
< / div > <!-end #content->
CSS
@charset "UTF-8";
/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* Accordion container.
*/
. Accordion {}
border-left: 1px solid gray;
border-right: 1px solid black;
border-bottom: 1px solid gray;
overflow: hidden;
}
/ * This is the selector for the AccordionPanel container which houses the
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
background-color: #CCCCCC;
border-top: 1px solid black;
border-bottom: 1px solid gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
overflow: auto;
margin: 0px;
padding: 0px;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #EEEEEE;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves the tab container.
*/
. {AccordionPanelTabHover}
color: #555555;
}
. AccordionPanelOpen. {AccordionPanelTabHover}
color: #555555;
}
/ * This is an example of how to change the appearance of all the Panel tabs when the
* Accordion has focus. The class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #3399FF;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #33CCFF;
}
/ * Printing rules * /.
@media print {}
. Accordion {}
overflow: visible! important;
}
. {AccordionPanelContent}
display: block! important;
overflow: visible! important;
height: auto! important;
}
}
#Accordion1. {AccordionPanelTab}
height: 75px;
Width: 285px;
Background: url (.. /images/package_spry_tab_bg1.png) ;}
#Accordion1. AccordionPanelTabHover,
#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/package_spry_tab_bg1_RO.png) ;}
#Accordion2. {AccordionPanelTab}
height: 44px;
Width: 469px;
Background: url (.. /images/packages_spry1.png) ;}
#Accordion2. AccordionPanelTabHover,
#Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/packages_spry1_ro.png) ;}
#Accordion3. {AccordionPanelTab}
height: 75px;
Width: 285px;
Background: url (.. /images/package_spry_tab_bg2.png) ;}
#Accordion3. AccordionPanelTabHover,
#Accordion3. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/package_spry_tab_bg2_RO.png) ;}
#Accordion4. {AccordionPanelTab}
height: 44px;
Width: 469px;
Background: url (.. /images/packages_spry2.png) ;}
#Accordion4. AccordionPanelTabHover,
#Accordion4. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/packages_spry2_ro.png) ;}

Good guys.

I thought about it, if someone had the same problem as me and a look at this thread for the answer, here it is.

Firstly if you are wanting to separately style two or more Spry accordions that are not on the other example

Label 1

Insert content here

Label 1

Insert content here

Do not do this, as long as you have separate ID's for the div (which dreamweaver automatically anyway), you will be fine.

However if for some reason, you want to put one accordion inside another like I did for example

Label 1

Insert content here

Label 1

Insert content here

Too style accordion 1 and 2 so their tabs have different origins and Hover background when the content panel is open and closed you need to style it in CSS that they follow the path;

CSS

#Accordion1. {AccordionPanelTab}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg.png) ;}

#Accordion1. AccordionPanelTabHover,

#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

#Accordion2. {AccordionPanelTab}

height: 44px;

Width: 469px;

Background: url (.. /images/packages_spry.png) ;}

#Accordion2. AccordionPanelClosed. AccordionPanelTabHover,

#Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}

height: 44px;

Width: 469px;

Background: url (.. /images/packages_spry_ro.png) ;}

Normally in styling two separate spry accordions, you can simply use the following code

#Accordion1. {AccordionPanelTab}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg.png) ;}

#Accordion1. AccordionPanelTabHover,

#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

The only difference with the style one Spry Accordion in another so that they have different horizons stationary when the content panel is open and closed ".» AccordionPanelClosed ".

Hope this has helped someone who had the same problem, I was.

Spry Accordion in Firefox content error

Hello, I'm new here and trying to solve this problem, looked in other threads and couldn t find the solution.
Spry Accordion works well in IE and Safari, not in FireFox (10.2.0). The content was not displayed.
I use Dreamweaver CS5.
Initially the content paint so I changed the fixed height to false:
< / div >
< script type = "text/javascript" >
acc1 var = new Spry.Widget.Accordion ("Accordion1", {useFixedPanelHeights: false, defaultPanel:-1});
< /script >
I also added a new "min-height" in the Spryaccordion.css:
min-height: 200px;
_height: 200px;
The web page is: http://www.gsekura.com/fianzas_tipos.html
Thank you.
Ana.

Add/Edit the following

. Accordion {}

overflow: hidden;

}

. {AccordionPanelContent}

overflow: auto;

margin: 0px;

padding: 0px;

height: 200px;

}

GRAMPS

Using Dreamweaver CS4 to link...

Recently, I have built a site on Dreamweaver CS4. This is the basic layout of what I did. My site is based on a template, I put in place using the two a spry menu bar (vertical) and a basic image nav bar (not at the same time, but tried two in my efforts to get rid of my problem). I ran into the same problem with the nav options. I have all of my pages linked together and everything worked fine, until I decided to add a few extra pages and change a few things on the site. When I try to link these pages to the navigation bar links will not work. The only links that work are those original that I put in place. Hope somone can help...
Thank you

It is difficult to say but look at all of your tags

Example of

It is the button or text (It is a link)

Example of direct
```
http://tribemarkstudio.com">Tribe Mark Studio
```
If you do a CTRL + F you can search for all of your

It's a minor problem. If you can not find the copy of the issue of the code of the page and post it here

Shane

You can open files Dreamweaver CS4 Dreamweaver 8?

This may seem like a really stupid question, but as part of our marketing module, we have to make a site Web 6 page for a company of false...
Our teacher told us to use only Dreamweaver 8, as it is the only program that the guy has to score on.
As Dreamweaver 8 is no longer available for download from the trial, could someone let me know if the program Dreamweaver CS4 will be opened on 8.
Thank you
Your cluelessly!

Yes, Dreamweaver makes just HTML files and those that are universally working in all versions of DW. Some of the special features, such as menus Spry (which are JavaScript) will be not editable in DW 8, but the file will be always working.

Spry Accordion with strange behavior in IE
I just upgraded to version 1.6.1 of Spry Accordion on a site I'm working on. Works fine in Firefox, Safari, and Opera, but I get a page weird flash in IE6 and IE7 every time I change between panels. The page flashes and seems to zero with the development somewhere in the middle of the page (if the browser is smaller than the content size). Here is the page: http://www.laurabarringer.com/gallery

Would be happy if someone could point me in the direction of what I could have done what is the cause. CSS? HTML?

Thank you.
Remove the following from above the

--
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com

"bparizek" wrote in message
News:ft8deh$i67$1@forums. Macromedia.com...
> I just upgraded to version 1.6.1 of Spry Accordion on a site I'm working on.
> Works fine in Firefox, Safari, and Opera, but I get a weird page
> flash in
> IE6 and IE7 every time I change between panels. The page flashes and seems
> to
> reset the focus being somewhere in the middle of the page (if the browser)
> is
(> size smaller than content). Here is the page:
> http://www.laurabarringer.com/gallery
>
> Would be happy if someone could point me in the direction of what I could
> have
> which is the cause. CSS? HTML?
>
> Thank you.
>

Default Spry Accordion Panel
CONTEXT: I inserted a Spry Accordion with six different panels. Each Panel has its own set of links. Each link corresponds to a page in a long series of linked pages which together form a single document. Each panel of links represents a contiguous set of linked pages and a section of the document. In addition, I created a model for the entire document which includes the Spry Accordion just described.

GOAL: create an editable region in the template that will allow me to control the default Panel for each page of the document.

FAILURE of ATTEMPT: documentation Adobe to set the default for the Spry Accordion Panel suggests the following JavaScpript:

< script type = "text/javascript" >
var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: [someNumber]});
< /script >

where someNumber is an integer that is greater or equal to zero. When this code is entered into the model error.

DISCUSSION: continued research in the JavaScript file that controls the accordion, I was able to find the function that controls the default Panel. It appears like this:

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 (, opts, true);

Unfortunately, some browsers like Safari, style sheets in our
page depends may not have been loaded at the time, we are called.
This means that we must postpone attaching our behavior until after the
OnLoad event is triggered, because some of our behaviors are based on dimensions
specified in the CSS.

If (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors ();
on the other
Spry.Widget.Accordion.loadQueue.push (this);
};

QUESTION: How can I access this feature of in my template to change the setting for this.defaultPanel?
Quote:
The main JavaScript file for the accordion can be controlled by a
model, since he lives in a separate .js file.

I do not use templates myself, but it looks like the correct way to approach
the problem is the one used on your 'ATTEMPT failed. You can try it
again and report message the exact error you get and at what stage. Maybe
you get help on that.

EXPRESSION OF GRATITUDE
Thank you for your encouragement. Indeed, part of the solution to my problem was discovered through a reconsideration of my attempt failed. The other part came from the information provided me while helping another person with a related, but different problem. It turns out that the line of code in my failed ATTEMPT is automatically placed in the model when the SPRY accordion is inserted. Unaware of his presence and the right place I am he entered by mistake a second time. This triggers not only an error message, but it renders unusable, various other parts of my document.

THE SOLUTION
First step: find the line of code that is similar to that given by the following text:

In my model, this code was found at the bottom of the HTML body tag.

Second step: understand that the name of the variable 'acc8' and the name of the "Accordion8" parameter provided in the sample code above are arbitrary, and that the two are automatically defined when then a SPRY accordion is inserted. Important is that these names are likely to be different from what you see in the sample code above, and that you need and probably should not edit them in your document.

Step 3: change the number in the name pair: value indicated as defaultPanel:2 to a number between 0 and one less than the number of panels that you create in your accordion. It is this number that allows you to determine the Panel that appears when the document is opened.

Step four: Save and test in your favorite browser. Enjoy!

CAUTION:
This experience taught me a crucial lesson on the use of Dreamweaver. Dreamweaver has a mind of its own and can easily ruin you in seeking to correct your own mistakes for you. The solution is to save your document with a second copy before attempting any innovation that is not already integrated in the Dreamweaver program.

FURTHER EXAMINATION:
As I created a template to use with other documents, I will now try to make this area of my template editable, so that I can change the default setting of every other page that I create from my template. As I still do this, understand that the steps above, even if it is valid for a document template, may or may not be valid for pages created from the template. I hope they are and it will keep experimenting.

Dreamweaver cs4 funny acting spry accordion

Similar Questions

Maybe you are looking for