If you have a pages that is slow to load like a search, its best to have some sort of small animation (small spinner or _ underscore blink) whist the pages starts loading. So the user knows somethings is happening.
It needs to start at the point of someone submitting a form.
How best to do this in FW?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
just like when pressing send on the forum - (tries it again)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Also the mouse pointer changes (tries it again)
(Sorry to all getting email)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s done on the forum by using the Ajax design pattern and the Prototype JavaScript framework.
If you don’t want to make a refresh-less (Ajax) form, but you want to keep people from pressing the button twice or similar, you can do this:
JavaScript:
var b = $('YourSubmitButtonID');
var f = b.up('form');
f.observe('submit',function(evt){
b.wrap('div').update('<img src="Resources/spinner.gif" width="16" height="16" alt="" />');
return f.submit();
});
This will replace the button with the spinner as soon as it is clicked, and then submit the form. Depending on how quickly your server responds to that submission, your spinner might not be on screen all that long.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Depending on your layout, you might have trouble with this line causing things to jump when the form is submitted:
b.wrap('div').update('<img src="Resources/spinner.gif" width="16" height="16" alt="" />');
if so, just change it to wrap with a span instead of a div:
b.wrap('span').update('<img src="Resources/spinner.gif" width="16" height="16" alt="" />');
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
or even easier:
b.replace('<img src="Resources/spinner.gif" width="16" height="16" alt="" />');
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Worked first time. Is there any preferred library to use? (It works on all)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can also use http://www.ajaxload.info/ to create your own cool “spinner” icon
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I would use prototype-packed, because it’s the smallest.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry spoke too soon. Works in Freeway Preview. But not in a browser.
In Safari, no spinning image, In Firefox, just a broken link image (But the URL is correct)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Or here:
Walter
On Jun 9, 2008, at 12:12 PM, Helveticus wrote:
You can also use http://www.ajaxload.info/ to create your own cool
“spinner” icon
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Which form are you using? replace, or wrap + update? Also, have you
force-refreshed your browser?
Another thing you might try is to add this method call right inside
the function body. This should be the first line inside the observe
block:
f.observe('submit','function(evt){
evt.stop();
...et cetera...
});
One of two things is happening here. Either the form call is
returning too fast for the replacement to take place (which the
evt.stop() will handle), or the browser is not liking the idea of
using replace in this manner.
Walter
On Jun 9, 2008, at 12:29 PM, WebWorker wrote:
Sorry spoke too soon. Works in Freeway Preview. But not in a
browser.In Safari, no spinning image, In Firefox, just a broken link image
(But the URL is correct)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I can get Firefox to work correctly, but not Safari - the spinner does not appear using the same code.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This is when throwing a button, and form field on a blank FW5 page. If these are put inline in a div, then it does not work in either browser.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Or here:
Walt, Thanks for the link
Marcel
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 9 Jun 2008, 4:40 pm, WebWorker wrote:
I can get Firefox to work correctly, but not Safari - the spinner does not appear using the same code.
Could you post this somewhere that I could debug it in FireBug?
Thanks,
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Take a look at this – it’s a fairly slow connection, so you should get a decent pause before the page loads.
http://shiny.walterdavisstudio.com/test/busy.html
I added a 50 millisecond timer into it to give the image time to load and display when the connection is faster. The final function reads like this:
var b = $('YourSubmitButtonID');
var f = b.up('form');
var s = function(){ return f.submit(); };
f.observe('submit',function(evt){
evt.stop();
b.replace('<img src="Resources/spinner.gif" width="16" height="16" alt="" />');
window.setTimeout(s,50);
});
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks that seem to have fixed things.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options