Gallery and spry:state

How do I make the spry:state="loading" work with your image
gallery? I can get it to work just fine when its loading dataset
but when you click a thumbnail it doesnt work the same. would the
spry:state need to be added to the gallery.js since that has the
function that handles the changing of the image?

Hi,
The spry:state="loading" attribute can be used only inside a
spry:region or spry:detailregion - it's content is diplayed while
the
markup gets updated, but this doesn't include the time all
the resources inside that markup are downloaded (for example, if
there are images inside that region, when the spry:region gets
updated, the "loading" content is displayed only for the time the
markup containing <img src=".."> gets inside the page.
Loading is not displayed while the image is actually downloaded by
the browser).
For the gallery demo, the markup for the big image is not
inside a spry:region because the url for the image is set from
custom functions inside gallery.js that uses data from the existing
datasets. It's done this way because effects are added when the
image is displayed.
regards,
Dragos

Similar Messages

Spry:State and PagedView

Dear Member,
hope that somebody can help me this time..
I am using spry, and a lot of trick to make it work.
The spry:state="loading" options don't wanna work for me
it's only work if i don't use the PagedView...
Here the simple code
I have a simple XMLdataset:
var dsmio = new Spry.Data.XMLDataSet("Xml/filexxx.asp", "Clienti/Cliente", {sortOnLoad: "RagioneSociale", sortOrderOnLoad: "ascending", useCache: false});
and a pagination on it:
var paginazione = new Spry.Data.PagedView( dsmio ,{ pageSize: 50 });
finally the code to show my data:
<div spry:region="paginazione">
<div spry:state="loading">Loading Data - Please stand by...</div>
<div spry:state="error">OPS, something went wrong!</div>
<div spry:state="ready">
<table width="100%">
    <tr>
      <th width="25%" height="20" align="left" bgcolor="#CCCCCC" spry:sort="RagioneSociale">RagioneSociale</th>
      <th width="25%" height="20" align="left" bgcolor="#CCCCCC" spry:sort="Email">Email</th>
      <th width="25%" height="20" align="left" bgcolor="#CCCCCC" spry:sort="Telefono">Telefono</th>
      <th width="25%" height="20" align="left" bgcolor="#CCCCCC" spry:sort="PersonaRiferimento">PersonaRiferimento</th>
    </tr>
    <tr spry:repeat="paginazione" class="{ds_EvenOddRow}">
     <td width="25%" height="20">{RagioneSociale}</td>
      <td width="25%" height="20">{Email}</td>
      <td width="25%" height="20">{Telefono}</td>
      <td width="25%" height="20">{PersonaRiferimento}</td>
    </tr>
</table>
</div>
Hope some Guru can help me

Hi guys!
This is easy to solve:
You have to work in two different regions!
<div spry:region="dsmio">
--- Put the loader here...
</div>
<div spry:region="paginazione">
content
</div>
You can hide the "layout" of the content by :
<div id="content" spry:if="'{ds_PageTotalItemCount}' != ' ' ">
content...
</div>
ds_PageTotalItemCount is empty during loading.....
Have fun & keep coding

Spry:state and dynamic accordion

When I use a dynamic accordion (i.e. populated by a dataSet),
the accordion functionality disappears. Here is my code. Am I doing
something wrong, or is this just a bug?
Thanks
Andy
<div spry:region="dsOrders">
<div spry:state="loading">Data is
loading...</div>
<div spry:state="error">Error loading
data...</div>
<div spry:state="ready">
<div id="orders" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsOrders">
<div class="AccordionPanelTab"><h3
spry:content="{ORDERNUM}"></h3></div>
<div class="AccordionPanelContent"><span
spry:content="{ORDERDATE}"></span></div>
</div>
</div>
</div>
</div>

