Spry Elements vs Regular Form Elements

What is the difference between using Spry Validation form elements as opposed to just using regular form elements?
Which do you prefer and why?
Thanks

What is the difference between using Spry Validation form elements as opposed to just using regular form elements?
Regular form elements are passive elements that wait for information to be entered to subsequently be processed by another mechanism.
SpryValidation form elements are the same as above except that they have an active validation module attached. There are standard validation rules that can be used (like e-mail address) or you can supply custom validations.
Because Spry is a JavaScript library, the Spry widgets will only work with JavaScript enabled. The advantage of JavaScript is that it is processed by the browser (client side) and that, in our case, validation is instantaneous. When JS is turned off or the browser is not JS capable, there is no validation. This means that if you require serious validation, you must, in addition/in lieu of, have server side validation.
Which do you prefer and why?
I use both client side (Spry) and server side (PHP) validation, the latter to make sure that if Spry fails there is always the safe and trusted method of validation.
Why Spry? Spry widgets allow for a better user experience.
I hope this helps.
Ben

Similar Messages

Spry data out of form elements

HI all,
Currently using spry I have a drop down filter based on user
input through a text box working fine. What I want, is when I click
a button to have it move that data to a container. My problem is
that I can't seem to access the data that the user has selected
specifically on the drop down through any of the spry methods.
I'm not even sure what the best way through spry to access
that form field would be.
Any thoughts would be great.
Thanks.

Hi,
Can you please send me your form designed in InDesign at [email protected]? I would like to take a look.
Thanks,
Wenlan

Hiding Table Columns with the Spry Element Selector

I am trying to set up a toggle button that will show/hide
rows >1 when clicked. I've used Adobe's
"Hiding
Table Columns with the Spry Element Selector" example and it
worked fine with an HTML list, until I linked to actual XML data.
Now it works in reverse. What gives?
Here's the example:
http://a44.awardspace.com/testing/toggleShowHideRows.htm

That's what I started with. Same result:
http://a44.awardspace.com/testing/toggleShowHideRows.htm

Resolving conflicting JavaScript due to several Spry elements in one page

I am fairly new to web coding, I would really appreciate some help in the following topic. I am working on a web page and I decided to insert some of the pre-coded Spry elements provided by Dreamweaver, I have in one page a HorizontalMenuBar, a SpryTabbedPanels, and an AccordionPannel. I have not modified any of the script that is automatically inserted into my code, all I did was to change some of the CSS to match my design, I saved the extension files in my own .js folder rather than the SpryAssets folder that is automatically created and I have verified that all the files are being called correctly in the <head> of my document. When I test the page with only the HorizontalMenuBar it works fine, as soon as I add the TabbedPanels and the Accordion only one of them works. I researched this subject and I think the problem is that eachof these /.js files created by Dreamweaver have a couple of variables that are named creating conflict when running the script. But I don't know what variable it is, in previous threads I found that the most common variable causing this problem is the 'onload' event, so I looked for it on each file and to my surprise neither of the .js files have an 'onload' element. I would guess that is being used as a global variable, but I don't write code and I wouldn't know how to fix that.
I have some specific questions I would appreciate help with.
1- Does anyone know a simple way to fix this problem?
2- What other variable could be causing this problem? Specific names would help so I can run a Find search
3- Will it cause a problem if I combined the 3 .js files into one?
4- What can I do to avoid this problem later on if I decided to add another pre-coded JavaScript element into my site?
Thanks in advance for any help provided.

I'm having a similar problem and can't find the solution. I have a twitter feed widget and a image cycle widget on my site. On their own the widgets work fine, but when both in the same html document only one works. Here's my code, what do you think: I'd really appreciate any assistance. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/twitter_search.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2559022: #slideshow */
                              #slideshow {
                                  padding: 0px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 0px;
                                  background-color: transparent;
                                        -webkit-border-radius: 0px;
                                        -moz-border-radius: 0px;
                                        border-radius: 0px;
                                  margin: 0;
/* EndOAWidget_Instance_2559022 */
</style>
<script type="text/xml">

</script>
<style type="text/css">
/* BeginOAWidget_Instance_2125523: #twitter */
                    #twitter { height: 200px; width: 250px}
