Show a loading bar while spry data set content loads
Is there a way to do this? I'm using spry to read an RSS feed from a blog, and it works fine, but sometimes can be a bit slow, so, I'd like to let the end-user know that the content is coming, it's just loading.
Thanks!
<!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>Filter XPath with URL Parameters</title>
<script src="xpath.js" type="text/javascript"></script>
<script src="SpryData.js" type="text/javascript"></script>
<script src="SpryEffects.js" type="text/javascript"></script>
<script src="SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryWidgetProgressBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("../../data/employees-01.xml", "/employees/employee");
ds.addObserver({
onPostUpdate:function(){
// when the dataset is loaded.. do stuff, in this case compelete the progress bar
progress.stop(); // stop any running effects,
progress.complete(); // complete the progress bar
-->
</script>
<style type="text/css">
.progress {
position:fixed;
background:#FFF;
right:10px;
bottom:10px;
border:1px solid #ccc;
padding:2px;
width:550px;
.progress .bar {
display:block;
background-color:#093;
height:30px;
width:100%;
</style>
</head>
<body>
<div spry:region="ds1">
<table>
<tr>
<th>Lastname</th>
<th>Firstname</th>
<th>Phone</th>
<th>Username</th>
<th>@id</th>
</tr>
<tr spry:repeat="ds1">
<td>{lastname}</td>
<td>{firstname}</td>
<td>{phone}</td>
<td>{username}</td>
<td>{@id}</td>
</tr>
</table>
</div>
<div class="progress">
<b><span id="progress_counter">0</span>% loaded</b>
<div class="bar"><span></span></div>
</div>
<script type="text/javascript">
var progres = new Spry.Widget.ProgressBar( "#meter" );
// sets increase the progress bar 90% over a duration of 20 seconds
progres.add("90%", 20000 );
</script>
</body>
</html>
Above you see a example implementation. Using datasets.
The scripts requires:
SpryEffects.js
SpryDOMUtils.js
SpryData.js
To be loaded in advance. For a complete API and observer coverage see http://go.spry-it.com/progressbar. It has the same API and methods and functionality except!! the hide and show fades have been removed in the Spry 1.6.1 version. It just hides the elements using display:none and display:block;
As for browser compatibility.. Tested on IE 6 / 7 /8 and 9 platform preview, Safari 3 - 4, Firefox 3,0 - 3.6, Opera 9.6 - Opera 10.5.
The file: http://dl.dropbox.com/u/1381492/Spry/SpryWidgetProgressBar.js
If you don't have SpryDOMUtils.js, SpryEffects.js you can get them from the complete Spry package at: http://labs.adobe.com/technologies/spry/
Hopes this helps !
Similar Messages
-
Making Spry data set content clickable
I am just getting started with CS4 & Spry data sets. I have it working pretty well. Now i want to know if I can wrap the results of a column in html?
One column of my test page lists a members web address like: "www.abc.com"
Can I get Spry to wrap everything in the column with "http://" so the URL is clickable? Same thing for an email address. Wrap contents in "mailto:"
ThanksSure. You would have something like:
<a href="http://{sprydataref}" >{sprydataref}</a> -
Spry data set blinks on loading
Hello
I am testing spry data sets with large tables of content.
Is there any way to stop the blinking of the page when loading.
I would like to show a loading bar or something similar while waiting for the data to be loaded.
Here is a link from one of the pages I am working with.
http://www.riegler-projekt.de/page/wartungsgeraete/3-2-wege-fut.html
Would appreciate any help
Anthony BuryThank you, that did the trick.
One problem I have is with Firefox 3.5, on a Mac the table won't show, with Windows I just see the first table without the CSS background colours.
All other browsers Mac or Windows (Safari IE Opera) all show the data correctly. I tried searching the forum for similar problems, but most seemed related to IE and not FF.
Do you have any idea what this could be?
Thanks for any support
Anthony Bury -
Spry Data Set - Possible to limit number of records show
Hi,
I am totally new to Spry in Dreamweaver. I tried searching the forums for an answer but I could not find anything on how to limit the number of records shown.
For example - I have 100 rows of information in my table. When I do the Spry Data Set and use the Master/Detail page I only want 20 records to show. Otherwise the page looks very long and odd. Is it possible to just show the first 20 records and the ability to scroll or link the next 20 and so on?
If you have a link to a tutorial or more information that would be greatly appreciated.
Thank you,
Kathyhave a look here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
-
Hi everybody,
I included a Spry Data Set in my already existing HTML-File and got the problem that the Browser doesn't display it.Is there something I forgot to do after including the data set?
I hope somebody can help me out here.
Here's the link: http://media-powerplant.de/media-powerplant-webdesign-beispiele.html
And here's the Code of the HTML site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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" />
<meta name="description" content="Modernes Webdesign für Ihre erfogreiche Internetpräsenz" />
<meta name="keywords" content="Webdesign, Webspace ,Webhosting, Web-Design , Web, Domainregistrierung, Internetdesign, Internet, Provider, HTML, Web-Space, Design, Webdesign München, Grafikdesign, kreative, innovative, Homepage, Suchmaschinenoptimierung, Matthias Damoser, Michael Peh, Michi Peh, media powerplant, media-powerplant, München" />
<title>media powerplant *** Webdesign / Webspace & Hosting / Suchmaschinenoptimierung ***</title>
<meta name="author" content="[email protected]">
<meta name="copyright" content="Webdesign: Matthias Damoser / media powerplant">
<meta name="Content-Language" content="de">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit-after" content="7 days">
<link rel="SHORTCUT ICON" href="http://www.media-powerplant.de/favicon.ico">
<link href="mppLayout.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var dskategorien = new Spry.Data.XMLDataSet("webkategorien.xml", "produkte/kategorie");
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
var dsWebBeispiele = new Spry.Data.XMLDataSet("webexamples.xml", "websites/beispiel");
dsWebBeispiele.setColumnType("linkScreenshot", "html");
dsWebBeispiele.setColumnType("linkWebsite", "html");
dsWebBeispiele.setColumnType("screenshot", "html");
dsWebBeispiele.setColumnType("validHTML", "html");
dsWebBeispiele.setColumnType("validCSS", "html");
//-->
</script>
</head>
<body>
<div id="hauptfenster">
<div id="content">
<div id="mitte">
<div id="header">
<h1>media powerplant - Ihr Partner für Webdesign, Musikproduktion und Videoproduktion</h1>
</div>
<div id="mainnavi">
<div class="menuHome" onClick="MM_goToURL('parent','media-powerplant-home.html');return document.MM_returnValue" document.MM_returnValue></div>
<div class="menuMusik" onclick=MM_goToURL('parent','media-powerplant-musikproduktion.html');return document.MM_returnValue></div>
<div class="menuVideo" onclick="MM_goToURL('parent','media-powerplant-videoproduktion.html');return document.MM_returnValue"></div>
<div class="menuWeb" onclick=MM_goToURL('parent','media-powerplant-webdesign.html') document.MM_returnValue></div>
<div class="menuReferenzen" onclick="MM_goToURL('parent','media-powerplant-referenzen.html');return document.MM_returnValue"></div>
<div class="menuAbout" onclick=MM_goToURL('parent','media-powerplant-about.html') document.MM_returnValue></div>
<div class="menuKontakt" onclick="MM_goToURL('parent','media-powerplant-kontakt.html');return document.MM_returnValue"></div>
<div class="menuImpressum" onclick="MM_goToURL('parent','media-powerplant-impressum.html');return document.MM_returnValue"></div>
</div>
<div id="inhalt">
<h2><span class="mpp">media powerplant</span> <span class="bereich">Webdesign</span></h2>
<h2 class="unterüberschrift">Modernes Webdesign – standardkonform und flexibel.</h2>
<div id="haupthintergrundkalkulator">
<div id="fließtext">
<p>Modernes Webdesign umfasst nicht nur die Gestaltung, eine gute Struktur und eine benutzerfreundliche Navigation durch die Webseiten, sondern auch die ideale Umsetzung der Suchmaschinen-Optimierung und des barrierefreien Internets. Wir sorgen mit Seiten, die korrekt in XML oder HTML umgesetzt sind, für eine schicke Darstellung der Inhalte und fördern in gleicher Weise das gute Ranking bei Google und Co.</p>
</div>
<div id="webmain">
<div id="untermenu">
<div class="untermenuWeb" onclick=MM_goToURL('parent','media-powerplant-webdesign.html');return document.MM_returnValue document.MM_returnValue></div>
<div class="untermenuBeispiele" onclick=MM_goToURL('parent','media-powerplant-webdesign-beispiele.html');return document.MM_returnValue document.MM_returnValue></div>
<div class="untermenuKosten" onclick=MM_goToURL('parent','media-powerplant-webdesign-preiskalkulator.html');return document.MM_returnValue document.MM_returnValue></div>
</div>
<div id="Detailbereich">
<div id="beispieltext">
<h2>So könnte Ihre künftige Website aussehen</h2>
<p class="beschreibungtext">{dsWebBeispiele::nr}<br />{dsWebBeispiele::beschreibung}<br />
{dsWebBeispiele::linkScreenshot} {dsWebBeispiele::linkWebsite}</p>
<p class="hpimage">{dsWebBeispiele::screenshot}</p>
<p class="valide">{dsWebBeispiele::validText}</p>
<p class="w3c">{dsWebBeispiele::validHTML}</p>
<p class="w3c">{dsWebBeispiele::validCSS}</p>
</div>
<div class="copyrighthosting">Copyright © 2009 media powerplant | Alle Rechte vorbehalten | <a href="media-powerplant-impressum.html">Impressum</a> | <a href="media-powerplant-kontakt.html">Kontakt</a> | </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Hi,
You do not have a Spry region enveloping your data details.
Try the following code
<div spry:region="dsWebBeispiele">
<div spry:repeat="dsWebBeispiele" spry:setrow="dsWebBeispiele" spry:hover="hover" spry:select="selected">
<p class="beschreibungtext">{nr}<br />{beschreibung}<br />
{linkScreenshot} {linkWebsite}</p>
<p class="hpimage">{screenshot}</p>
</div>
</div>
<div spry:detailregion="dsWebBeispiele">
<p class="valide">{validText}</p>
<p class="w3c">{validHTML}</p>
<p class="w3c">{validCSS}</p>
</div>
I hope this helps.
Ben -
How to do something - Spry Data Set?
Hopefully David Powers is online this afternoon.
I would like to design a web page so that one record, and one record only, can be pulled from a XML file. Everything is in place but I am totally confused on how to do what I want to do using Spry.
The page in question can be viewed here. By clicking on the "Image Info" button in the navigation bar it opens a sub-window in the browser window displaying another HTML file. You can view the other HTML file here. This sub-file uses a Spry Tabbed Panel for ease of display for the end-user. Each tab is populated with data strings from a XML file. This XML file contains metadata for a collection of TIF images.
At present I am copying and pasting the data strings from the XML file into the second (overflow) file. As the records grow this will become extremely cumbersome and fraught with possible miscues. I would like the second file to call for a particular record from the XML file and display it. If the file 001-ovrflw.html is being opened then populate the placeholders with the appropriate record's information (001.tif) from the XML file.
Can someone show me just how to accomplish this using a Spry data set? And I am totally confused with Spry so please, be gentle. <grin> All I need is one sample using my set of data and then I am off and running. I have to do this for, at present, some 4,000 images. Each XML file will only contain about 800 records but there will be a XML file for each year.If a database is what I need then so be it. My hosting service allows me 25 databases and I have XAMPP and MySql already installed on my computer.
So then just how in tarnation do I go about setting up a database and hosting it to my service for use? And then how do I set up my files to access this database and extract that one record each file needs? I'm also assuming that I will have to somehow convert my XML file to a database.
The real shame is that the XML file has a header portion that is the same for each and every record. This information would have to be copied into each record in the database really ballooning the size — size equates to slower database access. And then it would take several days to convert the XML file by hand.
As I hope you can see; I am a total neophyte when it comes to databases. At least I have read about Spry data sets and was hoping that would serve my needs. And yeah, I don't want to purchase another book. I have enough of those laying around without the time to read them all. Of course such a book would dictate that I read the whole thing to learn how to change a light bulb. Kind of like a degree in mechanical engineering to flush a toilet. -
How to link within a spry data set?
Hi everybody,
I am working with DW CS4 and want to know how to insert a link to another html site within the Spry data set. All I am archieving at the moment is to write the hyperlink-addy as plain text on my website.
I have this kind of structure in my data set:
<example>
<screenshot>Pics/examples/SRB.jpg</screenshot>
<name>Sounddesign Radio SRB</name>
<sort>Music production</sort>
<link> ??? </link>
</example>
Thanks a lot for your help!
Cheers,
El TeasoHi,
thanks for taking the time to haul through the Code I produced!
Although the website isn't launched yet, you can have a look at the site on this online "test-site": http://www.media-powerplant.de/media-powerplant-referenzen.html (on the left side you'll find the Spry-master region and on the left-hand side there is the Detail-region which should include the hyperlink)
Here is the HTML-Code for the site: (the green text is the part with the embedded Spry data set that works and the red line is the part which is not working)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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" />
<meta name="description" content="Ihr Partner für Musik- und Videoproduktionen, Webdesign, Internet, Flash, Podcasts und Grafikdesign" />
<meta name="keywords" content="gemafreie musik,lizenzfrei,lizenzfreie musik, royalty free, filmmusik,hintergrundmusik, werbespot,trailer, jingles, loops, Werbemusik, Mastering, Scoremusik, Filmproduktion,Videoproduktion,Computeranimation,Postproduktion,Filmagentur,3D Visualisierung,3D Animation,Filme,Video,Film Produktion,Grafik Design,Imagefilm,Werbefilm,Werbefilme,Werbefilmproduktion, Webdesign, Webspace ,Webhosting, Web-Design , Web, Domainregistrierung, Internetdesign, Internet, Provider, HTML, Web-Space, Design, Webdesign München, Grafikdesign, kreative, innovative, Homepage, Suchmaschinenoptimierung, Michael Peh, Michi Peh, Matthias Damoser, media powerplant, media-powerplant, München"/>
<title>media powerplant *** Musikproduktion / Videoproduktion / Webdesign ***</title>
<meta name="author" content="[email protected]">
<meta name="copyright" content="Webdesign: Matthias Damoser / media powerplant">
<meta name="Content-Language" content="de">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit-after" content="7 days">
<link rel="SHORTCUT ICON" href="http://www.media-powerplant.de/favicon.ico">
<link href="mppLayout.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var dsreferenzen = new Spry.Data.XMLDataSet("referenzen.xml", "referenz/beispiel");
dsreferenzen.setColumnType("name", "html");
dsreferenzen.setColumnType("a", "html");
dsreferenzen.setColumnType("a/@href", "html");
dsreferenzen.setColumnType("a/@target", "html");
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
var dslinks = new Spry.Data.XMLDataSet("referenzenlinks.xml", "referenz/link");
dslinks.setColumnType("a", "html");
//-->
</script>
<link href="SpryAssets/SpryMasterDetail.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="hauptfenster">
<div id="content">
<div id="mitte">
<div id="header">
<h1>media powerplant</h1>
</div>
<div id="mainnavi">
<div class="menuHome" onclick=MM_goToURL('parent','media-powerplant-home.html');return document.MM_returnValue document.MM_returnValue></div>
<div class="menuMusik" onclick=MM_goToURL('parent','media-powerplant-musikproduktion.html');return document.MM_returnValue></div>
<div class="menuVideo" onclick="MM_goToURL('parent','media-powerplant-videoproduktion.html');return document.MM_returnValue"></div>
<div class="menuWeb" onclick=MM_goToURL('parent','media-powerplant-webdesign.html') document.MM_returnValue></div>
<div class="menuReferenzen" onclick="MM_goToURL('parent','media-powerplant-referenzen.html');return document.MM_returnValue"></div>
<div class="menuAbout" onclick=MM_goToURL('parent','media-powerplant-about.html') document.MM_returnValue></div>
<div class="menuKontakt" onclick="MM_goToURL('parent','media-powerplant-kontakt.html');return document.MM_returnValue"></div>
<div class="menuImpressum" onclick="MM_goToURL('parent','media-powerplant-impressum.html');return document.MM_returnValue"></div>
</div>
<div id="inhalt">
<h2><span class="mpp">media powerplant</span> <span class="bereich">Referenzen</span></h2>
<h2 class="unterüberschrift">Hier finden Sie einen Überblick und einige interessante Details über unsere letzten Projekte</h2>
<p> </p>
<div id="musikproduktion">
<div id="musikprojekte">
<div id="projektescroll">
<div spry:region="dsreferenzen">
<table id="referenzTable">
<tr spry:repeat="dsreferenzen" spry:hover="rowHoverRef" spry:select="rowSelectRef" spry:setrow="dsreferenzen">
<td><img src="{screenshot}" alt="{name}" width="140" height="93" class="screenshot"></td>
<td><span class="kategorie">{kategorie}</span><br>
<span class="name">{name}</span></td>
</tr>
</table>
</div>
</div>
</div>
<div spry:detailregion="dsreferenzen">
<div id="musikmainRef">
<h2> </h2>
<p> </p>
<div id="projektbeschreibung">
<p class="beschreibung">{beschreibung}</p>
<p class="aufgabenfeld">{dsreferenzen::aufgabenfeld}</p>
<p class="aufgabenbilder">
<img src="{bild1}" width="90" height="77" class="bild"><img src="{bild2}" width="90" height="77" class="bild"><img src="{bild3}" width="90" height="77" class="bild"><img src="{bild4}" width="90" height="77" class="bild"> </p>
<p class="reflink">{dsreferenzen::a/@href}</p>
</div>
</div>
</div>
</div>
<div class="copyrightref">Copyright © 2009 media powerplant | Alle Rechte vorbehalten | <a href="media-powerplant-impressum.html">Impressum</a> | <a href="media-powerplant-kontakt.html">Kontakt</a> | </div>
</div>
</div>
</div>
</div>
</body>
</html>
Okay, and here is the XML code: (the red line shows the the code, that should be shown as a link, but isn't working)
<?xml version="1.0" encoding="UTF-8"?>
<referenz>
<beispiel>
<screenshot>Bilder/Projektbilder/SRB.jpg</screenshot>
<name>Sounddesign Radio SRB</name>
<kategorie>Musikproduktion</kategorie>
<beschreibung>Media powerplant produzierte das gesamte Sounddesign für den regionalen Radiosender SRB. Dabei wurden hauptsächlich Musikbetten und Radiojingles produziert.</beschreibung>
<aufgabenfeld>Aufgabenbereich: * Sounddesign * Musikkomposition * Musikproduktion</aufgabenfeld>
<bild1>Bilder/Projektbilder/waves.jpg</bild1>
<bild2>Bilder/Projektbilder/peakmeter.jpg</bild2>
<bild3>Bilder/Projektbilder/mixpult.jpg</bild3>
<bild4>Bilder/Projektbilder/mics.jpg</bild4>
<a target="_blank" href="http://www.google.de">www.weblink.de</a>
</beispiel>
<beispiel>
<screenshot>Bilder/Projektbilder/Logo_earthTV.jpg</screenshot>
<name>EarthTV Musik</name>
<kategorie>Musikproduktion</kategorie>
<beschreibung>Komposition und Produktion des Stückes "Steil" im Auftrag von EarthTV für deren Sendeformat bei Sevenload.</beschreibung>
<aufgabenfeld>Aufgabenbereich:* Musikkompostion * Musikproduktion</aufgabenfeld>
<bild1>Bilder/Projektbilder/peakmeter.jpg</bild1>
<bild2>Bilder/Projektbilder/headphones.jpg</bild2>
<bild3>Bilder/Projektbilder/keyboard.jpg</bild3>
<bild4>Bilder/Projektbilder/mic.jpg</bild4>
<a target="_blank" href="http://www.gmx.de">www.weblink2.de</a>
</beispiel>
</referenz>
(this shows only the first two entries)
Then, I also attached some screenshots of the Spry-Wizard. You can see, that it splits the line with the link in three seperate items. -
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 -
I'm having trouble getting the Spry data set to display in my
local testing environment. Can someone glance at my code and give
me some tips? I have the XML file in the same folder as the HTML
page.
<!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=ISO-8859-1" />
<title>Croxton Gray Commercial Properties, Greenville,
SC - Search Company Listings</title>
<link href="../css/master.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="../includes/xpath.js"></script>
<script type="text/javascript"
src="../includes/SpryData.js"></script>
<script type="text/javascript">
var dsListings = Spry.Data.XMLDataSet("listings.xml",
"listings/property");
</script>
</head>
<body id="listings">
<div id="wrapper">
<div class="padding10">
<?php include('../php/header.php'); ?>
<p class="date"><?php
echo date('l, F jS, Y');
?></p>
<div id="contentWrapper">
<div id="contentInner">
<div id="contentColumn" spry:region="dsListings">
<table width="100%" border="0" cellspacing="0">
<tr>
<th>Property</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr spry:repeat="dsListings"
onclick="ds.Listings.setCurrentRow('{ds_RowID}')">
<td>{name}</td>
<td>{price}</td>
<td>{availability}</td>
</tr>
</table>
</div><!-- Closes content column -->
<div id="rightColumn" spry:detailregion="dsListings">
<h2>{name}</h2>
<p>{description}</p>
<p align="center"><img
src="assets/{img}"/></p>
<p><strong>Call</strong>: {contact}
</p>
</div><!-- Closes right column -->
</div><!-- Closes content inner -->
</div><!-- Closes content wrapper -->
Here's the sample XML file I'm testing with. Again, it's
located in the same folder as the HTML page.
<?xml version="1.0" encoding="ISO-8859-1"?>
<listings>
<property>
<name>100 South Main</name>
<price>$100,000</price>
<availability>for sale</availability>
<image>asset_images/sunset.jpg</image>
<description>This is a short description of the
property.</description>
</property>
<property>
<name>100 South Main</name>
<price>$100,000</price>
<availability>for sale</availability>
<image>asset_images/sunset.jpg</image>
<description>This is a short description of the
property.</description>
</property>
<property>
<name>100 South Main</name>
<price>$100,000</price>
<availability>for sale</availability>
<image>asset_images/sunset.jpg</image>
<description>This is a short description of the
property.</description>
</property>
<property>
<name>100 South Main</name>
<price>$100,000</price>
<availability>for sale</availability>
<image>asset_images/sunset.jpg</image>
<description>This is a short description of the
property.</description>
</property>
</listings>
Thanks to whomever takes the time. I really appreciate the
extra set of eyes and any tips!With those 2 changes I mentioned above ... and the fact that
I had to fix the markup because there were missing end tags, which
I was assuming was just a copy paste problem ... it all worked fine
for me. Of course I made sure the includes I used were in the
correct place.
After re-reading your original message above, you never
really mentioned what you are seeing in the browser. Are there any
errors being thrown? Are you seeing data references instead of
values? If you are in need of help, we could diagnose things much
faster if you had an URL we could take a peek at.
Also what platform and browser are you using?
Did you try loading the XML file directly in to your browser
like ZeusChicago suggested? That would instantly tell you if your
server was serving your XML up with the correct content-type or
not.
--== Kin ==-- -
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"><!-- InstanceBegin template="../../../../composition/Templates/profile_spone.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Glossary</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<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>
<!-- InstanceEndEditable -->
<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"><!-- InstanceBeginEditable name="Content" -->
<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><!-- InstanceEndEditable -->
</div>
</body>
<!-- InstanceEnd --></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. -
Hi,
I have page that uses a spry data set called 'dsSupport',
however i do not want to use a table to select the item in the list
i am instead using a spry select box:
<div spry:region="dsSupport">
<h1>Step1: Select your product:</h1>
<form id="form1" name="form1" method="post" action="">
<p><strong>Choose from a
list:</strong><br />
<span id="spryselect1">
<label>
<select name="prodlist" id="prodlist">
<option spry:repeat="dsSupport" spry:setrow="dsSupport"
value="{model}">{name}</option>
</select>
</label>
<span class="selectRequiredMsg">Please select an
item.</span>
</span>
</p>
</form>
</div>
This is connected to a spry detail region so i can pull up
more details from the data set, but when i change the option in the
select box nothing happens. Is this possible? If so can anyone
help!
If i drop a spry table in to the div tag as well i can select
the items in there and the detail region does change so i know its
linked ok and all the table items are showing in the select box, i
just cannot get it to change when i select something different in
the select box!fixed it using:
<select spry:repeatchildren="dsSupport"
spry:choose="choose" name="prodlist"
onChange="dsSupport.setCurrentRow(this.selectedIndex);">
<option spry:when="{ds_RowNumber} ==
{ds_CurrentRowNumber}" selected="selected">{name}</option>
<option spry:default="default">{name}</option>
</select> -
How to i add an image path with spry data set
hi
how to i add an image path with spry data set. I made a xml file and then created a data set in html but image won't load
this is my XML
<?xml version="1.0" encoding="UTF-8"?>
<banner width = "185" height = "400">
<item>
<image scr = "nui-panforte-recipe_01.jpg" ></image>
<description>CHOC-COCONUT PANFORTE</description>
<text1>Try this delicious GLUTEN FREE Christmas treat</text1>
<text2>CHOC-COCONUT PANFORTE</text2>
</item>
</banner>
this is my 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/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("recipe_banner.xml", "banner/item");
//-->
</script>
</head>
<body>
<div spry:region="ds1">
<table>
<tr spry:repeat="ds1">
<td>{image}</td>
<td>{description}</td>
<td>{text1}</td>
<td>{text2}</td>
<td>{text3}</td>
<td>{text4}</td>
<td>{link}</td>
<td>{url}</td>
<td>{target}</td>
</tr>
</table>
</div>
</body>
</html>It would be helpfull if you actually created an <img> tag to start with
<img src="{image/@src}" />
would work. -
Spry data set and html table with multiple images
I use "Spry Data Set" in my Dreamweaver CS4 site. I need to make one html file (a product page) and all the product data comes from a separate html table.
So, I have a html table that contains the product data and the images. Each row is one product.
Column 1 contains a product name
Column 2 contains product information
Column 3 contains products thumbnail image 1
Column 4 contains products thumbnail image 2
Column 5 contains products large image 1
Column 6 contains products large image 2
This a simple example of the idea. In reality, there is lot more content.
So the actual question is that:
How can I show in the product page all the thumbnail images, but only one large picture at a time?
And when the thumbnail is clicked the large picture changes accordingly.It depend entirely on what you want.
One way would be to show a shadow box as per http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=shadowbox&search_exchange=&num =25&startnum=1&event=search&sort=0&interim_dummy_tmpfield=&Submit= or http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=lightbox&search_exchange=&sear ch_license=&search_rating=&search_pubdate=&Submit=Search&num=10&startnum=1&event=search&so rt=0&dummy_tmpfield=
Another way is to have a master/detail area where the large image appears after clicking in the master area like this http://labs.adobe.com/technologies/spry/demos/products/index.html
You could also use tooltips as in http://labs.adobe.com/technologies/spry/samples/data_region/TooltipwithData.html.
There are many more ways, but you need to make the desicion based on the layout of your page.
Gramps -
How do you set up Paged View with Spry Data Sets
Hope someone can help. I have constructed a Spry data set using a html table and want to use the paged view javascript to limit the amount of rows displayed on one page at a time to 10 then forcing a new page. Have found the java script file in the spry 1.6 download and attached it to the spry assets folder and have followed the instructions found at the Adobe development center http://labs.adobe.com/technologies/spry/articles/pager/index.html with no luck. Have attached files to show what I have done. If someone could look at this and point out my error or suggest a better way I would be grateful. I am not a code warrior so simple instructions would be so helpful. Many thanks in advance.
Here is the code
<!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 src="SpryAssets/SpryPagedView .js"></script>
<link href="SpryAssets/SpryMasterDetail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.HTMLDataSet("table.html", "ds1", {sortOnLoad: "Name", sortOrderOnLoad: "ascending"});
ds1.setColumnType("Phone", "number");
var pv1 = new Spry.Data.PagedView( ds1 ,{pageSize: 10});
//-->
</script>
</head>
<body>
<input type="button" value="First" onclick="pv1.firstPage();" />
<input type="button" value="Prev" onclick="pv1.previousPage();" />
<input type="button" value="Next" onclick="pv1.nextPage();" />
<input type="button" value="Last" onclick="pv1.lastPage();" /
<div class="MasterDetail">
<div spry:region="ds1" class="MasterContainer">
<div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Name}</div>
</div>
<div spry:detailregion="ds1" class="DetailContainer">
<div class="DetailColumn">{Name}</div>
<div class="DetailColumn">{Product}</div>
<div class="DetailColumn">{Contact}</div>
<div class="DetailColumn">{Phone}</div>
</div>
<br style="clear:both" />
</div>
<input type="button" value="First" onclick="pv1.firstPage();" />
<input type="button" value="Prev" onclick="pv1.previousPage();" />
<input type="button" value="Next" onclick="pv1.nextPage();" />
<input type="button" value="Last" onclick="pv1.lastPage();" /
</body>
</html>Your region needs to refer to the pageview, not the dataset. Your paged view var is already looking at/pulling in the ds.
I would change the following code:
<div spry:detailregion="ds1" class="DetailContainer">
<div class="DetailColumn">{Name}</div>
<div class="DetailColumn">{Product}</div>
<div class="DetailColumn">{Contact}</div>
<div class="DetailColumn">{Phone}</div>
</div>
to read the following:
<div spry:region="pv1">
<table>
<tr spry:repeat="pv1">
<td>{Name}</td>
<td>{Product}</td>
<td>{Contact}</td>
<td>{Phone}</td>
</tr>
</table>
Regards,
Michael -
How to use multiple Spry Data Sets in one page
I'm using two spry data sets in one page. When I add the first spry data set to my page everything runs OK, When I add the second spry data set to the page the first data set stops working. Does anyone know what the problem is?
This is how I have my data sets listed.
var ds1 = new Spry.Data.HTMLDataSet("/accounts/tower/list.php", "list");
var ds2 = new Spry.Data.HTMLDataSet("/accounts/tower/numvisits.php", "chart");
Thanks, let me know if you need more information.Good News!
There is nothing wrong with what you have shown.
Bad news!
The problem could be in that part that you have not shown.
Gramps
Maybe you are looking for
-
HI experts: in my scenario, i call a RFC and the RFC have a response ,the response payload have 10M, and the my java crushed with the error:out of memory,is there any way to expand the pi java memory? thanks ,best regards
-
Images not exporting properly.
Im having trouble exporting images with High ISO (3200+). Colors aren't coming out the same as the edit version in Lightroom. Images are coming out brighter after export. Here's an example. Image was shot in ISO 6400. Other images shot at higher ISO
-
Hi, i need to validate all the source values are transferred properly from source db to target db .but i confused which is the right command to use between except & exists. if 100 records in source then i need to validate all the 100 records should b
-
Run time error about RWCString
Dear all: I meet a problem when I use RWCString I write an function as follow: int process_priority(const RWCString & priorityline) RWCString priority(priorityline[15]); int i=atoi(priority); return i; }I call this function in a loop,
-
Hi, Since I upgraded my N80 to the latest verison of the firmware my O2 balance alerts don't work! Any Ideas??? Many Thanks