Javascript spinning wheel effect
Moderator: General Moderators
-
shahryarghazi
- Forum Newbie
- Posts: 1
- Joined: Wed Dec 20, 2006 5:02 pm
- Location: Mississauga, Canada
Javascript spinning wheel effect
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
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
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
So, when the user clicks a button:
That will set the wheel spinning until the page exists.
So using AJAX (the complex example):
Code: Select all
<img src="foo.gif" alt="Loading" style="display: none;" />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';};" />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();" />- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
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.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
Heh... if you have a google you'll find a *full* version of lemmings written in JavaScriptole 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.
You are of course bound by the barriers of HTML/XML/CSS when doing things like that.