Accordion and Spry data

I've seen a number of questions with regards to populating an
Accordion with Spry data. I can load the data but the widget
breaks. Is there a solution? I've tried using states with no
success. My current code:
<div spry:region="dsMedia">
<div spry:state="loading">loading...</div>
<div spry:state="ready">
<div id="menu" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsMedia">
<div class="AccordionPanelTab">{@title}</div>
<div class="AccordionPanelContent"><a
href="{@path}">{@description}</a></div>
</div>
</div>
</div>
</div>
--sb.

Excellent! - that does the trick. Guess I should learn about
observers.
My site is a work in progress - but here's the link:
squarehead
Thanks again,
--sb.

Similar Messages

Accordion with spry data on IE8

Hi,
I have an accordion with spry data and everything works fine on IE8 and FF, but on IE8 when i click on a accordion tab it doesnt focus on that open panel. It takes me at the very top of where my accordion begins. I notice the same thing happens to the accordion with spry data site. It's a problem for me because my page has a long accordion and our users have small laptop screens. Does anyone know how this can be fixed in IE8?
Sorry i dont have a sample link or code, because it's on our company intranet. but i used the exact same method on the spry accordion with data page.
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
thanks!

Good. I am sure you can figure it out.
http://labs.adobe.com/technologies/spry/articles/pager/index.html
Let us know.
Donald Booth
Adobe Spry Team

Split Spry.Data and Spry.Data.Region from SpryData.js?

I don't like Spry.Data.Region or anything like Spry.*.Region because it make hard to customize using javascript.
But Spry.Data with Observer / Notify feature is great one. In fact, using SpryData.js, I can write my own "render html object" easier.
SrpyData.js is big (127KB) even when compressed, it is still 65KB. That why, needed split Spry.Data and Spry.Data.Region from SpryData.js so who want to use Spry.Data only like me will get smaller trafic.
I've tried remove all Spry.Data.Region content in SpryData.js. Surprise, some in Spry.Data call to Spry.Data.Region >>> Design have problem.
Anyone can help splitting them?

Found this in the archives:
<div spry:if="{ds_RowCount} == 0" class="trigger" style="display:none"></div>
Basically a hack to point the tooltip to a hidden div so no errors are thrown.

Paging of accordion with spry data

Hello everyone !
It is possible to paginate
this
example in order to show a specific number of accordion divs
per page ?
I've tried to insert and adapt the
Massimo
Foti's spry data paging but without success considering that
I'm not very familiar with javascript.
Thanks,
Gabetu

Good. I am sure you can figure it out.
http://labs.adobe.com/technologies/spry/articles/pager/index.html
Let us know.
Donald Booth
Adobe Spry Team

Problem with tooltips and spry data using startLoadInterval

I am trying to use tooltips with a dynamic table using the spry data example at the bottom of the page:
http://labs.adobe.com/technologies/spry/articles/tooltip_overview/index.html
I have it working except that it appears to have a memory leak as firefox's memory usage continues to grow.
I did notice there is a 'new' inside the onPostUpdate:function that is being called on every table update.
So after looking at the tooltip code I modified the function to:
<script type="text/javascript">
var tt1;
var observer = {onPostUpdate:function(){if(tt1 == null){tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}else{tt1.destroy(); tt1.destroy();if(tt1.checkDestroyed()) alert("destroyed");else alert("not destroyed");delete tt1; tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}}}
Spry.Data.Region.addObserver('mainRegion', observer);
</script>
The tt1.checkDestroyed() always returns false and my memory usage continues to grow.
Any help?

Thanks for the reply. I found a way to get it to work by changing my
observer function to the following:
else{tt1.destroy();
tt1.init('.trigger', 'tooltip',
{});tt1.attachBehaviors();Spry.Widget.Tooltip.loadQueue.push(tt1);}}
Probably not very clean but it doesnt grow memory and works correctly.
I just put it back to the old way as in the example with a
startLoadInterval(1500) :
And I am over 500MB after ~ 30 minutes where as the top code above ran with
a startLoadInterval(1500); overnight and is about ~120MB.
I am using a double repeatchildren loop to build a table with tooltips for
each cell which may affect it.
Bottom line is I have a way to make it work so I am moving forward. If you
still want to see it I might be able to get it up on the internet and give
you a link.
Thanks,
Greg Wirth

