Printing a Spry Accordion form
I have used Spry Accordion to make a rather complex form work
very well ..
but now I have a problem. The client wants to be able to
print out the form
and I'm having trouble getting it to work. I have put a copy
where it can
be viewed but you can see when you do a print preview, only
the Accordion
tab that is open is displayed.
Ideally, what I would like is for each tab to go to the next
page and print
them all. Any thoughts?
http://www.linkerfinancial.com/printcopyform.asp
Thanks!
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
It's all fixed .. for those who are curious and need a print
style sheet
with an Accordion, Thierry Koblentz got me all fixed up with
this style
sheet .. the bottom part is specific to the Accordion part to
override the
SpryAccordion.css rules:
@charset "utf-8";
/* CSS Document */
body {
color:#000;
margin: 0;padding:0;
background-color: #5B6D85;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
#content {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 8px;
input, select {
background-color: #F5F5F5;
color: #666666;
font: 12px Verdana, Arial, Helvetica, sans-serif;
fieldset {
margin-top: 5px;
margin-right: 2px;
margin-bottom: 5px;
margin-left: 2px;
padding: 0;
label {
font-size: 10px;
font-weight: bold;
margin-right: 5px;
.buttons {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #8887CD;
color: #FFFFFF;
margin-right: 6px;
font-weight: bold;
margin-left: 10px;
border: solid #000 1px;
#footer,#logo,.AccordionPanelTab,#submit,a:link{display:none}
div.AccordionPanelContent {
height: auto !important;
div.Accordion {border:none}
* {overflow:visible !important;height:auto !important}
#header {overflow:hidden !important;}
Nancy
Similar Messages
-
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. -
Spry Accordion Menu Tab Link css - totally confused
Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Photo Gallery</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="PhotoGallery.html">Gallery 1</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Unit Newsletters</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="Newsletter.html">February 2010</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Forms</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="">Joining Instructions</a></li>
<li><a href="">Enrolment</a></li>
<li><a href="">Next of Kin</a></li>
<li><a href="">Volunteer Blue Card</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="WhatsOn.html">Whats On</a></li>
<li><a href="PSG.html">Parent Support Group</a></li>
</ul>
</div>
</div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none; -
I have inserted a Spry Accordion in Dreamweaver CS5, however, I'm having issues with the viewing of the tabs on load, on hover, etc. I want a dark blue tab on load, have it change to a wavy red white tab, and when opened go to a dark blue tab with a star. I can never get this to work as I want. I've checked the image files and they are labeled correctly. The test site is www.sbcvote.us/index_spry.html
I am a novice, and really have a hard time on this issue, that no doubt is not that complicated to those that know.
Thank you in advance for your help.
On my index page I have the css page reference.
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
the css code is:
.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;
font:Verdana, Geneva, sans-serif;
color:#FFF;
font-weight:bold;
background:(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-color:#EEE;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
background:url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
.AccordionPanelOpen .AccordionPanelTabHover {
background: url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-color: #EEE;Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it. -
Spry Accordion Panels view incorrect in IE8
I have a page set up using both spry menu and spry accordion panels. The problem is that in FireFox and Chrome, the pages view as they should. However, in IE, the panels on the accordion spread and are open, it doesn't view as it should. The test page is here www.sbcvote.us/index1.html the source code is below. My initial guess is that I have an open or not closed tag somewhere?
<!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>Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters</title>
<meta name="keywords" content="Joe Paul Gonzalez, San Benito County, Clerk, Auditor, Recorder, Registrar of Voters, fppc form 460, reconveyance deed, deed of reconveyance, reconveyance, homepage, mechanics lien release, quit claim deed form, release of mechinics lien, form, san, reconveyance, county, deed, 460, california, fppc, nacimiento, trust, elections, ca, solictud, certifacadas, reporting, statements, nominees, handbook, contribution, joe, paul, gonzalez" />
<meta name="description" content="Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters" />
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<script src="/SpryAssets/menu/SpryMenuBar.js" type="text/javascript"></script>
<script src="/SpryAssets/accordion/SpryAccordion.js" type="text/javascript"></script>
<link href="/SpryAssets/menu/SpryMenuBarHorizontal_sbcvote.css" rel="stylesheet" type="text/css" />
<link href="/SpryAssets/accordion/SpryAccordion_sbcvote.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
</script>
</head>
<body>
<div id="wrapper">
<div id="header"><!-- end of site_title -->
<div id="header_right">
<ul id="header_button">
<li><a href="#"><img src="images/home.jpg" alt="home" /></a></li>
<li><a href="#"><img src="images/contact.jpg" alt="contact us" /></a></li>
</ul>
<div class="cleaner"></div>
<form action="#" method="get">
<input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
</form>
</div>
</div> <!-- end of header -->
<div id="banner">
<div id="banner_box">
<ul>
<li><a href="clerk.htm" ><span class="current"></span><img src="images/countyClerk.jpg" alt="San Benito County Clerk" /></a></li>
<li><a href="auditor.htm"><span></span><img src="images/countyAuditor.jpg" alt="San Benito County Auditor" /></a></li>
<li><a href="recorder.htm"><span></span><img src="images/countyRecorder.jpg" alt="San Benito County Recorder" /></a></li>
<li><a href="http://results.sbcvote.us" target="_new"><span></span><img src="images/coRegistrar_results.jpg" alt="" /></a></li>
</ul>
</div>
</div> <!-- end of banner -->
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="registrar/candidateinfo.htm" class="MenuBarItemSubmenu">Candidate Info</a>
<ul>
<li><a href="candidate_forms_manuals.htm">Forms & Manuals</a></li>
<li><a href="pdf/forms/registrar/candidates/2010CandidateHandbook.pdf">2010 Candidate Handbook</a></li>
<li><a href="registrar/form460.htm" class="MenuBarItemSubmenu">FPPC 460s</a>
<ul>
<li><a href="registrar/form460_all.htm">Candidate Form 460s</a></li>
<li><a href="registrar/2010_form460.htm">2010 Candidate 460 Forms</a></li>
<li><a href="registrar/2009_form460.htm">2009 Candidate 460 Form</a></li>
<li><a href="registrar/2008_form460.htm">2008 Candidate 460 Form</a></li>
<li><a href="registrar/2007_form460.htm">2007 Candidate 460 Form</a></li>
</ul>
</li>
<li><a href="candidate_reporting.htm">Reporting</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="registrar/votebymail.htm">Vote-By-Mail</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="overseasvoting.htm">Overseas Voting</a>
<ul>
<li><a href="pdf/forms/registrar/votebymail/oversees_votebymail_request.pdf">Overseas Vote-By-Mail Request</a></li>
<li><a href="pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide Military Overseas</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="mailvotestatus.htm">Ballot Status</a></li>
<li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_eng.pdf">Application </a></li>
<li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_SPAN.pdf"> Español</a></li>
</ul>
</li>
<li><a href="/registrar/registration.htm" class="MenuBarItemSubmenu">Register to Vote</a>
<ul>
<li><a href="registrar/national_vrc_notice.htm">Form English</a></li>
<li><a href="http://www.sbcvote.us/registrar/national_vrc_notice_sp.htm">Español</a></li>
<li><a href="registrar/statement_distribution.htm">Distribution</a></li>
</ul>
</li>
<li><a href="registrar/pollworker.htm" class="MenuBarItemSubmenu">Pollworker</a>
<ul>
<li><a href="registrar/pollworker.htm">Become a Pollworker</a></li>
<li><a href="registrar/pollworker.htm#student">Students</a></li>
<li><a href="registrar/pollworker.htm#student">State Employees</a></li>
</ul>
</li>
<li><a href="registrar/hava_faqs.htm" class="MenuBarItemSubmenu">HAVA</a>
<ul>
<li><a href="registrar/hava_complaint_procedure.htm">Complaint Procedure</a></li>
<li><a href="registrar/hava_compliancemanual.htm">Compliance Manual</a></li>
</ul>
</li>
</ul>
</div> <!-- end of menu -->
<div id="content_wrapper">
<div id="left_sidebar">
<div class="box">
<h2><span></span>Click on a Tab for Info</h2>
<div class="body">
<ul class="side_menu">
<li>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Vote-By-Mail (VBM)</div>
<div class="AccordionPanelContent"><a href="/registrar/votebymail.htm">Vote-By-Mail Voting</a><a href="/pdf/forms/registrar/votebymail/overseas_votebymail_request.pdf">Overseas VBM Request</a>
<a href="/pdf/forms/registrar/votebymail/VBM_Application.pdf">Application for Permanent VBM </a><a href="/pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide to Military Voting</a>
<a href="/pdf/forms/registrar/votebymail/votebymail_app_general_county_fill.pdf">Application VBM General Election</a><a href="/registrar/mailvotestatus.htm">Did My VBM Ballot Get Counted?</a><br />
<br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Voto Por Correo</div>
<div class="AccordionPanelContent"><a href="/registrar/spanish/voto.por.correro.html">Voto Por Correro</a><a href="/registrar/spanish/overseasvoting.SPAN.html">Votante Información Extranjero</a><a href="/registrar/mailvotestatus.htm">Cheque se recibimos su voto por correro</a> <a href="/pdf/forms/registrar/votebymail/VBM_ApplicationSPAN.pdf">Solicitud de Balota de Votación por correo en California</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Voter Information</div>
<div class="AccordionPanelContent"> <a href="/registrar/national_vrc_notice.htm">Register to Vote</a>
<a href="http://www.voterguide.sos.ca.gov/pdf/english/" target="_new">Voter Information Guide Nov 2010</a>
<a href="/pdf/forms/registrar/register/YourRightToVote_ENG.pdf">Your Right to Vote</a> <a href="/pdf/forms/registrar/register/eng-list-of-certified-candidates11.10.pdf">Certified Candidates Nov 2010</a>
<a href="/pdf/forms/registrar/register/TimeOfftoVote_ENG.pdf">Time Off to Vote </a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Votante Información</div>
<div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Guía para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Inscíibase para Votar</a> <a href="/pdf/forms/registrar/register/Voter-bill-of-rights.SPAN.pdf">Declaración derechos de Votantes</a> <a href="/pdf/forms/registrar/register/spanish-vig-nov-2010.pdf">Guía Oficial Información Nov 2010</a> <a href="/pdf/forms/registrar/register/spanish-list-of-certified-candidates11.10.pdf">Lista Candaditos Certificados 2010 </a><a href="/pdf/forms/registrar/register/TimeOfftoVote_SPAN.pdf">Tiempo Libre Para Votar</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">For the Candidates</div>
<div class="AccordionPanelContent">Blank 460 Forms<br />
Candidates 460 Forms Index<br />
2010 Candidate Handbook<br />
2010 Calendar </div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Nov 2, 2010 Election</div>
<div class="AccordionPanelContent">Election Results Page<br />
Canvass of the Vote
<br />
Vote-By-Mail Ballot Look up<br />
State Vote Pamphlet<br />
Sample Ballot Statewide
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 7</div>
<div class="AccordionPanelContent">Content 7</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 8</div>
<div class="AccordionPanelContent">Content 8</div>
</div>
</div>
</li>
<li> <a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec bibendum semper</a></li>
<li><a href="#">Proin tincidunt dapibus</a></li>
<li><a href="#">Nulla consequat</a></li>
<li><a href="#">In enim justo</a></li>
<li><a href="#">Aenean vulputate</a></li>
<li><a href="#">Etiam ultricies</a></li>
<li><a href="#">Nullam vehicula egestas </a></li>
</ul>
</div>
<div class="box_bottom"><span></span></div>
</div>
<div class="box">
<h2><span></span>Our Departments</h2>
<div class="body">
<ul class="side_menu">
<li><a href="clerk.html">County Clerk</a></li>
<li><a href="auditor.html">County Auditor</a></li>
<li><a href="recorder.html">County Recorder</a></li>
<li><a href="index.html">Registrar of Voters</a></li>
<li><a href="http://results.sbcvote.us" target="_new">Election Results</a></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="box_bottom"><span></span></div>
</div>
</div> <!-- end of left_sidebar -->
<div id="content">
<div class="box">
<h2><span></span>Welcome to the San Benito County Registrar of Voters</h2>
<div class="body">
<p> Welcome to our new and updated website for the County of San Benito Clerk-Auditor-Recorder- Registrar of Voters. </p>
</div>
<div class="box_bottom"><span></span></div>
</div>
<div class="box">
<h2><span></span>News and Updates</h2>
<div class="body">
<div class="news_box">
<h3><a href="http://results.sbcvote.us" target="_new">November 2, 2010 Election Results</a></h3>
<p>Up to the minute election results for San Benito County will be uploaded to our website at the close of the polls on Tuesday, November 2, 2010 at<a href="http://results.sbcvote.us" target="_new"> http://results.sbcvote.us.</a></p>
<div class="cleaner"></div>
</div>
<div class="news_box">
<h3><a href="registrar/mailvotestatus.htm">Vote-By-Mail Ballots</a>
</h3>
<p>Verify that your Vote-By-Mail Ballot has been received <a href="/registrar/mailvotestatus.htm">here.</a> To insure that your vote is counted, drop off your VBM ballot to our offices on the second floor of the courthouse building room 406 BEFORE Tuesday, Nov. 2, 2010.</p>
<div class="cleaner"></div>
</div>
<div class="news_box">
<a href="#"><img class="news_image" src="images/image_08.jpg" alt="image" /></a>
<h3><a href="#">Auditor's Department</a></h3>
<p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
<div class="cleaner"></div>
</div>
<div class="more float_r"><a href="#">View All</a></div>
<div class="cleaner"></div>
</div>
<div class="box_bottom"><span></span></div>
</div>
</div> <!-- end of content -->
<div id="right_sidebar">
<div class="box">
<h2 align="center"><span></span>Joe Paul Gonzalez</h2>
<div class="body">
<ul class="side_menu">
<li></li>
<li></li>
<li><img src="images/joepaul_new.jpg" width="207" height="262" alt="joe paul gonzalez" /></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><a href="#">County Clerk-Auditor-Recorder</a></li>
</ul>
</div>
<div class="box_bottom"><span></span></div>
</div>
<div class="sidebar_box">
<a href="http://results.sbcvote.us" target="_new"><img src="images/results.jpg" alt="Election Results" /></a> </div>
<div class="sidebar_box">
<a href="#"><img src="" alt="City Zoo" /></a> </div>
</div> <!-- end of right_sidebar -->
<div class="cleaner"></div>
</div> <!-- end of content_wrapper -->
</div> <!-- end of wrapper -->
<div id="footer_wrapper">
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Site Map</a>
</li>
<li><a href="#">Clerk</a>
</li>
<li><a href="#">Auditor</a></li>
<li><a href="#">Recorder</a></li>
<li><a href="#">Registrar of Voters</a></li>
<li><a href="#">Election Results</a></li>
<li><a href="#">Forms</a></li>
<li class="last_menu"><a href="#">Contact</a></li>
</ul>
Copyright © 2010 <a href="http://www.netwidesales.com" target="_new">NetWideSales</a> |
<a href="http://www.netwidesales.com" target="_new">Designed by Irma C. Gonzalez</a> |
<a href="http://www.joepaulgonzalez.com" target="_new">Joe Paul Gonzalez</a> </div> <!-- end of footer -->
</div> <!-- end of footer_wrapper -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/images/menubar/SpryMenuBarDownHover.gif", imgRight:"/images/menubar/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
I appreciate any help here, it really doesn't make sense to me, it did work for a few viewing in IE and I must have changed something by mistake?
Thanks again.I added a set width to the accordion css and that solved the problem of the widget running across the page. The IE issue appears to be an ongoing issue with IE. If a viewer has IE8, then hitting the compatibility button on the menu bar will solve the viewing problem. If not, it doesn't view correctly. It views fine on other browsers (Chrome, etc). Problem is how many people will know to hit the compatibility button?
Thank you for your help, I appreciate the time taken. -
Firefox Spry Accordion widget
Hello, I am trying to use Spry Accordion widget. When I click one of the other panels they all turn a strange neon blue color. Anyone know of any fixes?
The below is the index page and below that is SpryAccordion.css
index
<!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>Conferences</title>
<script src="SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outside">
<div id="outsideone">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content ssss</p>
<p>lkajsdfl</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
<!-- This is commented out -->
<div id="photo"></div>
<div id="contentholder">
<div id="contentsone"> <div id="moreone">
<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>
</div> <div id="insidecontentsone"></div></div>
<div id="lineone"> </div>
<div id="contentstwo"> <div id="moretwo">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div>
<div id="insidecontentstwo"></div></div>
<div id="linetwo"> </div>
<div id="contentsthree"> <div id="morethree">
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div><div id="insidecontentsthree"></div></div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { defaultPanel: 1 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { defaultPanel: 1 });
</script>
</body>
</html>
SpryAccordion.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;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-color: none;
border-bottom-color: none;
border-left-color: none;
background-image: url(white.png);
background-color: none;
border-top-style: none;
/* 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;
background-image: url(white.png);
/* 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 {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 0px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(white.png);
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-image: url(white.png);
/* 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: #none;
background-image: url(white.png);
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
background-image: url(white.png);
.AccordionPanelOpen .AccordionPanelTabHover {
color: none;
background-image: url(white.png);
/* 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: none;
background-image: url(white.png);
/* 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: none;
height: 15px;
background-image: url(white.png);
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
background-image: url(white.png);
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-image: url(white.png);Welcome to the Forum!
If you can upload your page to a server and give us a link, we will be able to look at your page in action. Just seeing the code is not enough.
Is this the first time you have used an Accordion? It is probable that the bright neon blue you are seeing is the default style, which you can change in the CSS file. I believe it was designed that color to highlight the feature you want to change .
Take a look in the Accordion's CSS file (it will show as an associated file at the top of your document window) for color rules, and adjust them to suit your palette (and your palate!). Check out the CSS Styles Panel (use Current mode) for a handy way to know what you are looking at. Click on the Accordion in Design View and the rules will be highlighted in the CSS Styles Panel. (Click the right-hand stair-step icon to see the style cascade.)
Beth -
Spry Accordion Problem in Internet Explorer
Hi,
i have created a spry accordion menu in Dreamweaver CS3. My
problem is that when I click in Internet Explorer, small selection
handles appear all round the accordion object. This looks quite
poor then. Any ideas how I can get rid of these?
Thanks.Except for the fact that Spry Accordions are involved, the problem is hardly Spry related.
Having said that, I will try to help you on your way to solving your problem.
The following is a list of my observations
the <div id="wrapper"> on line 74 does not have an ending tag
<div class="right-column" has 35px padding on the right but not on the left. Because IE interprets the so-called box model differntly to other browsers, and because the div is floated right, the left edge of the div will be pushed further to the left than on other browsers. It may be an idea to put at least some of the padding on the left to keep it clear of the divider line
the field set in your contact form is 460px wide, the div surrounding it is only 440px and again IE reacts differntly to other browsers in that it expands the parent to suit the child. Try reducing the width of the fieldset to say 400px. -
Use of NACE after creating print program n smart form
Wat's d purpose of NACE?I hav created my own print program n smart form according to my own requirement.If NACE is necessary 4 my smart from.How can i use NACE i mean navigation steps.
Please help me out.Its urgent.
Thanks & Regards,
Santhosh.Hi Santhosh,
Nace is for message control settings. Say if u want to trigger a Smartform or an Idoc or any other customized program u can do the message control settings.
Say at the time of Sales Order creation or updation u want to trigger a Smartform, then u have to follow the following steps:
Goto NACE
Select application V1 and then click Output Type.
create a new Output type or copy the existing one abd save it with new name
then in Processing Routine Mention the driver program name and in Form routine mention the main subroutine name.
In Smartform mention your SMartform name and also the layout if u have ceated.
Again go to NACE and Select application V1 and press Procedures.
here out of the many procedures u have to select the right one and attach your Output Type to it.
You can also create a condition record..Say if u want to trigger this Smartforms for Sales Order of particular type.
Hope this helps.
Reward Points if useful.
Thanks. -
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> -
How to make the print command wait until form is rendered.
This is an ongoing issue that so far I haven't been able to figure out how to fix, so I'm hoping that someone will have a good idea or work around. I'm working in LiveCycle Designer ES v8. using JavaScript.
I have to include a feature that allows the user the choice to print out a dynamic form to fill out by hand. So I've created a button that asks if this is what they want to do, if they answer "Yes", then several things are scripted to happen. All data is reset, some subforms and pages are made visible, while other subforms are hidden, and text fields are expanded. This causes the form to expand from one page to 15 pages. Then it prints using this command:
xfa.host.print(1,
"0", (xfa.host.numPages -1).toString(), 0, 1, 0, 0, 0);
The problem is that when the print dialogue box appears, the Print Range is always set to less than the total number of pages. It looks like that the print commands fires before the form has completed rendering. This isn't a big deal since the user can click to set the Print Range to "All" which will print all 15 pages. The problem is that most people don't read the dialogue box. They click "okay" and end up with their form cut off. Then I get phone calls that my form doesn't work.
Is there anyway to delay the print command until everything has finished rendering? Or set the Print Range to always go to "All"?
Thanks in advance for your help with this.It sounds like you'd be fine if you just separated the print function from your "Yes" button. It will require a 2nd button click from the user but that would be the only inconvenience.
-
How do you print data from a form?
From the interactive report, there's a built in function to print to variious formats (e.g., PDF, CSV, etc).
As long as the columns do not exceed the width of a page, it's okay.
But what I want to do is when a user clicks on 'edit' from the interactive report and displays the data entry screen, I want to be able to have a 'Print' button to print the data from a form.
Don't want to manually modify the URL to change a parameter to print.
Really appreciate any help I can get on this matter!!!I want to be able to have a 'Print' button to print the data from a form.Create a Print button in the form page with an <tt>onclick</tt> attribute that calls the method<tt>print()</tt> method:
onclick="window.print();"
Don't want to manually modify the URL to change a parameter to print. Sounds like you want to be able to control which page elements are printed and how they are formatted?
This is quite straightforward using a print media style sheet.
You'll need to identify CSS selectors (usually IDs and classes) from the page HTML for the components and regions that are not to be printed: a web inspector such as that found in Safari, or the Firefox+Firebug combo is useful for this. It's also a good idea to give all of your regions a unique static region ID to assist with this identification. Using this information, you can construct the style sheet to exclude all of the unwanted content using <tt>display: none</tt> rules.
In a simplified example, say you identify that there are 4 regions on the page, and you only want to print region 3. You would add the following style sheet to the page HTML Header:
<style type="text/css" media="print">
#region-1, #region-2, #region-4 {
display: none;
</style>+{message:id=2475831}+ is a solution to a similar problem, and see this article for more enhancements that can be included in your print style sheet.
Really appreciate any help I can get on this matter!!!You'll get effective help more quickly if you include the following information upfront when posting a question. This enables others to understand, replicate and determine the most appropriate fix without wasting time asking all kinds of supplementary questions:
- APEX version
- DB version and edition
- Web server architecture (EPG, OHS or APEX listener)
- Browser(s)/version(s) used
- Theme used
- Templates used
- Region/Report/Process type
And please update your forum profile with a better handle than "846623". -
How can print a report from form 6i, when I press a button?
hi Friends,
How can print a report from form 6i, when I press a button?
When i press a button from Form 6i, the report should print through printer.
I have done it by using report parameter DESTYPE Printer but problem is that when I press a button printer dialogue box appear and then I give command Print to printer, I don’t want to show Printer dialogue box.
I want when I press a button form Forms 6i , printer will print my report directly.
Please send me the solution of this problem.
Best regards,
ShahzadHi
If You are using Client server application then to passing to Add all Print Parameter in the Host Command.
Means Print command in unix to Host(lp.............) and Other Parameter to file name of the report to print.
If You not Use Client Server Application the Also Passing a Host Command in Button-Pressed Event and Run. -
Printing a report from Forms 9i
Hi all
I have to print a report from Forms 9i, but I can't do it directly, I have to execute it with desname = preview and then I can print it.
I use the following sintax
RUN_REPORT_OBJECT_PROC(repid, v_server_name,'pdf',printer,v_path,v_report,'paramform=no'|| other parameter....,v_servlet)
where v_path is the name of the printer and run_report_object is a procedure to execute reports into forms
I try to set v_path with the printer name on my client and on the server.. but it doesn't find it...
Please help me,
Thanks in advance
AntonioHi all
have any one some information about ORARPP (Oracle Reports Remote Printing) ???
I should print directly, my desname should be a printer.... could any one help me???
Thanks in advance for your support...
Antonio -
I would like to print a report from forms without opening reports first. Is this possible and if so how?
From a command-line or .BAT file (assuming Windows and Developer6i) run the following (on a single line). It will go to your default printer.
<ORA_HOME>\bin\rwrun60 <report>.rdf userid=<user>/<pw>@<hoststring> destype=printer batch=yes
null -
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
Maybe you are looking for
-
My devices do not show up on itunes
How do I get my IPhone and IPad to show up in itunes? I cant get a list of devices?
-
I have a panel in table view. One of the fields, I have changed to a combo box. It works good except for one problem. When testing, I set the text in the field using the combo box. If I go directly to another record, in the same column, when i change
-
Hi, I have used this stmt (DESCRIBE FIELD GT_TLINE LENGTH fle1 ) to get the length of fields but i am getting errors based on unicode check like describe length can only be in byte mode or character mode. My program is about converting the output
-
Sharing the internet from a blackberry via bluetooth?
Hello, I am very excited about getting a macbook pro tomorrow! I was wondering, can I share the internet from a blackberry via bluetooth? it is a 8700c blackberry. also, how are the speakers in the macbook pro? (better than a 12" iBook?) one last thi
-
I can't seem to call my House Phone?
All of a sudden, starting this morning, my [Verizon] mobile phone cannot call my [Verizon] house phone. I have a similar problem with my house phone, as it also cannot call my mobile phone. In addition to this, my Dad's business phone cannot forward