Skip to main content

Show an animated gif onClientClick

To show an animated gif, something like loading onClientClick is a simple task. You just have to add a JavaScript function on the click event so the JS function will take care until the next page loads from the server. Inside the JS function we just have to hide the excising div and show the div which contains animated loading gif.

I have done it and it works fine on every other browser except IE. On IE the gif is shown but it is not animated. I have to do some R&D and what I found was IE doesn't do anything like that when it is loading another page (communicating with server) and was commented as a feature limitation of IE.

But there should be a way to do that, that's what I was thinking and I found a pretty simple way to do that. Here it is and if you have a better way please share it here.

<div id="divProgress" runat="server"> 
</div>

<div id="Div1" runat="server">

The web form comes here …

</div>


 

The JavaScript was like this.

<script type="text/javascript"> 
<!-- 
  
function ShowProgress() { 
  document.getElementById(
'<%=Div1.ClientID %>').style.display = 'none';       
  document.getElementById(
'<%=divProgress.ClientID %>').style.display = "block"; 
  document.getElementById(
'<%=divProgress.ClientID %>').innerHTML = '<div align="center"" class="ltGreenBorder"><br /><img alt="Progress" align="top" src="/images/pleasewait.gif" /> </div>';

    } 
//--> 
</script>


 

What I have done is simply updates innerHTML for the loading div. The gif started animating magically.


 

Comments

  1. Hi,

    I am Richa from SiliconIndia. I am also an avid blogger for a while now and participating actively in Indian blogosphere. I read your blog posting and found them very interesting and informative. We would love to see a copy of your blogs posted here, whenever you are posting it on blogger.com. Here are some of the benefits of posting your blogs here:

    We have a strong community of 1 Million professionals
    Best blogs of 2008 to be published in a book "SiliconIndia bLoG PrinT"
    Best blog to be printed in SliconIndia & SmartTechie magazines each month
    Chance to be featured on homepage everyday
    There are 10,000 active bloggers who participate in active blogging

    We appreciate your community initiative here and in helping build a more powerful India! Also, if you have any ideas or want to volunteer to help for SiliconIndia, we would be more than excited to get your help. Pls mail me back at richa@siliconindia.com with your suggestions and feedback.

    Richa
    Blog Editor – SiliconIndia
    http://blogs.siliconindia.com/

    ReplyDelete
  2.  Gifts to India, Flowers to India, Cakes to India,Same Day delivery all over india
     http://www.indiaflowermall.com

    ReplyDelete
  3. Nice blogs ! Thanks for Sharing.

    Send Gifts to India

    Send gifts and flowers to India for your loved ones through online services. The greatest advantage through online sending birthday gifts to your dear ones is that you never miss to send birthday gifts to your loved ones because at any place any time of day you can send birthday, anniversary, wedding gifts to your loved ones doorstep without any hassle. Online florist www.indiangiftscenter.com which provide fresh flowers, Cakes, Chocolates, Teddy Bear, delivery as birthday gifts to your loved ones. Just log on to www.indiangiftscenter.com and select your collection of gifts which you send to your friends or relatives. The also great advantage is that it saves your time while sending gifts online.

    ReplyDelete

Post a Comment

Popular posts from this blog

Google API v3 with PHP using Blogger service

It was really hard for me to understand how the Google APIs are working at the first point and took few days for me to figure out. But after a successful working prototype it seems very easy. And also when I am searching for a simple example I was unable to find a good one that I can understand.

So let me list down step by step what I have done with URLs and as simple as I can.

Create a Google applocation - https://code.google.com/apis/consoleSwitch on the "Blogger API v3"Get the latest APIs client library for PHPlocation - https://code.google.com/p/google-api-php-client/downloads/listUpload the files to your host location on on localhostExtract the files to folder  named "GoogleClientApi"Create your php file outside of the folder Copy paste following code into the file and do the changes as needed  By changing the scope and the service object you can access all the services that is given by Google APIs through the PHP API library set given.
If there is anything …

How to get indexed by Google & Yahoo

I have seen a lot of ads and services online that provide the facility to get higher page ranks on search engines. But when I asked about those services on Google their respond was not much positive because they said it can decrease you page rank (because those services cannot be trusted always). It is happening because the page rank is depending on page visitors (as Google say). So the better way is to let the Google to index your site by sending them the address of your website. http://www.google.com/webmasters/ : here you can improve the traffic with the webmaster tools and you can send your website contents also. It is a legal, simple and direct hit.
You can send your web site address (even the blog) to Yahoo: https://siteexplorer.search.yahoo.com also. It helps them to index your pages on their search engines.


It is better to come up with the content and services which are really useful for the visitors and the traffic will be increased regularly. I have gone through a lot of expe…

How to Install ColdFusion 8 on Linux?

It was real pain for me to install ColdFusion on my Linux box with Apache. Anyway we have installed it and I thought to share it because this may help you also to install ColdFusion on a Linux box.
First of all open a shell and then continue on this.

Grant Execute permission to the Coldfusion‐8‐lin.bin binary file
chmod +x Coldfusion‐8‐lin.bin

Execute Coldfusion‐8‐lin.bin
./Coldfusion‐8‐lin.bin

Enter the Locale
1 (English)

Hit Enter 28 times to continue the agreement

Enter "Y" to accept the agreement

Enter the version to install
3 (Developer Edition)

Enter the next task to perform
1 (Server Configuration)

Enter whether you have an existing server configuration
2 (No existing server configuration)

Enter the next task to perform
5 (continue installation)

Enter the installation path
Hit enter to accept the default path

Hit Enter 30 times to continue the agreement

Enter "Y" to accept the agreement

Enter the serial number
Hit Enter for no serial number

Enter whether you h…