Need a little help with Slimbox (Lightbox clone) and Spry data sets

Hello guys!
First of all let me say that I'm not a programmer in any way,
shape or form, and somehow I managed to build me a dynamic
thumbnail gallery that reads data from an XML file and displays it
on my webpage using a Spry data set and a slider widget (yay!)
This is of course only thanks to the many great examples
provided by the Adobe Spry team, and me being stubborn enough to
keep at it, even though I don't really understand what I'm doing :D
But I got to this point where I have basically everything
working, except that I can't get the Slimbox (Lightbox clone)
script to work with the Spry-generated thumbnail gallery.
From what I could understand from other threads on this
forum, is that I need to add an observer somewhere, only that I'm
not sure where and how (those threads are pretty old and the
examples aren't available anymore).
I'm sure you guys know what I'm talking about, anyway, here's
what I got so far:
http://www.riotdesign.com.ar/misc/gallery/test1.html
I have the thumbnail gallery populated from the external XML
file, a basic page navigation using the Sliding Panels widget, and
the Slimbox script which works only on the static test image.
Okay I guess that's it for now, sorry for the long post and
of course any help with this will be GREATLY appreciated :)
Thanks & bye!

Kev,
Where exactly does the .evalScripts = true; text need to go?
Does it go in the href call?
<a href="ManageNotes.asp" title="Manage Notes" onClick="this.blur();
Modalbox.show(this.href, {title: 'Manage Notes', width: 575}); return false;">View your notes.</a>
Thanks for any assistance.
J Bishop

.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> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
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 Data in Accordion in Tabs

Hi
I have been able to get xml spry data to work in an accordion and I have been able to get an accordion to work in tabs but I cannot get the data to work in an accordion that is in a tab -- the accordion panels do not collapse. I have a sample testing site at http://testing.bellamys.org that has two tabs -- the first tab has spry data in an accordion but the panels do not collapse. The second tab shows an accordion working properly but uses hard coded data.
I have a database that will export xml files for courses for different grades. I would like to have all the courses for a grade displayed in a panel and have each grade set in a tab. Any help would be greatly appreciated .

Hi Ronald,
Place the constructor withing the Spry region as follows
      <div spry:region="dsGrade5" >
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div spry:repeat="dsGrade5" class="AccordionPanel">
            <div class="AccordionPanelTab">{@name}</div>
            <div class="AccordionPanelContent">{summary}</div>
          </div>
          <script>
               var Accordion1 = new Spry.Widget.Accordion("Accordion1");
          </script>
        </div>
      </div>
I hope this helps.
Ben

Spry Data Sets and IE8

Hi, I Currently have a glossary using the Spry Tabbed Panels with Spry Data Sets embedded in each tab. I had it working great in pre IE8.
Once we upgraded to IE8 it just wont load or display the data sets in the tabs. Below is the page code. (I used the JS straight from the Spry Framework no alterations, except in the CSS files). Any help would be great =).
<!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=iso-8859-1" />

<title>Glossary</title>

<script src="/composition/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/composition/composition002/profile_processes/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/composition/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/composition/composition002/profile_processes/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="/composition/SpryAssets/SpryStackedContainers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defnum", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds2 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defa", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds3 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defb", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds4 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defc", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds5 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defd", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds6 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defe", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds7 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/deff", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds8 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defg", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds9 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defh", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds10 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defi", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds11 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defj", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds12 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defk", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds13 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defl", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds14 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defm", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds15 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defn", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds16 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defo", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds17 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defp", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds18 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defq", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds19 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defr", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds20 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defs", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds21 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/deft", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds22 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defu", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds23 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defv", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds24 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defw", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds25 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defx", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds26 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defy", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
var ds27 = new Spry.Data.XMLDataSet("/composition/composition002/profile_processes/profile_glossary/glos sary.xml", "glossary/def/defz", {sortOnLoad: "word", sortOrderOnLoad: "ascending"});
</script>