This might also be helpful to some. Not only do we have
states in SPRY... but events! Here is how I did it on a site that
has a dataset called dsOpportunities. The following HTML/Javascript
was added to the head tags of the HTML. Then the on <body
onload="afterReady()" > was used to make sure it was run.
Remember that your section you are hiding needs to have a class
with the same senario. (Or if it is unique you could do something
simular with ID rather than class.
<script>
function afterReady() {
$('pageContent').style.visibility = 'hidden';
var iSPRY = new Object;
iSPRY.onPostLoad = function(dataSet,data) {
$('pageContent').style.visibility = 'visible';
dsOpportunities.addObserver(iSPRY);
</script>
<style>
.pageContent {
visibility: hidden;
</style>

Air and spry (adding observer and addEventListener to spry regions links to open for a new window)

I'm trying to add a region.addobserver and addEventListener to spry regions so the links; that come for a external feed, opens in a new(default browser) window when clicked. The on* events in regions do not work in AIR so, is there a way to do this?
I have read a lot of the documentation on spry regions, addObserver and the addEventlistener but the samples don't deal with anything about external xml feeds with links in a spry region for a AIR app.
The closiest i saw was the gallery http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html, but it doesn't deal with:
links,
in a external RSS feed,
in the spry region,
to a new default browser.
Has anybody tried this before? Can it be done?
Ex:
          <div spry:region="rssDataNews" class="SpryHiddenRegion">
          <div spry:state="loading" id="notification2">Loading feeds, please wait ...<img src="assets/spinner.gif"></div>
          <div spry:state="error">Failed to load data! Please try again later</div>
            <table width="100%" spry:state="ready">
              <tr spry:repeat="rssDataNews" class="{ds_EvenOddRow}" spry:select="mySelectClass">
                <td class="cellPad">
                <span style="font-weight:bold">{title}</span><br /><br />
                {description}<br />
                 <a href="{link}" target="_blank">[Read full article]</a><br /><br />
                </td>
              </tr>
            </table>
      <div>
The <a href > only opens the url in the native AIR window. I need it to open in a web browser.
Message was edited by: dee12345654321

About on* events
They do work, but not as attribute on your HTML elements, you will need to use eventlisteners to attach them on the relevant nodes.
How: http://labs.adobe.com/technologies/spry/samples/dom_utils/add_event_listener.html
About links
Currently in Adobe AIR, its not (easily) possible to open or execute other programs on the users PC. I have seen die hard hacker user Java to get around this limitation. But i suggest you check out the Adobe AIR forum to confirm that you cant open links in the users browser.
But, Adobe AIR is basically a browser

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

UI Datepicker and Spry textfield Validation

Hi, I am having a problem with using the UI Date picker and Spry textfield Validation together. I have created a sample form: 2 input boxe, the test box has the datepicker and spry validation and test2 has the date picker only,one submit button and some php code that echos the boxes values on submit.
My date picker is date formated as 'yy-mm-dd' for four digit year. My spry validation is formated 'yyyy-mm-dd' with validate on submit.
Now when I click on the test input box the datepicker comes up normally and i select a date. I then select the date on test2. Once I click the submit button the test field with spry validation come back saying a value is required and nothing else happens.
I was playing around and trying other things to get it to work and I noticed that when I select the test inputbox and the calander pops up if I enter some numbers into the text box then select a date from the datepicker then enter a date in the test2 inputbox and hit submit it works.
So it appears to me that the validation is not reading anything in the test field when I just select a date. Why is that? When I select a date it shows a date in the inputbox. It makes it hard to use the datepicker on a form.
Any help would be a preciated. Code is below.
Thanks Winrol
<?php echo "Test box 1 value = ". $_POST['test']. "<br/>" ?>
<?php echo "Test box 2 value = ". $_POST['test2'] ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2137022: #datepicker */
#datepicker .ui-widget {
font-family: inherit;
#datepicker .ui-datepicker {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#datepicker .ui-datepicker-title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #000;
font-weight: normal;
line-height: 1.8em;
#datepicker .ui-state-default, .ui-widget-content .ui-state-default {
border-color: #e6e6e6;
background-color: #e6e6e6;
color: #555555;
#datepicker .ui-state-default, .ui-state-default a {
color: #555555;
#datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
border-color:#FCEFA1;
background-color:#FCEFA1;
color:#363636;
#datepicker .ui-state-active, .ui-widget-content .ui-state-active {
border-color: #FFFFFF;
background-color: #FFFFFF;
color: #212121;
#datepicker .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
border-color: #5F5F5F;
background-color: #5F5F5F;
color: #212121;
#datepicker .ui-widget-header
border-color: #5F5F5F;
background-color: #808080;
border-width: 1px;
/* Text attributes for the Days of Week Text */
#datepicker .ui-datepicker table th
font-size: .8em;
color: #000;
font-weight: bold;
/* EndOAWidget_Instance_2137022 */
</style>
<script type="text/xml">

</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2137022: #datepicker
$(function() {
$('input').filter('.datepicker').datepicker({dateFormat: 'yy-mm-dd'});
// EndOAWidget_Instance_2137022
</script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #FFC;
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
    <label for="test">test</label>
    <span id="sprytextfield1">
    <input name="test" type="text" class="datepicker" id="test"/>
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
    <label for="test2">test2</label>
    <input name="test2" type="text" id="test2" class="datepicker" />
</p>
<p onclick="<?php echo $_POST['test'] ?>">
    <input type="submit" name="submit" id="submit" value="Submit" />
</p>
</form>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"yyyy-mm-dd", hint:"yyyy-mm-dd"});
</script>
</body>
</html>

This does work
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet">
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet">
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet">
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet">
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet">
</head>
<body>
<form action="" method="post">
<span id="sprytextfield1">
<label for="mydate">Date:</label>
<input id="datepicker" name="mydate" type="text">
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>
<div id="datepicker" class="ui-glass-gradient ui-80TopTo0Bottom-gradient-header"></div>
<input name="mysubmit" type="submit">
</form>
<script src="SpryAssets/SpryValidationTextField.js"></script>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js"></script>
<script>
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"mm/dd/yyyy", validateOn:["change"], useCharacterMasking:true});
$(function() {
    $('#datepicker').datepicker({ showOtherMonths: false });
</script>
</body>
</html>
Gramps

Spry:state not working properly

Hi,
I have the following code wrapped around my page:
<div spry:state="loading"
class="AjaxLoadingLarge">Loading...</div>
<div spry:state="error">Sorry! An Error has
occurred!</div>
<div spry:state="ready">
PAGE CODE HERE
</div>
Whilst the page is loading, the Loading State Appears on the
screen normally but also has the Error State Content and the Ready
State Content (unpopulated with Data) - ie it's the table with all
the header row and 1 results row displaying the dataset field names
{EventID} {EventDesc} etc.
Once the page is loaded, everything displays perfectly, It
just looks as though the "state" is not being handled properly
until the state becomes ready.
Anyone else seen this problem? and any ideas?
Dom

Hi - Thanks for the response.
The previous line of code now reads:
<div spry:region="ds1" class="SpryHiddenRegion">
and I have closed the DIV off but it has made no difference
whatsoever - but there is no class in any .css for this.
Having Googled this, I found that some people have a class in
the .css as display:none. I added this and nothing is then visible.
Any further ideas?
Dom

Using spry:state="loading" only after a certain interval

Hi everyone ,
I need a feature for spry regions. I want my loading spry state to show only loading of data takes 0.5 seconds and more.
Is it possible with this version of spry?
Ps1 : you can find a live example of my need in google webmaster tools' content section,content by title page. There is an ajax listview with paging on page and loading div only apeears if loading of data takes more than a certain milliseconds.
Ps2 : Spry rulezzzz

vw2ureg wrote:
Hi,
Go here and scroll down to ErrorState, LoadingState and ReadyState.
I hope this helps.
Ben
That will only tell Spry that it should should use different "state" as loading state. But it doesn't display a loading state after a certain interval. This functionality does not exist in the Spry library. But you could create a custom "loading" state that you automatically trigger using setTimeout if your haven't gotten a onPostUpdate through your region observer.
But i'm curious why you would wanna do create a have the loading state after a certain interval.

Spry:state unexpected results

I am using Spry/AJAX to populate a page, but whenever the
page loads you see the dynamic content tags in the form fields and
then it reloads with the data in the form fields. Is there any way
to make it not show the dynamic content tags and just show the form
once the data is in the form fields? Go to the following link to
see what I mean:
http://www.homesandagents.com/Members/contact_info.asp?userID=10000&sessionID=&contactID=1 0064
I tried using spry:state="loading", but it still shows the
form with the dynamic tags first (ie. {last_name}), then the
loading state, and then finally the ready state.

I'm not seeing the data references when I load your page. But
that may be due to the fact that it looks like you've added the
SpryHiddenRegion class to your region.
--== Kin ==--

Forced spry:state

Hello,
I'm wondering if I can force the spry:state="error" from the
server. Here's what I'm attempting to do:
1. User logs in using a form.
2. Login name / password verification script (in PHP) creates
a session cookie with a randomly generated code and updates a user
db with that code to track the session.
3. When the user requests data, the server side script (in
php) first validates the cookie against the session code in the
database and returns the requested data if the code in the cookie
matches the code in the db. (if exists).
4. If the cookie does not exist or does not match, then I'd
like the script to return a spry:state="error" and have the html in
that state block displayed (requests the user to log in, or
redirects them to a login page).
I've seen a post where it was suggested to return an empty
set, but this is a somewhat different behavior. Can you force a
spry:state to "error"? Am I over complicating this whole process?

You can force a region to display a specific state
programatically like this:
var rgn = Spry.Data.getRegion("myRgnName");
if (rgn)
rgn.setState("error");
You can see this being done in this sample:
http://labs.adobe.com/technologies/spry/samples/data_region/RegionStatesSample.html
Also check out state mapping:
http://labs.adobe.com/technologies/spry/samples/data_region/StateMappingSample.html
--== Kin ==--

Spry:state="error" field is always visible?!

I define layers to display the current spry:state, one for
spry:state="loading", the second for spry:state="error" and the
third for spry:state="ready". The problem is that
spry:state="error" field is always visible along with
spry:state="loading"?! Am I making some mistake or what? Here is a
part of relevant code:
<div id="vijesti" spry:region="pvVijestiMini"
class="vijestimini">
<div id="ucitavanjemini" spry:state="loading"
class="indikator">
<p>
<span><img
src="slike/pomocne/loader.gif"></span>
<span>Podaci se učitavaju...</span>
</p>
</div>
<div id="greskamini" spry:state="error"
class="indikator">
<p>
<span><img
src="slike/pomocne/loader2.gif"></span>
<span>Podaci ne postoje ili su
nedostupni...</span>
</p>
</div>
<div id="podaci" spry:state="ready">
<span class="vijestnaslov">Čikom vijesti
[{ds_UnfilteredRowCount}]</span>
<div id="redovimini" class="redovimini">
<div class="red" spry:repeat="pvVijestiMini">
<p class="podnaslov">
<span>{datum}</span><br>
<span class="naziv">{naziv}</span>
</p>
<p>
<span>{ukratko}<a
href="index.php?jezik=0&meni1=3&meni2=0&meni3=0"><img
src="slike/pomocne/dalje.gif"
class="dalje"></a></span>
</p>
</div>
</div>
<div id="navigacija">
<div spry:if="{ds_UnfilteredRowCount} == 0">Nema
podataka u tabeli "Vijesti"!</div>
<div spry:if="{ds_UnfilteredRowCount} > 0">
<div><a href="#"
onclick="pvVijestiMini.firstPage(); return
false;">|<</a><span> </span></div>
<div><a href="#"
onclick="pvVijestiMini.previousPage(); return
false;"><<</a></div>
<div> stranica {ds_PageNumber} od
{ds_PageCount} </div>
<div><a href="#" onclick="pvVijestiMini.nextPage();
return
false;">>></a><span> </span></div>
<div><a href="#" onclick="pvVijestiMini.lastPage();
return false;">>|</a></div>
</div>
</div>
</div>
</div>
The second question: How do I hide region container until it
gets filled with data?

Look, you got me all wrong. I don't want to hide a main
region, just the spry:state="error" appearing the same time as
spry:state="loading"!!!
<div id="ucitavanjemini" spry:state="loading"
class="indikator">
<p>
<span><img
src="slike/pomocne/loader.gif"></span>
<span>Podaci se učitavaju...</span>
</p>
</div>
<div id="greskamini" spry:state="error"
class="indikator">
<p>
<span><img
src="slike/pomocne/loader2.gif"></span>
<span>Podaci ne postoje ili su
nedostupni...</span>
</p>
</div>

Can't view camera photos in gallery and some other...

I need help here. Everything in my phone is missing. I accidentally lost all data after disconnecting from computer and how do i retrieve them back? Since then, whatever pictures i took doesnt appear in Gallery and all my PDF documents are still missing and movies that I've downloaded too. How? Ive tried restoring. Still nothing. But when i back up my phone using Nokia Link, the items i cant find on my phone are all backed-up. Whats going on?

Oh and by the way, Im using a Nokia N9.

When creating a custom SearchPlugin, is it possible to add more code such as uppercase conversion of the SearchText and IF statements that change the URL depending on what is typed?

When creating a custom SearchPlugin, is it possible to add more code such as uppercase conversion of the searchTerms and IF statements that change the URL depending on the searchTerms? Every time I try to add something firefox doesn't want to add it as a search plugin. I need to create a more powerful search tool for personal use.

I've found some external software applications that will do it, so that leads me to believe its not possible within ID CC.

I was using my wifi last night when I got an error message stating my ip address had been taken over. Then safari stopped working and i can no longer access the internet. I looked at my ip address and it states 000.000.000....can someone please help?

I was using my wifi last night when I got an error message stating my ip address had been taken over. Then safari stopped working and i can no longer access the internet. I looked at my ip address and it states 000.000.000....can someone please help?

Sounds like a bogus pop up. In any case power down your Mac, your modem, your router. Then power back up in 1 minute sequence; modem, router, Mac.

Gallery and iWeb

I have some movies and photo albums published in my Gallery. I'm producing web sites using iWeb. I want to insert the photo albums and movies into pages. This works fine when I choose Insert>.Mac Web Gallery> and the appropriate movie. But I never get the option to insert a photo album. Anyone know anything about this?
Thanks
Jim

You cannot use the images in the Web gallery directly in iWeb.
But since the images are already on the server you can use the HTML Snippet to display them on your page.
The images are stored on iDisk>Web>Sites>_gallery
Then folders with large numbers.
The URL to an image is something like:
+http://web.mac.com/dotMacID/gallery/100678/IMG1999/medium.jpg+
[Click for sample|http://web.mac.com/wyodor/_gallery/100024/Alfred-20E--20Neuman/medium.jp g]
Use the [HTML img element|http://htmlhelp.com/reference/html40/special/img.html] and paste it in a HTML Snippet.
<img src="http://web.mac.com/dotMacID/gallery/100678/IMG1999/medium.jpg" width="320" height="240">
And 20GB is a lot of space for photos.

Gallery and spry:state

Similar Messages

Maybe you are looking for