Page 1 of 1
Javascript spinning wheel effect
Posted: Wed Dec 20, 2006 5:10 pm
by shahryarghazi
Hi Friends,
A quick question for you guys. Does anyone know how to create a spinning wheel kind of effect in Ajax/Javascript web applications?
For example,
Go to
http://www.adobe.com/cfusion/exchange/index.cfm. Type any string in the search box and press search button. You'll be taken to the search results page but before that you'll see that spinning wheel effect on top left corner of the table under "Exhange Search" heading.
I wanted to use that in one of my applications please let me know how to do that.
thanks
Posted: Wed Dec 20, 2006 5:12 pm
by Burrito
create an animated gif (the spinning wheel) and put it in a hidden div. When the button is clicked, unhide the div.
Posted: Wed Dec 20, 2006 5:14 pm
by Zoxive
http://ajaxload.info/
"Ajax loading gif generator"
Posted: Wed Dec 20, 2006 5:21 pm
by Chris Corbyn
That page wasn't found for me, but I think I know what you mean. It's just an image in a hidden layer; the image being an animated gif.
Code: Select all
<img src="foo.gif" alt="Loading" style="display: none;" />
So, when the user clicks a button:
Code: Select all
<img src="foo.gif" alt="Loading" style="display: none;" id="loader" /><br />
<input type="submit" onclick="function(){document.getElementById('loader').style.display='block';};" />
That will set the wheel spinning until the page exists.
So using AJAX (the complex example):
Code: Select all
<script type="text/javascript">
var http = getHttpObject(); //You know the score ;)
function showLoader() {
document.getElementById('loader').style.display = 'block';
}
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
function processSearchResult() {
//whatever you do with the http.responseText
}
function doSearch() {
showLoader();
http.open("GET", .... );
http.onreadystatechange = function(){ processSearchResults(); hideLoader(); };
}
</script>
<img src="foo.gif" alt="Loading" style="display: none;" id="loader" /><br />
<input type="button" onclick="doSearch();" />
Posted: Wed Dec 20, 2006 5:31 pm
by RobertGonzalez
The page wasn't found because there was a period in the link. Adobe did theirs with Flash, but it is just as easy (if not easier) to use an animated GIF image to do it.
Posted: Wed Dec 20, 2006 8:12 pm
by Ollie Saunders
With a
few exceptions JavaScript can't realistically be used to make anything spin or rotate. This is a sad fact for those who have ever considered writing a game in JS.
Posted: Thu Dec 21, 2006 5:51 am
by Chris Corbyn
ole wrote:With a
few exceptions JavaScript can't realistically be used to make anything spin or rotate. This is a sad fact for those who have ever considered writing a game in JS.
Heh... if you have a google you'll find a *full* version of lemmings written in JavaScript
You are of course bound by the barriers of HTML/XML/CSS when doing things like that.
Posted: Thu Dec 21, 2006 12:51 pm
by m3mn0n
Moved to Client Side.