<link href="../../../../composition/css/profile_sp1.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../../../../composition/css/print1.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<div id="top1">
<table width="100%" height="75px" border="0" cellpadding="3" cellspacing="0">
    <tr bgcolor="#000000">
      <th width="6%" height="36" align="left" valign="middle" scope="col"><img src="/composition/composition002/Profile_Processes/graphics/globe2.gif" alt="globe" width="70" height="68" border="0" /></th>
      <th width="94%" align="left" valign="top"><span class="whitebanner">Composition Learning Center</span><br />
                     <span class="whitebanner2"><strong>Learn. Grow. Succeed.</strong></span></th>
    </tr>
</table>
</div>
<div id="Layer4">
<h1 align="center">Glossary</h1>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" style="display:none" tabindex="0"></li>
    <li class="TabbedPanelsTab" tabindex="0">A</li>
    <li class="TabbedPanelsTab" tabindex="0">B</li>
    <li class="TabbedPanelsTab" tabindex="0">C</li>
    <li class="TabbedPanelsTab" tabindex="0">D</li>
    <li class="TabbedPanelsTab" tabindex="0">E</li>
    <li class="TabbedPanelsTab" tabindex="0">F</li>
    <li class="TabbedPanelsTab" tabindex="0">G</li>
    <li class="TabbedPanelsTab" tabindex="0">H</li>
    <li class="TabbedPanelsTab" tabindex="0">I</li>
    <li class="TabbedPanelsTab" tabindex="0">J</li>
    <li class="TabbedPanelsTab" tabindex="0">K</li>
    <li class="TabbedPanelsTab" tabindex="0">L</li>
    <li class="TabbedPanelsTab" tabindex="0">M</li>
    <li class="TabbedPanelsTab" tabindex="0">N</li>
    <li class="TabbedPanelsTab" tabindex="0">O</li>
    <li class="TabbedPanelsTab" tabindex="0">P</li>
    <li class="TabbedPanelsTab" tabindex="0">Q</li>
    <li class="TabbedPanelsTab" tabindex="0">R</li>
    <li class="TabbedPanelsTab" tabindex="0">S</li>
    <li class="TabbedPanelsTab" tabindex="0">T</li>
    <li class="TabbedPanelsTab" tabindex="0">U</li>
    <li class="TabbedPanelsTab" tabindex="0">V</li>
    <li class="TabbedPanelsTab" tabindex="0">W</li>
    <li class="TabbedPanelsTab" tabindex="0">X</li>
    <li class="TabbedPanelsTab" tabindex="0">Y</li>
    <li class="TabbedPanelsTab" tabindex="0">Z</li>
    <li class="TabbedPanelsTab" tabindex="0">0 to 9</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds2" class="StackedContainers">
        <div spry:repeat="ds2" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds3" class="StackedContainers">
        <div spry:repeat="ds3" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds4" class="StackedContainers">
        <div spry:repeat="ds4" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds5" class="StackedContainers">
        <div spry:repeat="ds5" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds6" class="StackedContainers">
        <div spry:repeat="ds6" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds7" class="StackedContainers">
        <div spry:repeat="ds7" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds8" class="StackedContainers">
        <div spry:repeat="ds8" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds9" class="StackedContainers">
        <div spry:repeat="ds9" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds10" class="StackedContainers">
        <div spry:repeat="ds10" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds11" class="StackedContainers">
        <div spry:repeat="ds11" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds12" class="StackedContainers">
        <div spry:repeat="ds12" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds13" class="StackedContainers">
        <div spry:repeat="ds13" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds14" class="StackedContainers">
        <div spry:repeat="ds14" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds15" class="StackedContainers">
        <div spry:repeat="ds15" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds16" class="StackedContainers">
        <div spry:repeat="ds16" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds17" class="StackedContainers">
        <div spry:repeat="ds17" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds18" class="StackedContainers">
        <div spry:repeat="ds18" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds19" class="StackedContainers">
        <div spry:repeat="ds19" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds20" class="StackedContainers">
        <div spry:repeat="ds20" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds21" class="StackedContainers">
        <div spry:repeat="ds21" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds22" class="StackedContainers">
        <div spry:repeat="ds22" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds23" class="StackedContainers">
        <div spry:repeat="ds23" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds24" class="StackedContainers">
        <div spry:repeat="ds24" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds25" class="StackedContainers">
        <div spry:repeat="ds25" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds26" class="StackedContainers">
        <div spry:repeat="ds26" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <div spry:region="ds27" class="StackedContainers">
        <div spry:repeat="ds27" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">
    <div spry:region="ds1" class="StackedContainers">
        <div spry:repeat="ds1" class="RowContainer"> <div id="w1d" class="RowColumn">{word}</div>
          <span class="RowColumn">{definition}</span>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:0});
