Spry html dataset ? sliding detail panel?

I have created a spry html dataset on a dreamweaver CS4 site. The master column has around 40 entries and the detail column is rather small. When clicking on the names in the master column, the detail information appears at the top of the page - no problem for entries at the top of the page, but for entries near the bottom of the list, you need to scroll up the page to see the information. I want to either make the master column scrollable or in some manner make the detail column appear beside the name in the master column. I have looked at sliding panels, accordionb panels ,etc... but can't seem to get the coding right to make this work. Waht would be best to use and how should I do this?
You can find the page here... http://www.ituna.ca/WhereAreTheyNow3.html excuse the mess at the top there is much work to be done here...just uploaded so I could get some help.
Thanks

A fast way would be adding height:300px; overflow:scroll; to your css..
MasterDetail .MasterContainer {
background-color:#FFFFFF;
border:1px solid gray;
color:#000000;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:x-small;
font-weight:bold;
height:300px;
overflow:scroll;
text-align:left;
width:35%;
But anyways if you want to use accordions with Spry Data. take a look at the samples: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html

Similar Messages

Spry HTML Datasets on Business Catalyst

I am venturing into new territory with Business Catalyst, and have FTPd a site to BC that contains a number of Spry HTML Datasets.
Although the code appears to be correct, and the auxiliary pages are there...I think!...at least the page with the data is there...The Master/Detail presentation is just not working.
I have used Spry on other pages: collapsible panels, accordions, etc., and they all function well, but are of course self-contained...no data needed from off-page besides the JS and the CSS.
Has anyone any experience with BC and Spry HTML Datasets? You can find a page at http://chaplaincyinstituteofmaine.businesscatalyst.com/faculty.html
Beth

As your are now running on BC, there is no reason to still include the ICE scripts.
<script src="includes/ice/ice.js" type="text/javascript"></script>
Delete !
As for general debugging, i would suggest, installing Firefox, with the firebug plugin. ( www.getfirefox.com & www.getfirebug.com ).
As the page you supplied suffers from JavaScript Errors. Probably because of the ICE script .

Spry HTML dataset and Shadowbox

Hi,
i have this test page www.for-sale.nl/v3/test.html
I have an spry HTML dataset. I want if you click on the thumnail {Thumb_1}, the mainImage {Image_1} appear in the shadowbox. but now when you click on the thumbnail, nothing happens! it's not finding the image source from the dataset..
Does anybody know whats wrong?
Thanks in advance.

This is the source code for your data
<!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>
<table width="100%" border="0" cellpadding="0" cellspacing="10" id="cases">
<tr>
    <td><strong>Text</strong></td>
    <td><strong>Titel</strong></td>
    <td><strong>Thumb 1</strong></td>
    <td><strong>Image 1</strong></td>
    <td><strong>Thumb 2</strong></td>
    <td><strong>Image 2</strong></td>
    <td><strong>Thumb 3</strong></td>
    <td><strong>Image 3</strong></td>
</tr>
<tr>
    <td>Lorem ipsum dolor sit amet, consectetur<br />
adipiscing elit. Aenean ac metus sed urna<br />
viverra lobortis. Pellentesque vel quam id nunc<br />
molestie accumsan ut quis erat. Mauris quis<br />
massa mi. Praesent id eros.</td>
    <td>Debitel Shop</td>
    <td><img src="images/cases/creatief/thumbs/thumb1.jpg" class="thumb" width="160" height="160" /></td>
    <td><img src="images/cases/creatief/mainimage1.jpg" width="480" height="480" /></td>
    <td><img src="images/cases/creatief/thumbs/thumb2.jpg" class="thumb" width="160" height="160" /></td>
    <td><img src="images/cases/creatief/mainimage2.jpg" width="480" height="480" /></td>
    <td><img src="images/cases/creatief/thumbs/thumb3.jpg" class="thumb" width="160" height="160" /></td>
    <td><img src="images/cases/creatief/mainimage3.jpg" width="480" height="480" /></td>
</tr>
</table>
</body>
</html>
What is wrong with having an extra column called image_source or similar and placing images/cases/creatief/mainimage1.jpg in that column. You can rhen use the source in the Spry region as <img src="{image_source}" width="480" height="480 />

Spry HTML dataset broken in Firefox 2.0.0.14

Downloaded spry 1.6.1 and tested local samples - works well
in IE but breaks in Firefox - no errors, but simply doesnt show
data on select of row. Tested with the following file -
file:///C:/manju/downloads/spry1.6/extract/Spry_P1_6_10-01/samples/htmldataset/InternalTab leAsSourceSample.html

No. The URL
http://labs.adobe.com/technologies/spry/samples/htmldataset/InternalTableAsSourceSample.ht ml
if tested with Firefox 2.0.0.14 doesnt work - lists the list
of adobe products, but 'onClick' of these products should update a
detail region - that doesnot happen - neither an error is thrown.
Actually I had to do this test as I was using Collapsible
panel with html dataset - they worked in IE and failed in Firefox.
After lots of troubleshooting I tried to upgrade to 1.6.1 from 1.6
. As it didnt help I had to ensure basic samples worked in both
browsers and they didnt. Its probably only an issue with
htmlDataSets - I have not tested the other samples.

IE7 error with spry html dataset

Hi
I hope I've posted this in the right place.
Has anyone else had a problem with using a HTML table as a
data source for a spry master/detail set?
I've set one up and it works OK when I test it in live view.
It also works OK in Firefox, but good old IE7 fails and a pop up
box says <Spry.Data.HTMLDataSet: 'mydatatable' is not a valid
element ID> where mydatatable is the name that I gave to the
data container. I'm using CS4, and I assume spry v 1.6, although
I'm not sure how to check that.
Anybody got any ideas?
Thanks

You may wish to check your headers:
<!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>....
I was adding some spry to a site I developed in 2006, and after much review, I discovered that the headers were different on pages I newly created vs those that were built upon a template that I added the Data Sets to.
Just copied those headers from the freely created page (with working HTML datasets) to the template... and everything works beautifully.
Hope this helps

Spry HTML dataset unseen in IE7/8

Using Mac OS 10.5.8 and DW CS4 to produce a simple HTML dataset for calendar dates. The code produced by DW is unaltered, and can be viewed at www.meonrc.org/Test.html. The data is at /Data/dscalendar.html.
Dataset renders perfectly in Firefox (Mac & PC), Safari, but will not render in IE7 or 8 (PC) or IE5 (Mac - latest version). Briefly 'flashes' spry container, but no data. Spry menu components, produced at same time, render ok in all browsers.
I can see various forum entries on XML, but not HTML - suggestions please. Thanks.

You may wish to check your headers:
<!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>....
I was adding some spry to a site I developed in 2006, and after much review, I discovered that the headers were different on pages I newly created vs those that were built upon a template that I added the Data Sets to.
Just copied those headers from the freely created page (with working HTML datasets) to the template... and everything works beautifully.
Hope this helps

Compatibilidad de Spry HTML DataSet en Internet Explorer

Hola que tal tengo un problema correspondiente con un html dataset, espero que me puedan ayudar. El asunto es el siguiente:
En un archivo asp muestro información que esta almacenada en una Base de Datos, por medio del HTML DataSet muestro esta
información en un archivo aparte ejemplo el index de mi pagina. Guardo esta información en el index y utilizo el metodo loadData()
para recargar nuevamente el DataSet para que se muestre la nueva información que ingrese, esto me lo hace de forma perfecta
en el exploradro Firefox y en el explorador de Google Chrome, por que en Internet Explorer no lo hace??
Espero que alguien me pueda ayudar gracias y Saludos.

A ok, gracias por el dato, pero al parecer lo que pasaba es que la pagina
asp guardaba los valores del DataSet en la cache es por eso que no se
actualizaban los datos.
Agregue estas lineas de código para que funcionara bien:
Response.CacheControl = "Private"
Response.Expires = 0

Spry HTML Dataset not loading in DW CS4 wizard

Does anyone have any idea as to why my HTML data set (a
table) will not load in the Create Spry Dataset wizard (DW CS4). It
is saying that there are no valid data containers. I followed the
tutorials exactly and I also added an ID column to my HTML table. I
can't seem to figure this out and I am stuck. Any info would be
greatly appreciated.

Make sure that your table has an id. Go to your html table,
choose the table and in the properties inspector, under Table,
enter a name. Once that's done the wizard will recognize it as a
data container.

HTML Dataset - No detail by default

Hello from Mauritius !
I have a page with html data set, with a master region, and a detail region of course.
When that page is opened, the first detail region is shown on the screen.
Actually, I would like to have no detail shown until a master is clicked.
Any idea ?
Thanks

A fast way would be adding height:300px; overflow:scroll; to your css..
MasterDetail .MasterContainer {
background-color:#FFFFFF;
border:1px solid gray;
color:#000000;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:x-small;
font-weight:bold;
height:300px;
overflow:scroll;
text-align:left;
width:35%;
But anyways if you want to use accordions with Spry Data. take a look at the samples: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html

Spry HTML Data Set Gives Empty Table (no data), Spry XML Data Set is Fine

I am working in Dreamweaver CS5 and in lesson 14 of the "Dreamweaver CS5 Classroom in a Book" and the lesson implements Spry HTML Datasets and XML Datasets. The XML is fine but the HTML dataset produces an empty table. This happens in live view or even when previewing the HTML file in any of the browsers Firefox, Google or IE. I should add that the lesson (as in all the lessons) has a "finished copy file" prepared by the authors to show what things will look like in the end (so it is a file NOT produced by me but included on the CD with the book), and that file also produces the problem. I have uninstalled and reinstalled Dreamweaver, the lessons CD and spent all day trying to figure out why and no clues at all yet. All my browser settings look fine as for allowing content.
ANY CLUES would be appreciated. Thanks.

Hello,
First, thank you very much for your quick response and help.
I am not sure what you mean by upload the site to a server so you can look. I am working locally in Dreamweaver on the book's exercise. So I figured you may mean CS Live. What a clumsy operation that is. In any case, they said the links below will work for ANYBODY that clicks them! What is especially baffling here is that it seems so straighforward. The file "events_finished.html" (the 1st link below) is everything but the data, produced by the author of "Adobe Dreamweaver CS5 Classroom In A Book" in lesson 14. All paths should be correct. The file referenced by "Spry.Data.HTMLDataSet", "html-data_finished.html" (the data and the 2nd link below) is in the same directory as the first file, all JavaScript files referenced exist and are in their denoted "SpryAssets" folder. As seen in the "screenShot", the HTML dataset table is empty with placeholders; the XMLDataSet is fine and all data nicely represented.
I hope this helps and thanks for all help and any clues you can provide.
events_finished.html: https://acrobat.com/#d=J2Aez*f-uXeEICwt2ctjDg
html-data_finished.html: https://acrobat.com/#d=NugqeOzL6sBtjZw81PNNAg
screenShot of viewed page in browser: https://acrobat.com/#d=nS5FBcWC-AvXXEGHiWAo6A

How to link a specific panel with spry multiple element sliding

How to everybody to the forum, I've searched into this forum but maybe this mine is a particular case...
I've a html page with 4 different spry multiple sliding panels, named "primo" "secondo" terzo" "quarto", and all worked fine :-)
When you go to this page the first you can see is "primo" (default).
But the problem/question is this: If i want to send an email link to my page and want to see the "terzo" panel. how???
I've try to search many examples but none one of them meet me.
This is an example of this page called test.html
Many thanks to all wants help me
<!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>Spry Multiple Elements Sliding Sample</title>
<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript" ></script>
<script src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js" type="text/javascript" ></script>
<style type="text/css">
.demoDiv{
height: 150px;
overflow: hidden;
.hiddenElement{
display:none;
/* Fix IE floating bug */
position: absolute;
top: 180px;
</style>
<script type="text/javascript">
var observer = {};
observer.nextEffect = false;
observer.onPostEffect = function(e){
if (this.nextEffect)
var eff = this.nextEffect;
setTimeout(function(){eff.start();}, 10);
this.nextEffect = false;
function pannelli(currentPanel)
    // The list of all the panels that need sliding
var panels = ['slide1', 'slide2', 'slide3', 'slide4'];
var opened = -1;
// Let's check if we have an effect for each of these sliding panels
if (typeof effects == 'undefined')
effects = {};
for (var i=0; i < panels.length; i++)
if (typeof effects[panels[i]] == 'undefined'){
effects[panels[i]] = new Spry.Effect.Blind(panels[i], {from: '0%', to: '100%', toggle: true});
effects[panels[i]].addObserver(observer);
if (effects[panels[i]].direction == Spry.forwards && currentPanel != panels[i])
opened = i;
//prevent too fast clicks on the buttons
if (effects[panels[i]].direction == Spry.backwards && effects[panels[i]].isRunning)
observer.nextEffect = effects[currentPanel];
return;
if (opened != -1)
observer.nextEffect = effects[currentPanel];
effects[panels[opened]].start();
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
</script>
</head>
<body onload="pannelli('slide1');">
<h3>Spry Multiple elements sliding</h3>
<a href="#" onclick="pannelli('slide1');" value="Slide 1">SLIDE 1</a>
<a href="#" onclick="pannelli('slide2');" value="Slide 2">SLIDE 2</a>
<a href="#" onclick="pannelli('slide3');" value="Slide 3">SLIDE 3</a>
<a href="#" onclick="pannelli('slide4');" value="Slide 4">SLIDE 4</a>
<br />
<div id="slide1" class="hiddenElement">
<div class="demoDiv" style="background-color: yellow;">
<h4>Primo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide2" class="hiddenElement">
<div class="demoDiv" style="background-color: pink;">
<h4>Secondo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide3" class="hiddenElement">
<div class="demoDiv" style="background-color: magenta;">
<h4>Terzo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide4" class="hiddenElement">
<div class="demoDiv" style="background-color: green;">
<h4>Quarto</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<br />
Test per collegamenti esterni<br /><br />
<a href="test.html?">vai al pannello I°</a> |
<a href="#">vai al pannello II°</a> |
<a href="#">vai al pannello III°</a> |
<a href="#">vai al pannello IV°</a>
</body>
</html>

silemma wrote:
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
</script>
</head>
<body onload="pannelli('slide1');">
Change the above to
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
var params = Spry.Utils.getLocationParamsAsObject(); //get the URL parameter
if (params.slide) { // if the slide parameter exists
    var slide = 'slide'+params.slide; // slide = slide+slide parameter
} else { // otherwise
    slide = 'slide1'
</script>
</head>
<body onload="pannelli(slide);"> 
Then when calling the page use the following notation: http://localhost/test/test.html?slide=3 where ?slide=3 is the third slide
I hope this helps.
Ben

Images not loading in Spry HTML Panel

Hallo everyone
I am using links to load html fragments in a Spry HTML Panel, just like in the example page
http://labs.adobe.com/technologies/spry/widgets/htmlpanel/SpryHTMLPanel.html
The whole structure is inside a Spry Tabbed Panel.
All works ok if the target html pages are in the same directory as the mother page.
Images are standard in the "images" folder
The problem starts when I try to organise all the html fragments in a separate directory.
Updating links in all the html files is of course done correctly, images included.
Then the problem starts.
The html fragments load but with no images.
When I open the html fragments directly by the browser all is ok.
Any ideas would be appreciated
Thanks!

Can you upload your pages to a server and give us a link?
If your images are in your site folder (no matter which directory), but they are not showing up in your fragments, it is likely that the paths are wrong. The images (it seems to me) should exist on the fragment and be linked from there.
I won't have a chance to fiddle around with this right now, but if your images are linked to the fragment locations and that does NOT work, try linking them as if they were on the page that is showing the fragments. I'm not familiar (yet) with this widget.
Beth

Spry HTML Panel Widget breaks ICE

I'm using the spry html panel widget to load a side bar
across my site. It has Ice tags as do the main pages its loaded
into. When editing a main page, it will not save saying. "the html
sent to save was not in the page". (referring to my spry sidebar).
Taking ICE out of the side bar page allows it to work.
Is there a work around to use this adobe spry widget with in
context editing? It would be a shame is the sidebar can't be
edited, or has to be done for every page it loads into not using
the spry widget.

Hello Addis,
I'm not entirely clear on your workflow, but InContext
Editing does not support editable or repeating region groups inside
Spry Dynamic Regions.
You can create editable regions on the html page that loads
into the spry html panel widget, but you cannot have editable
regions on the
dynamic widget region itself.
Essentially, you can apply InContext Editing editable regions
to the content in the external HTML page (e.g.,
panelWidget.loadContent('
widget_contents.html'). Then, when you want to edit the
content that loads into the widget on the main pages, you would
edit the
widget_contents.html page with InContext Editing. You can
also apply InContext Editing editable regions to any
static content regions on your main pages.
Please let me know if this needs clarification.
Best regards,
Corey

Spry HTML Panel and Google Indexing

I've started working with Google analytics and am now realizing that my use of the Spry HTML Panel as cool and efficient as it is, is not being index by Google. I am using the links with php pages that query a FileMaker database for it's content and need to have Google be able to open and index the pages. What changes can I make to the standard HTML Panel Code to allow this to happen. I'm getting ready to take on a large project and this will be very necessary.
Thanks in Advance
Joe

Ajax requests / all javascript are not seen by spiders / bots. Its a
common issue with Ajax applications.
There a few ways to get them indexed. Point to it with a general site
map. So it get indexed through a other way.
Place links on the page that does the ajax calls to the urls. And
replace the urls with your HTML panel content.
So Spiders will follow the normal links and users will get the content.
Other way it to completely ditch html panel and just show it on the
page it self :P
Arnout Kazemier | Adobe Spry Community Expert
Internet: http://www.3rd-eden.com
Twitter: http://www.twitter.com/3rdEden | http://www.twitter.com/AdobeSpry

Help with URL Parameters and HTML DataSet please.

Hello everybody!
Looking at the example page: "Using URL Parameters to Control Data Regions", towards the bottom it gives an example of "Set by Product Name", from an XML DataSet using the following sample code:
    //Data set for the second example. var ds2 = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "products/product");    //If the URL parameter 'product' has a value, set the XPath that includes a filter and then load the data. if (params.product){    ds2.setXPath("products/product[name = '"+params.product+"']");    ds2.loadData(); }
Can anyone please explain how to amend this to work with a HTML Dataset rather than XML?
The first example on the page (Set by RowID) works unchanged for the HTML DataSet, but I don't know what I should replace the 'setXPath' line with.
I see this has been asked before, but I'm afraid I can't find any answer that works (or, more often, that I can understand properly!)
Grateful for any suggestions.
Len

Wow! Thanks Ben.
I hadn't thought about using Stacked Containers.
I'll test this out tonight and let you know how I get on.
Cheers,
Len
A few days later and at last I've been able to test your suggestions.
I think I must be doing something wrong as the links and content don't work at all:
http://www.myosanthe-bernhard-huber.com/html/stack1.php
I know that the stacked containers do work (http://www.myosanthe-bernhard-huber.com/html/stack0.php), so I guess there are some errors in the coding somewhere.
Would you mind reviewing, please?
The important thing for me (in this case, anyway) is to get the called page's content using its 'Ref', and I'm not sure what benefit there is in using stacked containers as opposed to master-detail containers.
The master-detail method works reasonably well for me at
http://www.myosanthe-bernhard-huber.com/html/fotoalbum.php and sub-pages.
Perhaps I am betraying my lack of knowledge, but as I said in my original post, I think that I just need the HTMLDataSet equivalent to:
    //Data set for the second example.
var ds2 = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "products/product");
   //If the URL parameter 'product' has a value, set the XPath that includes a filter and then load the data.
if (params.product){
   ds2.setXPath("products/product[name = '"+params.product+"']");
   ds2.loadData();
which as you can see uses an XMLDataSet, but does exactly what I need.
(see http://labs.adobe.com/technologies/spry/samples/data_region/DataWithURLParams.html)
Thanks again for your help, Ben.
Len
Message was updated by: ec1lennie

Spry html dataset ? sliding detail panel?

Similar Messages

Maybe you are looking for