A simple Spry Accordion Question (I think)
Hi all:
I've searched but can't find, but I think this is a simple one.
I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
JAVASCRIPT
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.duration = 500;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
// Unfortunately in some browsers like Safari, the Stylesheets our
// page depends on may not have been loaded at the time we are called.
// This means we have to defer attaching our behaviors until after the
// onload event fires, since some of our behaviors rely on dimensions
// specified in the CSS.
if (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.Accordion.loadQueue.push(this);
Spry.Widget.Accordion.onloadDidFire = false;
Spry.Widget.Accordion.loadQueue = [];
Spry.Widget.Accordion.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Accordion.processLoadQueue = function(handler)
Spry.Widget.Accordion.onloadDidFire = true;
var q = Spry.Widget.Accordion.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
Spry.Widget.Accordion.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.openPanel = function(panel)
var panelA = this.currentPanel;
var panelB = panel;
if (!panelB || panelA == panelB)
return;
var contentA;
if( panelA )
contentA = this.getPanelContent(panelA);
var contentB = this.getPanelContent(panelB);
if (! contentB)
return;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
this.animator.start();
else
if(contentA)
contentA.style.height = "0px";
contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
if(panelA)
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
Spry.Widget.Accordion.prototype.openNextPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
this.openPanel(panels[curPanelIndex+1]);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
this.openPanel(panels[curPanelIndex-1]);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[0]);
Spry.Widget.Accordion.prototype.openLastPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[panels.length-1]);
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
// if (this.enableKeyboardNavigation)
// this.element.focus();
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();
Spry.Widget.Accordion.prototype.onFocus = function(e)
// this.element.focus();
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
// this.element.blur();
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
var content = this.getPanelContent(panel);
if (isDefault)
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
else
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
content.style.height = "0px";
this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
// if (!tabIndexAttr) this.element.tabindex = 0;
if (tabIndexAttr)
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
return this.currentPanel;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
if( this.currentPanel == panels[i] )
return i;
return 0;
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.Accordion.prototype.focus = function()
if (this.element && this.element.focus)
this.element.focus();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
this.timer = null;
this.interval = 0;
this.stepCount = 0;
this.fps = 0;
this.steps = 10;
this.duration = 500;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
Spry.Widget.Accordion.setOptions(this, opts, true);
// If caller specified speed in terms of frames per second,
// convert them into steps.
if (this.fps > 0)
this.interval = Math.floor(1000 / this.fps);
this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
else if (this.steps > 0)
this.interval = this.duration / this.steps;
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel || h > 0)
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
if (this.stepCount < this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
++this.stepCount;
this.animate();
if (this.stepCount < this.steps)
this.start();
else if (this.onComplete)
this.onComplete();
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
var i, obj;
if (this.stepCount >= this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
if (obj.panel != this.panel)
obj.content.style.height = "0px";
obj.content.style.overflow = obj.overflow;
obj.content.style.height = obj.toHeight + "px";
else
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.fromHeight += obj.increment;
obj.content.style.height = obj.fromHeight + "px";
On the bottom of yourpage you have this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Change it to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
Ken Ford
Similar Messages
-
Hi
I just need to know how to change the height of my spry menu.
i did it once before but forgot how to. i think i've tried height
on every SpryMenuBarHorizontal.css that is there there...
ThanksGreat thank you very much, added the code and its working
now...
Just one more question, hope this makes sense: I want to put
the menu along a line that is the same color as the menu so i put
to menu into a table and used a color background, is this the best
way to do it? The problem i am having is that the table has this
padding that i can't get rid of, i want it the same size as the
menu, but i can make the table any smaller...
Appreciate the help -
DW Tutorial Question (Spry Accordion Widget) Beginner... :-(
Hi, I've just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html) but have a problem with my Spry Accordion Widget, when I preview the site my footer moves when I select a different panels in the widget, I've read back and checked code/css but I still can't sus it out (Don't laugh if it's something obvious!) Please can anyone help me? I've copied code/CSS below.
A BIG THANKS IN ADVANCE!!
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>The Yacht Club</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/logo.jpg" width="290" height="144" />
<!-- end #header -->
</div>
<div id="sidebar1">
<h3>Welcome</h3>
<ul id="nav"><li><a href="javascript:;">Home</a></li><li><a href="javascript:;">About Us</a></li><li><a href="javascript:;">Membership</a></li><li><a href="javascript:;">Our Boats</a></li><li><a href="javascript:;">Current Races</a></li><li><a href="javascript:;">Contact Us</a></li>
</ul>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Atlantic Ocean</div>
<div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Pacific Ocean</div>
<div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Indian Ocean</div>
<div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>
</div>
<p> </p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Luxury Yachts</h1>
<p><img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>Sail to the Bahamas </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>© 2009 Luxury Yachts – bring a cup for the bailout</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
MAIN CSS...
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FDFDFD;
background-image: url(images/body_BG.jpg);
background-repeat: repeat-x;
h1, h2, h3 {
font-weight: normal;
color: #00583F;
h1 {
font-size: 140%;
h2 {
font-size: 130%;
h3 {
font-size: 120%;
#container {
width: 780px;
margin: 0 auto;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/container_bg.gif);
background-repeat: repeat-y;
#header {
background-color: #DDDDDD;
background-image: url(images/headerBG.jpg);
background-repeat: no-repeat;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
ul#nav {
background-image: url(images/buoy.jpg);
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 153px;
padding-left: 0px;
list-style-type: none;
#nav li a {
font-size: 90%;
color: #FFF;
text-decoration: none;
background-color: #09553F;
display: block;
padding: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3574A7;
#nav li a:hover, #nav li a:active, #nav li a:focus {
color: #123464;
background-color: #B7DAD8;
#mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
#mainContent p, #sidebar1 p, #footer p {
font-size: 85%;
line-height: 1.4;
#footer {
background-color: #00593D;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 270px;
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #FFF;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
SPRY CSS...
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - 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-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #7C9297;
border-bottom-color: #7C9297;
border-left-color: #7C9297;
/* 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 {
background-color: #00583F;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
color: #FFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #7C9297;
border-bottom-color: #7C9297;
/* 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;
height: 200px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* 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: #FFF;
color: #005b3E;
/* 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: #AAC7CE;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #00583F;
color: #FFF;
/* 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: #FFF;
color: #00583F;
Apologies in advance if I'm asking a daft question!!Hi,
using your source code, I couldn't find a really inserted "Spry Accordion". If I do that (translated from german DW) > Insert > Spry > Spry Accordion, I'll find in my DW source code something like that:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Bezeichnung 1</div>
<div class="AccordionPanelContent">Inhalt 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Bezeichnung 2</div>
<div class="AccordionPanelContent">Inhalt 2</div>
</div>
</div>
and in design view:
Please control your DW-entries.
Hans-G. -
Spry Accordion widget Question
Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code I would have to add to the JavaScript?
Is there a genius out there that can hook me up with some knowledge?I actually did away with the accordian widget and went a different route. It was too glitchy. Thanks for your input though. I will take note of the suggestions you provided and maybe try it out one day.
-
Spry Accordion default panel in Master Detail Page
Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
<div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
<div class="AccordionPanelContent">
<table width="385" border="0" class="AccordionPanel" id="content1">
<?php do { ?>
<tr>
<td >
<a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
</td>
</tr>
<?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
</table>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0, useFixedPanelHeights: false});
-->
</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben -
Spry Accordion Widget Init Closed, Without Snap?
(This is a topic discussed in
another
thread, but I didn't want to hijack the thread with my own
question, so I started a new one...)
I want to start my Accordion widget in a closed state. I
figured out the trick of setting the default panel to '-1' and
turning fixed heights by altering the code in the footer of the
page to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: -1,
useFixedPanelHeights: false});
When you do this, however, the page loads with the first
accordion panel open and visible for a split second until the page
is loaded, at which point the widget snaps the panel shut. This is
very ugly and undesirable, especially given that this accordion is
on a page element common to every page on the site.
I've tried setting an initial class that is hidden, however
the Spry Accordion widget is written in such a way that it
preserves whatever classes you have rather than replacing them.
Does anyone know a way to load the page with the accordion
panels shut without this initial flash of the first panel snapping
shut?
Thanks,
SteveHey Al,
Nice plug for your own application! Here is another one,
since I am one of your happy customers.
I used the Spry widgets in the new DW CS3 and spent a couple
of days trying to tweak things to get them to work the way I
wanted. After getting input from my brother (his site that I am
working on) he really wanted some more style than what I was coming
up with using the basic DW widget. I smacked my dollar on the
barrel head and tried out PVII Accordion instead.
I can't tell you how fast and easy it was to insert and
customize this plugin. Not to mention they had some nice little
themed styles, one of which (the cobalt blue) was a real close
match to the color scheme I originally was using! (PS - any chance
of getting more theme styles down the road for this plugin or
matching styles for the other ones???)
Changing the open or closed state of the panels - it was so
simple!!! I simply went into the modify option and chose the number
that corresponded to my different panels in the menu list. My buddy
used an expression about DW CS3 that fits nicely with using tools
like PVII Accordion Magic. You can use a screwdriver with some
precision and a lot of hand strength to build what you want but it
will take you alot of time...or you can plugin a power drill and be
done with it!
To see it in action on my current work in progress go to:
http://www.dvdflashbacks.com/williamsburghealth/index.php
As for sstringer's original question - how to do this in DW's
Spry widget...
I think you are onto the right track with the -1 setting. If
I am not mistaken though, Spry uses 0 for the first panel, so I
think you would need to use an option like {defaultTab: 1} to open
the 2nd panel and so on.
PS - Just so everyone knows - I am not a sales person for
PVII - just a very satisfied customer! -
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; -
Desperate help needed in understanding SPRY accordion CSS
hello everybody
like many out there im stumbling through some home/self tuition on DW. I've recently checked out the spry accordion. It all went well up to the part where I wanted to improve the outlook of the accordion. I luckily found some templates on the adobe site with an accordion with the general idea as to how I would like an accordion to look, or at least a platform for future ideas. (Design #2 at: http://www.adobe.com/devnet/dreamweaver/?view=samples )
I've had a look through the code and have found great difficulty understanding a few of the div classes that are contained within it, i.e. what they are attributed to etc.
Here is the HTML and the Spry CSS docs that I downloaded from the link above:
HTML code (my issues are highlighted in red)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OurCompany.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="#" >Contact Us</a> | <a href="#" >Site Map</a></div>
<div class="toplogo"><a href="#"><img src="images/transparent.gif" width="365" height="90" border="0" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="#" >This is definitely navigation item 1</a></li>
<li><a href="#" >Item 2</a></li>
<li><a href="#" >Item 3</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Lorem Ipsum dolor sit amet</h1>
<img class="imageright" src="images/content_photo_1.jpg" border="0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id <a href="#">velitvitae ligula</a> volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet. </p>
<img class="imageleft" src="images/content_photo_2.jpg" border="0" /><p>Consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Nulla libero. Vivamus pharetra pos uere sapien. Nam consectetuer. Sed aliq uam, <a href="#">nunc eget euismod ullamcorper</a>, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">
TELLUS PROIN EU ERAT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
UMA NON TEMPLUS NUNC
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.</p>
<p>Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
CONSECTETUER ADIPICING ELIT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class="imageright" src="images/accordion_photo.jpg" border="0" />
<p>Cras tempor. Morbi egestas. Tempus, nunc arcu mollis enim, eu aliqu mam erat nullanon nibh consectetuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p>
<p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2009 Our Company. All rights reserved.</div>
</div>
</div>
<script type="text/javascript">
<!--
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:true, defaultPanel:2});
//-->
</script>
</body>
</html>
I'n terms of the <div class="accordion_340_tab"> i'm really not sure what these mean. I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean. There is no reference to them in any of the code/ CSS sheets i downloaded.
Plus, i'm not quite sure what the two <div style="clear:both;"></div> are clearing.
I know these will be really basic questions and I apologise for having to trouble you but any help would be really really appreciated
This is the spryCSS that came with the link to accompany the HTML file...
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
width: 255px;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
color: #394867;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
/* 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 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
/* 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 {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
/* 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-image: url(../images/accordion_255_tab_over.gif);
/* 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: #000000;
/* 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: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif);
Thank you to anybody again who may be able to assist me with this. I'm very new to DW (and some may say not the brightest) so any low level explanations will be really appreciated.
Kind regards
Andrea xHeya, I hope my response will help.
First off, I'd like to say that you are correct in being unable to find the " <div class="accordion_340_tab"> " anywhere in the project. I went through and checked all the code and couldn't find a reference anywhere. Also, I downloaded the project from your link, deleted the <div class="accordion_340_tab"> as well as the </div> right after the TELLUS PROIN EU ERAT" (as the opening div and closing div work together and must be added or deleted together) and it had absolutely no impact from what I could see in internet explorer 8 and firefox.
Therefore, I believe, that it was originally intended to do something or in fact did something but they took that out and then forgot to take out the div. Even within the internal .js file I couldn't find a reference. Maybe they forgot to upload a third stylesheet. Either way, it appears to work just fine without it.
"I'm not quite sure what the two <div style="clear:both;"></div> are clearing."
In regards to this, this div style tag is a less frequently used tag that can divide content. Do you know what the HR tag in html is? If not, try putting a <hr> tag (just like that, by itself) in your web page somewhere. HR stands for Horizontal Rule- it makes a horizontal line across the page. This div style clear both tag is basically an invisible HR that helps separate different divs or content or whatever else is on the page. Think of it as an invisible page break.
"I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean."
You should check out some CSS tutorials for the basics, but in a nutshell I'll go ahead and explain what I believe you are having trouble with.
Let's put it this way:
HTML is the core of your web page. It is the content and substance.
CSS is the style of your web page. It is the color, alignment, and format of your page.
The "div" tag by itself is simply <div>. However, you MUST close a div tag somewhere on the page with a </div> A div tag by itself, however, will do absolutely nothing. How do you get it to do something? By making a CSS rule, the two most common of which are known as a "div id" and "div class".
The differences between div id and div class are pretty small- div id is mainly used for a div tag that will only be used once on the web page. Div classes are used for something that will be repeated, in this case, the accordion tabs.
Therefore, when you see something like <div id="content"> text blah blah blah </div>, then you know that the "text blah blah blah" is your content, and that content is being modified to the specifications of the id "content". Where is this "content" div? This is what you as the designer make (or there will already be one in a template) and can usually be found in an external STYLESHEET, which holds all of your css rules, and is then linked to the main web page's html document (where your content is) with a link tag in the header of the html, usually right after the title and before the end of the <header> tag. You will find <link href="example.css" rel="stylesheet" type="text/css" /> but with a different name in the part i put as "example.css"
Within that css document you have different things you can do. Let's say I want to make one div id and one div class. I want to name the ID "example1" and the class "example2". It would look something like this (note that you must ALWAYS start an ID with # and a class with a period)
#example1 {
width: 450px;
margin:auto;
color: #fff;
.example2 {
width: 900px;
margin: 10px;
color: #000;
I hope this helped.
-Matt -
Spry accordion has extra phantom tabs
In this template, I added extra tabs to the left hand navigation by just copying and pasting the code for the original tabs.
Then I noticed there were extra tabs in the accordion also, which don't work.
Looking at the code, I see that the navigation tabs seem to reside within the spry asset code . . . did I foul up the accordion by adding extra navigation tabs to the left hand column?
Here's the page: http://asptfacultycaucus.info/
I'm looking at the code but can't see anything that would cause these extra accordion tabs . . . (but I've also never used a spry asset accordion before)!
Help help,
PamelaThank you everyone for all of the suggestions. Just as an update, after posting a plea for help I found myself still wanting to work, so downloaded a fresh template (again, this is like the 4th time) and started from scratch. I went through each step I'd gone through to make corrections. Several times I recreated the same problems I'd encountered before that had to be resolved with other answers from questions I'd asked in the DW forums. Several times I created new problems, and actually had to delete a file and replace it with the same file from the original template and start over.
So right now, I do have my .css linked. I think what happened was: I wanted to test out a change I'd made to the template. I thought I would save it with a new name, so the original, still-functioning template would remain unchanged. When I saved it with a new name I was asked if I wished to update the links. I said "no," thinking all pages from the site based on the original template would otherwise be linked to this new one. What actually happened (I think) is that the new file was no longer linked to any of the stylesheets, accordion stylesheets, etc., so therefore there was no formatting at all.
I'm still suffering with how to make changes to the text of the spry accordion, and have experimented with various strategies for that as well. I've explained those and asked for help in another topic, which is: "changing text in spry accordion" -- I hope you all will help me with this one!
Here is the page as it stands so far: http://asptfacultycaucus.info/#
Thanks so much,
Pamela H -
Spry Accordion Triples In Width On Server
Im having a problem where when i upload my site to my server and view it the spry accordion on left is triple the width it should be and is pusshing eveything to the right, weird thing is it works fine when i view it locally. Anyone have any ideas what could be causing this?
Thank you for the link, this makes it very easy to see the problem.
First off, I think your are getting caught up in tables that accumulate in width. The Accordion, because you have not given it a width, will occupy all available width within the table cell.
Having said that, I will not answer your original question directly, but point you in the right direction in planning your web page.
Start by having a look here for an insight to a proper page structure http://www.alistapart.com/articles/previewofhtml5
The above link will tell you that within the BODY-tag there is a header, navigation area, main content and a footer with possibly one or two sidebars.
Staying within that structure using proper HTML combined with CSS will give a very flexible layout without the use of tables. Tables should only be used where the layout requires a table like in repeating data areas with rows and columns, like a spreadsheet. Tables should not be used for styling purposes.
A good place to start is here http://www.adobe.com/devnet/dreamweaver/
Once you have your layout under control, and you still have a problem with the accordion, please come back here. -
How to make spry accordion open on mouse hover ?
hi everybody i have just a simple question about spry accordion in cs4 it try to open it using mouse hover not onclick
can anyone help me plz ?This is one way
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(0); return false;">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(1); return false;">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Another way is to have a SpryEventListener. Look that up for further info.
Ben -
Spry Accordion - Tabs open and then close after page loads
I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{useFixedPanelHeights:false, enableAnimation: false, defaultPanel: 0 });
//-->
</script>
But, all of the tabs open and then close on page load.
My page: http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, RonWell to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
// if (e.preventDefault) e.preventDefault();
// else e.returnValue = false;
// if (e.stopPropagation) e.stopPropagation();
// else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions -
Spry Accordion 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. -
.js update of spry accordion panel tab data for countdown functionality
Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> <!--
accordion panel tab -->
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> <!-- loading -->
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> <!-- error -->
<div id="details" spry:state="ready"
spry:content="{detail}"></div> <!-- detail when ready
-->
</div> <!--accordion panel content -->
</div> <!-- accordion panel -->
<script type="text/javascript">
<!--
var AccordionSpecials = new
Spry.Widget.Accordion("AccordionSpecials", { defaultPanel: 0,
duration: 1000, useFixedPanelHeights: false, enableAnimation:true }
var observer = { onPostLoad: function(notifier, data) {
CD_Init() ; /*alert("postLoad"); */} };
//specialDisplay dsSpecials.addObserver(observer);
Spry.Data.Region.addObserver("specialDisplay", observer);
//-->
</script>
</div> <!-- accordion -->
</div> <!-- specialDisplay -->
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers. -
Spry Accordion not working in IE7 and IE6
My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
The site is www.christendom.edu/n. It is there on the left. I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
Please help!Remove the offending comma (marked in red)
var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
I hope this helps.
Ben
Maybe you are looking for
-
My 160 GB i-pod is no longer showing up in i-tunes. Shows up in my computer. Its not syncing. My older i-pod is found and syncs just fine in i-tunes. Any ideas?
-
Instrument window needs to be refreshed every time
When I double click on an midi instrument (the blue button with the instrument name), the window comes up blank. Only the instrument header information can be seen. I then have to re-select "view" which appears to refresh the window and then the inst
-
Passing multi-value param to subreports
I have a main report that has 3 subreports. It used to take a parameter, which was in each subreport and main report sql commands, each would bring back records pertinent to that param. Now report needs to be able to take a multi-value param. I took
-
Activate one database and all databases activate on mailbox server?
We are having some performance issues on one of our mailbox servers. I think I've narrowed it down to disk latency so trying to activate half of the databases on one node of the DAG/cluster and have half active on the other node of the DAG/cluster.
-
How can I find out what iTunes is billing my credit card for?
I was getting several iTunes charges a month that I did not make and they DON'T show up on my purchase list. I changed my password and checked no form of payment and today I checked my credit card statement and there is a charge to iTunes for $12.98