Javascript spinning wheel effect

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
shahryarghazi
Forum Newbie
Posts: 1
Joined: Wed Dec 20, 2006 5:02 pm
Location: Mississauga, Canada

Javascript spinning wheel effect

Post 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
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

create an animated gif (the spinning wheel) and put it in a hidden div. When the button is clicked, unhide the div.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

http://ajaxload.info/

"Ajax loading gif generator"
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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();" />
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

Moved to Client Side.
Post Reply