</script>
</div>
</body>
</html>

Thanks Gramps.
I totally forgot about the Xpath filtering.
Trusty Hammer
altruistic gramps <[email protected]>
01/11/2011 05:06 PM
Please respond to
[email protected]
To
patrick dennis <[email protected]>
cc
Subject
Spry Data Sets and IE8
A quick fix: add the following to your document
A better fix: reduce the number of datasets to just one and use Xpath
filtering triggered by an onclick event, as in clicking the relevant tab.
Gramps
For a more specific answer, please supply a link to your site.

Spry accordion and #wrapper issue

Hi
I am in the process of trying to put together a portfolio site as part of a CIW course. If you look at the current site www.jmacphot.com you will see on the equipment page I have tried to add a spry accordion and then a spry tabbed menu inside the accordion. However you will see that when I insert a large amount of information into the content area it pushes the tab over the footer and does keep the footer at the very bottom of the page... I am stumped as I have not set any specific height on my CSS to keep moving.
Can someone please advise where I might be going wrong here. Sorry if this question has been asked repeatedly but I am very new to web design.
Your help with this is greatly appreciated!
Regards
John

Thanks ben, I initially thought if I left the height of my wrapper blank and also the height of the spry content blank they would expand as more information was entered? Is there possibly and issue with CSS hierarchy?
Thanks again for your help!!
John

Spry Data Set, include external page and javascript

I have a problem with Spry Data Set... I have necessity to
include a html page with javascript functions (static html page) in
another but doesn't work.
This is an example with "Elevator Panel Magic" extension
(projectseven.com):
Home page with dataset (home.html)
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<script src="../SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="p7epm/epm1/p7EPM01.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7epm/p7EPMscripts.js"></script>
</head>
<body>
<span spry:detailregion="ds1">{column0}</span>
</body>
</html>
External page with elevator panel magic
("include_header.html")
<!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>
</head>
<body>
<div id="header_menu_test">
<div id="p7EPM_1" class="p7EPM01">
<div id="p7EPMt_1" class="p7epm_trigs">
<ul>
<li class="t1"><a href="#p7EPMc1_1"
id="p7EPMtrg1_1">New Heading Text 1</a></li>
<li class="t2"><a href="#p7EPMc1_2"
id="p7EPMtrg1_2">New Heading Text 2</a></li>
</ul>
<div class="p7epm_ie5clear"> </div>
</div>
<div id="p7EPMdw_1">
<div id="p7EPMw1_1" class="p7epm_cwrapper">
<div id="p7EPMc1_1" class="p7epm_content pan1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem
mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam
adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar
fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin
ut, fermentum congue, pharetra eu, massa. Suspendisse potenti.
Morbi commodo mauris. Ut at pede. Ut id nisi. Donec scelerisque
urna quis ligula. Praesent est. Vestibulum scelerisque. Curabitur
quam. Fusce rhoncus pellentesque ipsum. Aenean venenatis metus ac
quam. Maecenas lacus lacus, sagittis vitae, congue at, euismod eu,
urna. Maecenas vitae purus. Praesent eros lectus, porta et, semper
nec, molestie eget, tortor.</p>
</div>
</div>
<div id="p7EPMw1_2" class="p7epm_cwrapper">
<div id="p7EPMc1_2" class="p7epm_content pan2">
<p>Lorem ipsum dolor sit amed sed diam nonummy nibh
euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, eu feugiat nulla at
vero eros et accumsan et odio qui blandit praesent luptatum augue
duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amed sed diam nonummy nibh
euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, eu feugiat nulla at
vero eros et accumsan et odio qui blandit praesent luptatum augue
duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>


