Diferent spry:repeat over a accordion widget
Hello, I am trying to populate a accordion with a xml.
my xml schema is:
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<canal nom="Últimos vídeos visitados">
<item id="968">
<title>Barredora Inalambrica</title>
<text>Pensando en usted y su comodidad le ofrecemos
...</text>
<video>videos/Hogar-3-BarredoraInalambrica.flv</video>
<thumb>videos/thumbs/hogar3_thumb.jpg</thumb>
<img>videos/thumbs/hogar3.jpg</img>
</item>
<item id="1000">
<title>Wonder Max</title>
<text>Preparar una fantástica comida, nunca
había sido ...</text>
<video>videos/Hogar-4-WonderMax.flv</video>
<thumb>videos/thumbs/hogar4_thumb.jpg</thumb>
<img>videos/thumbs/hogar4.jpg</img>
</item>
<item id="1001">
<title>Chef-O-Matic</title>
<text>¿No tienes tiempo para cocinar?
</text>
<video>videos/Hogar-5-Chef-O-Matic.flv</video>
<thumb>videos/thumbs/hogar5_thumb.jpg</thumb>
<img>videos/thumbs/hogar5.jpg</img>
</item>
</canal>
<canal nom="Viajes">
<item id="968">
<title>Barredora Inalambrica</title>
<text>Pensando en usted y su comodidad le ofrecemos
...</text>
<video>videos/Hogar-3-BarredoraInalambrica.flv</video>
<thumb>videos/thumbs/hogar3_thumb.jpg</thumb>
<img>videos/thumbs/hogar3.jpg</img>
</item>
<item id="1000">
my code is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="includes/SpryAccordion.js"
type="text/javascript"></script>
<script src="includes/xpath.js"
type="text/javascript"></script>
<script src="includes/SpryData.js"
type="text/javascript"></script>
<link href="css/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div spry:region="channels items">
<div class="Accordion" id="sampleAccordion"
tabindex="0">
<div class="AccordionPanel" spry:repeat="channels">
<div class="AccordionPanelTab" >{@nom}</div>
<div class="AccordionPanelContent">
<div spry:repeat="items">
<li>{title}</li>
<li>{text}</li>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var channels = new Spry.Data.XMLDataSet("data/channels.xml",
"root/canal", {distinctOnLoad: true});
var items = new Spry.Data.XMLDataSet("data/channels.xml",
"root/canal/item", {distinctOnLoad: true});
var sampleAccordion = new
Spry.Widget.Accordion("sampleAccordion");
</script>
</body>
</html>
I don't know how I can insert the item tags inside de
AccordionTabContent. I want to insert in the AccordionTabContent
each item tag of each channel, but If I do a repeat over channels
dataSet I can't extract the item information and If I try to repeat
over items dataset, I can't extract the canal tag information to
make the AccordionPanelTab.
Do you know how can I do it?
Thanks in advance
I solve this problem today,,..is very vell documented...
When you repeat acordion or tab or other wiget, you need have
in repeat div also constructor of that object..
Try this code...look at last div..
change your include paths.
my work code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>test</title>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script type="text/javascript">
var channels = new Spry.Data.XMLDataSet("xml.xml",
"root/canal", {distinctOnLoad: true});
var items = new Spry.Data.XMLDataSet("xml.xml",
"root/canal/item", {distinctOnLoad: true});
</script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div spry:region="channels items">
<div class="Accordion" id="sampleAccordion"
tabindex="0">
<div class="AccordionPanel" spry:repeat="channels">
<div
class="AccordionPanelTab">{channels::@nom}</div>
<div class="AccordionPanelContent">
<div spry:repeat="items">
<li>{items::title}</li>
<li>{items::text}</li>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var sampleAccordion = new
Spry.Widget.Accordion("sampleAccordion");
</script>
</div>
</body>
</html>
My xml
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<canal nom="Últimos vídeos visitados">
<item id="968">
<title>Barredora Inalambrica</title>
<text>Pensando en usted y su comodidad le ofrecemos
...</text>
<video>videos/Hogar-3-BarredoraInalambrica.flv</video>
<thumb>videos/thumbs/hogar3_thumb.jpg</thumb>
<img>videos/thumbs/hogar3.jpg</img>
</item>
<item id="1000">
<title>Wonder Max</title>
<text>Preparar una fantástica comida, nunca
había sido ...</text>
<video>videos/Hogar-4-WonderMax.flv</video>
<thumb>videos/thumbs/hogar4_thumb.jpg</thumb>
<img>videos/thumbs/hogar4.jpg</img>
</item>
<item id="1001">
<title>Chef-O-Matic</title>
<text>¿No tienes tiempo para cocinar?
</text>
<video>videos/Hogar-5-Chef-O-Matic.flv</video>
<thumb>videos/thumbs/hogar5_thumb.jpg</thumb>
<img>videos/thumbs/hogar5.jpg</img>
</item>
</canal>
<canal nom="Viajes">
<item id="968">
<title>Barredora Inalambrica</title>
<text>Pensando en usted y su comodidad le ofrecemos
...</text>
<video>videos/Hogar-3-BarredoraInalambrica.flv</video>
<thumb>videos/thumbs/hogar3_thumb.jpg</thumb>
<img>videos/thumbs/hogar3.jpg</img>
</item>
</canal>
</root>
Dont remember repeat constructor using last </div> :)
bye
Spry V.1.6
Similar Messages
-
Hi,
Is there any way yo do a spry repeat over columns instead of
rows?did u try something like this? :
<table width="100%" border="0">
<tbody spry:region="ds1" spry:repeat="ds1">
<tr>
<td>{name}</td>
<td>{category}</td>
<td>{Other}</td>
</tr>
</tbody>
</table>
if that doesnt help maby check out the products demo
http://labs.adobe.com/technologies/spry/demos -
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. -
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 -
Help with Spry Rating Widget within a Spry Repeating Region
My link http://www.youthinkyougotitbad.com
This is a long question, but it seems to me if answered somewhere it could help alot of people in the spry community creating comment boards as it uses three important spry widgets: rating, repeating, and tabbed panels. I am trying to use spry rating widget within a spry repeating region within a spry tabbed panel with xml. I was trying to go with the pulse light script (http://forums.adobe.com/message/3831721#3831721) but Gramps told me about the spry rating widget. But I have ran into a couple more problems. First, I couldnt find that much information on the forums or online about how to do the php page with the spry rating widget. None of these have any information on how to do it:
http://labs.adobe.com/technologies/spry/articles/rating_overview/index .html
http://labs.adobe.com/technologies/spry/articles/data_api/apis/rating. html
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.ht ml
And it seems that the official examples are so poor (or I am just ignorant, which def could be a possiblity) it shows
to set the initial rating value from the server, but uses a static value of 4
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.html
<span id="initialValue_dynamic" class="ratingContainer">
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<input id="spryrating1_val" type="text" name="spryrating1" value="4" readonly="readonly" />
<span class="ratingRatedMsg sample">Thanks for your rating!</span>
</span>
<script>
var initialValue_dynamic = new Spry.Widget.Rating("initialValue_dynamic", {ratingValueElement:'spryrating1_val'});
</script>
I finally found a site that has the php and mysql setup.
http://www.pixelplant.ro/en/articles/article-detail/article/adobe-widgets-for-download.htm l
But its not perfect. It has the same problem that I ran into with Pulse light, that you had to use php echo within the spry repeating region to set the initial value from the server:
<span id="spryrating1" class="ratingContainer">
<span class="ratingButton"></span>
<input type="text" id="ratingValue" name="dynamic_rate" value="<?php echo $row['average']?>"/>
</span>
<script type="text/javascript"
var rating1 = new Spry.Widget.Rating("spryrating1", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id=spryrating1&val=@@ratingValue@@'});
</script>
So instead, I tried with three of my panels (www.youthinkyougotitbad.com) to get the average rating from xml by using the following queries:
Recent
Returns the blurts in most recent order along with average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC
Wet Eyed
Returns the blurts in highest ratings order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r Desc
Dry Eyed
Returns the blurts in lowest rating order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r
These all return the correct xml in the correct order.And they return the average rating of each blurt which I can send to my page with xml.
My first question is that I dont know how to configure the query on my fourth panel Empathized & Advised the same way because it already has a Group By for the Comment Id.
SELECT `Comment`.id_Blurt, COUNT(*) as frequency, Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt, `Comment` WHERE Blurt.Id_blurt = `Comment`.id_Blurt GROUP BY `Comment`.id_Blurt ORDER BY COUNT(*) DESC";
Not sure if you guys need more information to understand that all, if so just ask.
So after I get my average value through xml to the first three panels, I set my spry repeating region up like this:
(Blurt panel)
<div spry:region="pv1" spry:repeatchildren="pv1">
<div class="blurtbox">
<!-- most recent blurt tab-->
<h3> "{pv1::Blurt}"</h3>
<p> Blurted from {pv1::Location} at {pv1::Date}</p>
<p>Empathize or Advise about {pv1::Name}'s Blurt #<a href="detailblurt.php?blurtid={pv1::Id_blurt}"> {pv1::Id_blurt}</a></a></p>
<span id="{pv1::Id_blurt}" class="ratingContainer">
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingButton"></span>
<span class="ratingRatedMsg">Thank You! Your tears have been tallied.</span>
<input type="text" id="ratingValue" name="dynamic_rate" value="{pv1::average_r}"/>
</span>
<script type="text/javascript">
// overview of available options and their values:
// http://labs.adobe.com/technologies/spry/articles/rating_overview/index.html
var rating1 = new Spry.Widget.Rating("{pv1::Id_blurt}", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id={pv1::Id_blurt}&val=@@ratingValue@@'});
</script>
<br/>
</div>
</div>
Ok, it registers the right vote in the database with the right blurt id each time. But I am having two problems so far:
One, even though {pv1::average_r} returns the correct average through xml, it doesn't show the initial rating value for each of the repeating blurts. It seems to show the first one correct, and then just repeat that same value to the other ones that follow. I just dont understand since it can get the correct server value right after you vote (afterRating:'serverValue), that I can't manipulate spryrating.js in some way that I could just replace 'ratingValue' in ratingValueElement:'ratingValue' with something to give me the initial server value.
Two: Is even more mysterious to me, if you play around with voting on the site, sometimes you are unable to vote on different blurts. Its weird. It seems like that the javascript is completely off just on those blurts. And sometimes its a whole row, sometimes none. But so far its never a problem on the first tabbed panel (Recent), only on the other three. As far as I know, the coding is exactly the same in each tab's repeating region except for the different xml input.
And, now on the live server, sometimes the pics of tears used to voting dont show up until you click.
Any help on those three questions (how to query the fourth panel, how to show the initial server value, and the glitches with voting) would be greatly appreciated!! I looked pretty hard on adobe forums and other sites, and didnt see much on how to really use the spry rating widget with php and xml.
Thanks!!Update:
Ok, the first query on the Recent tab doesnt work for me because it wont show unless its already voted, and since these are supposed to be new blurts, that kind of breaks the whole site:
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC";
So I replaced it with what I originally had.
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt ORDER BY Blurt.`Date` DESC";
But this doesn't provide me with the initial average rating:( -
SPRY accordion widget IE8 ONLY issue
hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
Reliability of Spry Accordion Widget
I posed a question in this forum last week and was unable to
get a helpful answer to my problem. I am trying to use the Spry
Accordion Widget on a site:
http://www.jalc.org/JazzED/s_eac_B.html
I have researched here to learn how to get the panels to
start closed with one panel to be open by default. This works
exactly like expected in Firefox and Chrome but NOT in IE.
Am I wrong in my assumptions that:
1) Folks from Adobe monitor this board and chime in with
answers/solutions or acknowledgement of bugs; and
2) Spry widgets are a reliable cross-platform technology that
have had the bugs worked out
or, is the real case
1) Adobe folks only look into these forums on an occassional
basis, if at all; and
2) Spry widgets should be left alone if you are expecting
them to perform properly relative to cross-platform capabilities.
I appreciate anyone's feedback or suggestions on these
questions.
Thanks,
AndyI just re-read my post above and am mortified at the tone of
my message. It was in no way intended to come off as pissy, which I
fear it might have. Anyone with any thoughts on my issue, I would
appreciate your feedback.
Regards,
Andy -
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 restructuring I would have to do to the JavaScript?Try
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
.openit .AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>
</head>
<body>
<a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
<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 src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryDomUtils.js"></script>
<script>
function MyOpenAllEventHandler() {
Spry.$$("#Accordion1").addClassName("openit");
function MyCloseAllEventHandler() {
Spry.$$("#Accordion1").removeClassName("openit");
Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The "!important" on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, "!important" is necessary to "trump" the inline styles.
Gramps -
Automatically Animating Spry Accordion Widget on Page Load
I've been searching and searching and still can't find a clue
as how to make the Spry Accordion Widget automatically open the
next panel. I want the panels to expand automatically and loop back
at the last panel.
Do I need to create another function for this or is there
already a function created in the .js file?
Any help is appreciated...even if you can point me in the
right direction.
Thanks!DeviseInnovations wrote:
> I've been searching and searching and still can't find a
clue as how to make
> the Spry Accordion Widget automatically open the next
panel. I want the panels
> to expand automatically and loop back at the last panel.
>
> Do I need to create another function for this or is
there already a function
> created in the .js file?
>
> Any help is appreciated...even if you can point me in
the right direction.
Sounds more like you'd want sliding panels:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
I've seen an automatic version created that might do what you
want:
http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
But if you really want an Accordion, then you might be able
to adapt the code in the auto sliding panels above.
FYI: There's a Spry forum that would be better to post Spry
related question in:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
Can Spry Accordion widget be nested?
I am using a Spry Accordion widget as a menu bar but need to
have the links in the content drop down to another set of links. Is
this possible? I guess I should ask, has anyone in this forum done
this successfully? Thanks.<div class="AccordionPanelContent">Castaway the: Restaurant<br />
1250 Harvard Rd.<br />
Burbank, CA 91501<br />
- www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin -
Spry Accordion Widget problems - please help
I've been trying to modify the settings for an accordion
widget - basically to open the widget with no panels open, and to
have varying panel heights. I have been to the help and the lab
forums and have put in the code, but alas, nothing worked. So I
downloaded the 1.5 prerelease just to see - and saw there was an
example of exactly what I wanted to do! (AccordionSample.html)
however when I went to preview this in DW CS3, it did not work ...
it did the same thing that mine was doing - opening all the panels,
and none were clickable. Is this something you cannot test locally?
Does it have to be on a test server? I am running this on a G5 with
10.4.9, if that helps at all.
Hmmm - uploaded it to my web server and still get the same
thing ... here's the
link:Hi!
The version of the spry files on your server are 1.3, not 1.5
- hence using the options from 1.5 with the 1.3 files won't work
(they don't understand the options).
You need to a) update the spry files in DW CS3 to 1.5 so that
they will work with DW, and b) update the spry files on the
webserver to 1.5, as DW will not overwrite them itself incase you
changed something in them.
See:
here
for details -
Spry Accordion Widget Behavior
I am using Dreamweaver CS3 and several Spry components. I am new to using Spry, but like how easy it is to impliment. One of the components I am trying to use is the Accordion Widget. The widget appears to function well (I am using variable panel heights) and the behavior appears as designed.
I am using the panel containers to list links to additional pages based on subject groups.
My question involves moving back and forth from the widget page to a listed pages, then back to the widget page.
The behavior I see is:
1) User loads widget page, widget panel 1 is expanded onload.
2) User expands different panel.
3) User clicks URL link within different panel.
4) User moves to new page (referenced URL page).
5) User reviews content, decides it is not appropriate and wants to select another URL.
6) User clicks the browser “back” button and returns to the widget page.
7) Widget page onload returns to expanded panel 1.
Is there a way for me to tweak the JavaScript so that the user returns to the expanded panel they left rather that panel 1? Is panel 1 always going to be the panel that opens on page load? (Unless I have the settings set to no expanded panes on page load.)
Thanke you for any suggestions.
TPKGreetings Arnout,
Sorry for the late reply. (Side-tracked with other work.)
I have a "outside-the-firewall" review area almost complete if you still have time to look at my code.
After testing several browsers and 2 platforms I have found that my problem is likely not with your code at all, but with small modifications that I have had to do to it. For example, I will need to have 2 separate Accordion blocks on the page I am developing.
When I drop Dreamweaver generated Spry code into the page the <div class="Accordion" ID="Accordion1"> is created (which suits my future needs, the additional block will have <div class="Accordion" ID="Accordion2">. I noticed that your code uses <div class="Accordion" ID="sampleAccordion">.
If I go through the cookie code and change all references of "sampleAccordion" to "Accordion1" the code breaks. I am missing something and haven't been able to find it.
Additionally, I noticed something odd when testing the widget. When testing using a Mac (Safari and Firefox) it appeared I didn't need the cookie code at all. The unmodified Dreamweaver Spry code appeared to hold the value of the launch panel when I moved from my launch page, to my receiver page, then back to my launch page.
This wasn't the case with Windows IE and Firefox. IE 6 appears broken onLoad, IE 8 and Firefox breaks when I go back to the launch page from the receiver page. Very odd behaviors. Tonight I will load your original code on a test page and add testing notes so that I have a "control".
The URL for the (several) test pages is: http://tim.kern.home.comcast.net/~tim.kern/
If you have any suggestions (for modifying the cookie code to work with more than one widget on a page) I would certainly appreciat them.
Thank you very much for the original code.
TPK -
Spry Accordion Widget hiccups and more
Hi, I am using the Spry Accordion Widget on my website and have the following problems:
1. Is there a way for the accordion movement not to affect the images that are placed below it. For example, I have the accordion placed on top of 3 different logos. Whenever, the accordion panels move up and down (in use) all the contents (below the accordion) moves with it. I don't want the logos to move up and down whenever someone clicks on the panels. How do I make the logos stationary so its placements won't change?
I don't want to use an ap div tag because that would force my website to be in a fix position on a page. All I have been using to position my graphics are div tags and floats; no ap div tags. If you resize the browser window you will see that my website is somewhat elastic. Meaning, the graphics are always in the center of the page regardless of the size of the browser window—this is something I want to keep.
Please go here for better understanding: http://meinaco.net/tblLists.html
2. When one of the accordion tab is clicked there seems to be some kind of hiccup/jump/jerky (up and down movement) before it settles/stops. Is there a way to fix that? I noticed the accordion moves up and down smoothly prior to my inserting the images into the tab panels. To be clear, the images I am referring to are the brown horizontal lines with white words on a green background. Do these images have anything to do with this problem?
3. When the 1st tab (the restaurant panel) is open and another tab is selected, the restaurant panel displays large incorrectly styled text for a brief second as it closes to allow the other panel to open. I know it has something to do with my style sheet but I can't figure out what is causing it. I checked my css files and it seems they all have the correct size. To see this problem reoccur please do the following:
Make sure the restaurant panel is open then click on another panel (one of the 3 panels). As you click on the second panel pay attention to the text that sits inside the restaurant panel. You will see that large minus leading text will appear for a split second.
4. When I run my webpage (url mentioned above) on Safari 4.0.3 there seems to be a blue line outlining the whole accordion widget. This outline doesn't exist on Firefox nor on Opera. Please see attached image for clarity.
Any suggestions or help on any of these problems is greatly appreciated! Thank you in advance.
Meina
I hope someone can help me resolve or give me suggestions for the 1st and 2nd problems at the very least.<div class="AccordionPanelContent">Castaway the: Restaurant<br />
1250 Harvard Rd.<br />
Burbank, CA 91501<br />
- www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin -
Spry Accordion Widget appears incorrectly
Hello all,
I used the Spry accordion widget in my online portfolio (http://www.halyna.htsolutionsonline.com). I tested it in IE6, IE7, Mozilla and Safari browsers before uploading. It appeared and worked correctly. I also had friends test the site with their own PCs and Macs. Everything was reported to work correctly.
At work, I found that when I open the first panel of the accordion, the names of the rest of the panels move to the right and only the first open panel appears on the screen with the names of the bottom three panels to the right of the panel which makes all of it look very unprofessional. This doesn't happen when I open the following three panels. Everything appears as it should.
Can anybody shed light on what is causing this? As I mentioned, the site appears and works correctly everywhere else.
All help appreciated!!<div class="AccordionPanelContent">Castaway the: Restaurant<br />
1250 Harvard Rd.<br />
Burbank, CA 91501<br />
- www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin -
Curious about the Spry Accordion widget?
Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:
Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)
Curious about Spry, but have never used Spry widget features in Dreamweaver
You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver
Familiar with CSS styling and how it works
We are offering a small incentive to those willing to help us complete this study.
If you meet these requirements and would like to participate, please contact me at [email protected]
In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.
Thanks!I added an accordion widget and it works on one site page while same code won't work on another page.
It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now/K-5th-Grades.aspx
Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx
Yet both pages have identical code (with absolute links to the CSS and JS files).
Can anyone shed some light on a solution?
Maybe you are looking for
-
App store and safari don't work anymore after maverick upgrade
Hello everybody, I'm experiencing mysterious problems with app store and safari that I don't really know if it can depend on the installation of maverick (maybe it happened afterwards and I noticed it at a later time). When I launch app store I have
-
Error while executing planning function with reference data
Hi, I have a two planning functions one is used to upload the file (with out reference data checkbox in planning function RSPLF1) and other planning function ('Referece data'check box is selected in custom planning function RSPLF1) to execute the log
-
I got my iPhone back from apple to day for a repair and has no screws
I got my iPhone 5 back from apple today I sent it in for a repair cause the touch stopped working and I got it back with no screws I'm over it
-
FX5600Ultra-VTDR256 Video in Help
Hi, I know this graphics card can have both VIVO for it. My question is how do I connect my TV to it so I can record TV programs onto my PC. Do I need software as long as hardware? I have a S-Video to S-Video cable for the video. I guess I'll nee
-
Imac G4 black screen - darwin/BSD??? bash - 2.05a$
Wow what does this mean!!?? We were installing the operating software when we were asked for a password, we had to reset password which we did, started up the computer again, got to log in screen, entered password and then............ black screen co