/* EndOAWidget_Instance_2125523 */
</style>
</head>
<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=false;
$(document).ready(function() {
          $('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'fade,',// name of transition effect
                    pause:                              true,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              2000, // speed of the transition (any valid fx speed value)
                    sync:                              false,     // true if in/out transitions should occur simultaneously
                    timeout:                    6000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '400px',
                    width:         '900px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">

<img src="images/beach1.jpg" width="100" height="100" title="caption for image1" /> <img src="images/beach2.jpg" width="300" height="300" title="caption for image2" /> <img src="images/beach3.jpg" width="200" height="200" title="caption for image3" />
<div title="sample title"> you can add blocks of text instead!</div>
<img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div>
<div id="twitter"></div>
<script type="text/javascript">
// BeginOAWidget_Instance_2125523: #twitter
$(document).ready(function() {
          $('#twitter').twitterSearch({
                    term: 'from%3Abholtdesign',
                    title: 'cbb twitter',
                    titleLink: 'http://www.twitter.com/bholtdesign',
                    bird: true,                                                  // true or false (show or hide twitter bird image)
                    birdSrc: '/images/tweet.gif',                     // twitter bird image
                    birdLink: '',                    // url that twitter bird image should like to
                    avatar: false,                                        // true or false (show or hide twitter profile images)
                    anchors: true,                              // true or false (enable embedded links in tweets)
                    animOutSpeed: 500,          // speed of animation for top tweet when removed
                    animInSpeed: 500,          // speed of scroll animation for moving tweets up
                    pause: true,                                        // true or false (pause on hover)
                    time: true,                                                  // true or false (show or hide the time that the tweet was sent)
                    timeout: 4000,                              // delay betweet tweet scroll
                    css: {
                              a:     { textDecoration: 'none', color: '#999999', fontWeight: 'normal'},
                              container: { backgroundColor: '#000000' },
                              frame: { border: '10px solid #333333', borderRadius: '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' },
                              img:   { width: '30px', height: '30px' },
                              loading: { color: '#888' },
                              text: {fontWeight: 'normal', fontSize: '12px', color:'#ffffff'},
                              time: { fontSize: '12px', color: '#CCC' },
                              title: { backgroundColor: '#990066', padding: '5px 0 5px 0', textAlign: 'center', fontWeight: 'bold', fontSize: '12px'},
                              titleLink: { textDecoration: 'none', color: '#ffffff' },
                              user: { fontSize: '12px'},
                              fail: { background: '#6cc5c3 url(/images/failwhale.png) no-repeat 50% 50%'}
// EndOAWidget_Instance_2125523
</script>
</body>
</html>

Spry Element Problems...

Hello!
I am working on my website and getting conflicts with Spry Elements. I have inserted a Spry Menu at the top of my page in a fixed position, and then in the content area of my page I have Spry Tabs. The problem is that even though I have the z-index up to 1000 for the menu, when it drops down over the tab the tab can be seen through it and even selected. However, I cannot find a z-index property for the Tab css anywhere, and even when I add one well below my menu it still shines through.
Since both Spry elements autocreate their own css pages and javascript files I assume it is something in there that is causing it.
Anyone have an easy answer?
Thanks,
-Ryan

I cannot find a z-index property for the Tab css anywhere
You'll probably need to create your own. Z-index (stacking order) only works on positioned (relative, absolute or fixed) elements.
Nancy O.

Absolutely Positioned Spry Elements Disappearing in Firefox

Building a sliding spry element that creates the effect of a tab expanding upwards. Renders perfect in both Safari and Opera9, however in firefox the heading tag and subsequent <a> that controls the effect are visible only for a brief second and the page loads then disappear from view all together.
I turned off css styles in FF and was surprised to find that the 3 spry elements function 100% correctly. This is indicating to me that it is a css error. I remember another time I was trying to use image replacement via display:none and AP html tags where the links became unclickable though still visible.
here is a link to the page:
http://internal.shamanism.com/danceofthedeer/test/default.cfm
rather than post a long list of css styles and html code, ive just attached them to this thread.
I've searched around for a similar issue, but without knowing what is exactly causing this problem its hard to find relevant results.
Any help would be greatly appreciated.
Thanks.

ccwd wrote:
> I used Dreamweavers to create a web site with a
horizontal spry menu. The site
> was working fine and still is in Firefox, but in IE the
menu text disappears
> when browsing to some of the page (the text is visible
on roll-over, however).
> I have very limited experience with coding.
For anyone to track down your problem you'll have to post a
link to a live page that exhibits this issue and give detailed
instructions as to how to recreate it. Please include the version
of IE (and platform in case that may make a difference)that is
having this issue.
Also, Spry questions are generally better asked in the Spry
forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Elements

Is it possible to combine several different Spry elements on a single page, specifically a Spry menu and a Spry collapsible panel(s)?

Thanks for your feedback.
In testing, I did have some initial problems. But it appears if I avoid nesting (the different Spry elements) the problem(s) goes away. Does that make sense? Is that generally good practice?

Spry elements and rollovers not working in IE (all)

After updating my DW CS5.5 last week my rollovers and spry menu elements don't work in IE (any version). Everything worked well before update. It is not the code (ran it through validator). I tried just insert the elements to the empty page and nothing works. I really need this to resolve as my deadline is in 2 weeks. Is it any way how I coudl return to the previous version? My version now (after update) is Version 11.5 Build 5366.
I forgot to mention that also I cannot connect to Adobe Browser Lab from DW since update ( I can do it from website) - it doesn't recognize my Adobe ID.
Thank you to everybody who coudl give me some info
Daniela

Upgrading should not be the cause of the problem.
If you want us to help you, please post a link to your site so that we can be privy to the same info that you have.
Gramps

In Dreamweaver CS5 - Spry elements visable in LiveView Only

Web page: www.muohio.edu/youth
In Dreamweaver the Spry Tabbed Panels and Collapsible panels work fine as published, and in LiveView. However in Design View the tabbed panels only show the top content, the styling is not applied. The collapsible panels are functional, but the styling is not applied.
Hope someone has an idea of what needs to be changed in the code, it is very difficult to update the page as it is.

Yes, on some complicated pages, DW can have a hard time rendering the Design View.
What you can do (that is the solution I use) is:
for the styling, create you rules in Design view, and edit them in Live view. You sometimes have to refresh the view to have the changes apply, but it is still a time-saver.
for the content, just switch to Code View and copy the content that needs updating. Open another HTML page, select all, and paste over your copied content. DW renders HTML bits pretty well even if there is no <html>, <body>, etc, tags. Then edit in Design View, switch back to Code View, copy all, and paste over your old content in the original document.
Hopes this helps.
Xav

Combining Spry elements

My situation is this: I am creating a photo gallery page,
with 5 galleries. Each gallery's thumbnails are displayed in a Spry
panel (Tabbed Panels) on the right side of the page. The full size
image will be displayed in another div on the left side of the
page. So far, I have everything for the first gallery working, and
I was able to get the thumbnails for the second gallery to show,
but can't figure out how to get the corresponding full size image
for the second gallery to show up when the thumbnail is clicked.
Can anyone help me out with this? The page is located here:
http://www.mistchild.com/nyc/08/photos.htm
Thanks

Can anyone help me with this?

Obtrusive spry elements

I have the following spry:repeat
quote:
<ul id="categoryList"
spry:repeatchildren="categoryPagingDs"
spry:choose="spry:choose">
<li spry:when="'{ds_RowNumber}' == 0"
class="maincategory"
id="maincat_'{ds_RowNumber}'"><b>{@name}</b></li>
<li spry:when="'{@name}' != getPrevCat('{ds_RowNumber}')"
class="maincategory"
id="maincat_'{ds_RowNumber}'"><b>{@name}</b></li>
<li id="cat_{ds_RowID}"
spry:default="'{ts:subcategory/@name}' != ''"
class="subcategory">{ts:subcategory/@name}</li>
</ul>
i have a
quote:
function initCatWidget(){
Spry.$$("*.subcategory").addEventListener("click",setFilterByCategory,false);
Spry.$$("*.maincategory").addEventListener("click",setFilterByCategory,false);
being called on an
onLoad region and postUpdate
while in FF 2 I get the triggered event i DON'T get the 'id'
from the
Spry.$$('*.maincategory')
and in IE 6 i don't get any 'click' events at all...

I have updated the regions to
quote:
<ul id="categoryList"
spry:repeatchildren="categoryPagingDs"
spry:choose="spry:choose">
<li spry:when="'{ds_RowNumber}' == 0"
class="maincategory" id="maincat_'{ds_RowNumber}'" ><b
spry:setrow="categoryPagingDs
categoryListDs">{@name}</b></li>
<li spry:when="'{@name}' != getPrevCat('{ds_RowNumber}')"
class="maincategory" id="maincat_'{ds_RowNumber}'" ><b
spry:setrow="categoryPagingDs
categoryListDs">{@name}</b></li>
<li id="cat_{ds_RowID}"
spry:default="'{ts:subcategory/@name}' != ''"
class="subcategory"><span spry:setrow="categoryPagingDs
categoryListDs">{ts:subcategory/@name}</span></li>
</ul>
and used
quote:
Spry.Utils.addLoadListener(initCatWidget);
var catObserver = {};
catObserver.onPostUpdate = initCatWidget;
catObserver.onCurrentRowChanged = setFilterByCategory;
Spry.Data.Region.addObserver("categoryListingRegion",
catObserver);
No dice on either browsers the previous code was more closer
to a solution....
it his a bug also?

Setting Inner HTML for spry elements

I am trying to set the inner HTML for an object that it says
has no properties. It seems to work in FF but not in IE.
Example:
Created an additional row that I put a '*' in column if it is
the clicked column representing the details section of the page.
(In other words, when clicking the sub region is based on the
clicked row. This row gets the left column of the clicked item
marked and the other rows cleared.)

Ah... found an alternative. There are two alternatives to the
interface for CSS styles.
rowHover and the one I just found, rowSelected. That is a
sufficient method of highlighting the currently selected row. I
just added a style to the CSS and it works great!

Using spry select on multiple forms in same page

Greetings-
My apologies if this has already been answered but after a few searches I've not found my solution....
I have a web page with 2 different forms (completely different open form and close form tags) that I'm trying to get the Spry Select Widget to work in.
Both forms' Spry Select widgets interact as expected with the user with one exception; the second form continues to submit to the action page even if the user is trying to submit an invalid value (the docs suggested using the value of -1 so that's what I'm using). The appropriate error gets displayed to the user but the form continues to submit, which I don't want. Is there a limitation that I missed regarding the use of multiple forms in the same web page with the Spry Select Widget?
FWIW, I'm running the app on ColdFusion and even the cfform/cfselect won't work with the Spry Widget.... I've named and id'd all forms and form elements and still no luck.
Any ideas?
Thanks in advance,
Rich

Hi Brad,
The preamble looks reasonable. I would like to make sure you are clear on the process.
The data needs to be rendered twice (i.e. a 2 step job). In the first step you create a trace file with the page count for each document in it...\trace"^define User:PageCountForTrans_@:TransCount. @$page.@LF."."
In the second step, that trace file is brought back in as a preamble file.
Please confirm that you are in fact passing the data twice.
cheers
Chris

Spry Submit and clear form

Hi all, I have a Spry.Utils.submitForm in my JS it will
submit the form and then in my callback I have it clear the form
element using document.formelement.reset();
The problem is, it seems that my form is getting reset before
the form is submitted. I am not sure why this would happen seeing
as it is in the call back and the submit should fire before
correct?
Anyhow, any info would be helpful.

The only field that has validation is the "Next Follow Up Date" field, it is a required field. Clicking the "Save" button submits the form.
http://www.buildingethics.com.au/validation_problem.php

Spry Tabbed Panles and forms

Hi,
I am having a problem with my code. My goal is to have a unique form across different tabs.
Basically I want the user to send the entire information clicking only one button that is located outside the tabs.
My first taught was
<div>
<form id="form1">
<div>
<input type=""... name=""
</div>
<div>
<input type=""... name=""
</div>
</form>
<input type="button" value="send" onClick="send()"/>
were send is simply
function send()
document.getElementById("form1").submit();
That code didn’t worked because every time I opened a div in which a part of the form was inserted it performed the form action (specifically it goes to the .php page that collect the information)
Then I tried
<div>
<div>
<form id="form1">
<input type=""... name=""
</form>
</div>
<div>
<form id="form1">
<input type=""... name=""
</form>
</div>
<input type="button" value="send" onClick="send2()"/>
Where now the function send2 is
function send()
document.getElementById("form1").submit();
document.getElementById("form2").submit();
Also this strategy did not worked because was sending only the second (or first i did not remember exactly) form.
So I ended up switching to a function i found on the net the was collecting all the forms in document to one and post it
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
method = "post";
action = "liveit.php";
name = "formCollector";
id = "formCollector";
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
document.body.appendChild(formCollector);
formCollector.submit();
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
This way worked perfectly but has a visually very bad outcome: when I click send it shows for a fraction of second all the checkboxes (that are present in all the different tabs) at the bottom of the screen.
At that point I called a second function in the send button that creates a fake div just to push down the horrible checkboxes that were showing. Obviously that creates a scroll bar that resize my page and has an even worse effect.
Do you have any suggestion?
Thank you very much, and excuse me for my bad English

I was able to figure it out by myself.
I just needed to erase the line
document.body.appendChild(formCollector);
in order to not show the the ugly form that was collecting the data from the other forms.

Spry Elements vs Regular Form Elements

Similar Messages

Maybe you are looking for