<script type="text/javascript">

</script>
</div>
</div>
</body>
</html>
**********************

I think it is a bit too late you're 'finally experimenting' with Spry.
Spry has been deprecated from Adobe and is now been made Open Source on GIT - meaning Adobe will no longer officially support Spry tools. The next major release of DW will most probably get rid of Spry, for good.
Read here: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
jQuery is the way ahead. You may want to switch to jQuery - since anyway you've mentioned you're just 'experimenting' at the moment. That way, you're not spending time on something that is no longer being supported/ developed by their developers.
-ST

Spry:Content and Dynamic Spry Data

Is there a way to get the spry:content attribute to work well
with dynamic data generated from PHP/MySQL? I have read the
progressive enhancement article and I am totally lost on it.
The provided examples in the documentation deal with static
data but there are so example of using spry:content and dynamic
data.
Can anyone help?
Thanks

Hi Arnout
These are the urls:
http://www.grafikkaos.co.uk/pages/front/test_home.php
- this one displays the spry:content properly, but in the source,
it does not show the 5 articles.
http://www.grafikkaos.co.uk/pages/front/test_home_2.php
- I applied a PHP repeat region here. In the source, it shows 5
articles being shown but on page view, each title and date is
repeated 5 times.
Any ideas?
Thanks

SPRY accordion and tabs not displaying in IE6

Hi everyone:
Even after clearing up some validation errors in my HTML, I
am experiencing issues with a SPRY accordion and another page with
a Tabbed SPRY widget not appearing in IE6. The pages all work fine
in IE7, Firefox and Safari. I would greatly appreciate anyone
taking a look (link below) and letting me know if you see any
errors or know of a bug I have not found the fix for. My CSS
validates 100% so I don't think I have made any style sheet errors.
Thanks very much.
www.ducksroofing.com
K.

Hi all:
After some more tinkering, I have discovered the real issue
is that my containing element is not containing the entire page and
therefore cutting off my SPRY elements on the pages which have
them. This is causing the SPRY widgets to fall apart and, of
course, for the page to only scroll partially down.
Does anyone have a suggestion as to why the SPRY tabbed
element and accordion element on my pages is not nesting within
document flow and remaining with the containing div? I appreciate
your help.
Once again, url is: www.ducksroofing.com
K.

Spry data sets and column width

Hello,
might sound simple ... I have a dynamic spry data table. The
data show fine ... But I don't seem to be able to set the width of
my columns through CSS (I give each column a separate style class,
and all other properties work fine, except the width of the column)
Anybody a view ?
Thanks a million for your help.
Peter

<script type="text/javascript">

</script>
<div class="Tbl" spry:region="Flags">
<table>
<tr>
<th class="ID" spry:sort="@id">Id</th>
<th class="TblC" spry:sort="Delete">Delete</th>
<th class="TblL"
spry:sort="URL_Display">Link</th>
<th class="TblL">Status</th>
<th spry:sort="Visible">Visible</th>
<th spry:sort="HTML">Html</th>
<th spry:sort="Content">Content</th>
<th spry:sort="Hits">Hits</th>
<th spry:sort="Pct">%</th>
<th spry:sort="Time">Time</th>
</tr>
<tr class="TblSummary">
<td class="ID" >IDS</td>
<td class="TblC"> </a></td>
<td class="TblL"> </a></td>
<td class="TblL"> </span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr spry:repeat="Flags" spry:odd="Odd" spry:even="Even"
spry:hover="Hover" spry:select="Select">
<td class="ID" >{@id}</td>
<td class="TblC"><a href="#"
onclick="{Delete}"><img src="../Images/icons/cancel.png"
/></a></td>
<td class="TblL"><a
href="{URL_Link}">{URL_Display}</a></td>
<td class="TblL"><span
class="{Status_Style}">{Status}</span></td>
<td><a href="{Visible_Pre}"><img
src="../Images/icons/{Visible}.png" /></a></td>
<td><img src="../Images/icons/{HTML}.png"
/></td>
<td><a href="{Content_Pre}"><img
src="../Images/icons/{Content}.png" /></a></td>
<td>{Hits}</td>
<td>{Pct}</td>
<td>{Time}</td>
</tr>
</table>
</div>
and the css style sheet says ....TblL
text-align: left;
padding-left: 0px;
width: 150px;

Spry Data Sets and CFCs?

So, I've got the Spry Data Set working reading an XML file:
http://brad.melendy.com/projects/ajax/spry/test1.cfm
Which seems to work, the ID column sorts on click, all is
well. The actual
file it is reading is located here:
http://brad.melendy.com/projects/webservice/employee.xml
Then, I have it set to read the same data from my CFC in this
version here:
http://brad.melendy.com/projects/ajax/spry/test2.cfm
This isn't working? But I can see the data when I open the
CFC directly in
my browser like this:
http://brad.melendy.com/projects/flex/DataTest4/employees.cfc?method=FindAll
So finally, here is my code on test2.cfm that isn't working?

<script src="../../../SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="../../../SpryAssets/SpryData.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div spry:region="ds1">
<table>
<tr>
<th spry:sort="id">Id</th>
<th>FirstName</th>
<th>LastName</th>
<th>OfficePhone</th>
</tr>
<tr spry:repeat="ds1" spry:setrow="ds1">
<td>{id}</td>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{officePhone}</td>
</tr>
</table>

The two files test1.cfm and test2.cfm are the same except for
the source of
the XMLDataSet which is the static XML document in test1.cfm
and the full
URL to the CFC in test2.cfm.
Thanks for any tips, this is exactly how it is suppose to
work according to
the livedocs but it isn't.
...Brad

I figured this out, my problem was that although IE was
displaying identical
XML documents from my CFC and employee.xml, the output
produced by the CFC
was not a true xml document. I'm not sure exactly what was
making it fail
to be seen as an xml document, but after updating the code to
use <cfxml>
the document was created properly and then Spry could see the
data and
display it.
"Brad Melendy" <[email protected]> wrote in
message
news:[email protected]...
> So, I've got the Spry Data Set working reading an XML
file:
>
>
http://brad.melendy.com/projects/ajax/spry/test1.cfm
>
> Which seems to work, the ID column sorts on click, all
is well. The
> actual file it is reading is located here:
>
>
http://brad.melendy.com/projects/webservice/employee.xml
>
> Then, I have it set to read the same data from my CFC in
this version
> here:
>
>
http://brad.melendy.com/projects/ajax/spry/test2.cfm
>
> This isn't working? But I can see the data when I open
the CFC directly
> in my browser like this:
>
>
http://brad.melendy.com/projects/flex/DataTest4/employees.cfc?method=FindAll
>
> So finally, here is my code on test2.cfm that isn't
working?
>
> 
> <script src="../../../SpryAssets/xpath.js"
> type="text/javascript"></script>
> <script src="../../../SpryAssets/SpryData.js"
> type="text/javascript"></script>
> <script type="text/javascript">
> 
> </script>
> </head>
>
> <body>
> <div spry:region="ds1">
> <table>
> <tr>
> <th spry:sort="id">Id</th>
> <th>FirstName</th>
> <th>LastName</th>
> <th>OfficePhone</th>
> </tr>
> <tr spry:repeat="ds1" spry:setrow="ds1">
> <td>{id}</td>
> <td>{firstName}</td>
> <td>{lastName}</td>
> <td>{officePhone}</td>
> </tr>
> </table>
> 
>
> The two files test1.cfm and test2.cfm are the same
except for the source
> of the XMLDataSet which is the static XML document in
test1.cfm and the
> full URL to the CFC in test2.cfm.
>
> Thanks for any tips, this is exactly how it is suppose
to work according
> to the livedocs but it isn't.
>
> ...Brad
>
>

Accordion and Spry data

Similar Messages

Maybe you are looking for