Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts

    When download link is clicked, link turns to a loading image.

    Hey! Does anyone know how to change a link to a loading image when the link is clicked, then once the download has started, turns to the normal text?

    Here is the link to the site: Wifee Downloads


    BabyJack
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Ohio
    Posts
    231
    Thanks
    3
    Thanked 21 Times in 21 Posts
    You'd need to use AJAX for that.

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Ah, OK.
    Will a mod move this to the AJAX forum?
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Back on topic
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    dont need ajax for this one.


    Code:
    <html >
    <body >this is a 
    <a href='hello.mpg' onclick="this.io = this.getElementsByTagName('img')[0].style; io.display='inline'; setTimeout(function(){io.display='none' }, 1000); "> dl test <img  style="display:none;" src='http://www.crh.noaa.gov/css/default/images/nws_logo.jpg' /></a>
    </body>
    </html>
    change hello.mpg to your file, and the image url to the wait image url...

    since firefox will get busy downloading the href'd file, the image will disappear once the download begins. in ie, i could not find a way to detect/control the actual downloading part. it's as if the download is handed over to the browser after the request...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Thanks! Works like a charm!

    But, when it's been clicked, how do I remove the text 'Download'?

    Code:
    <strong><a href='Hooded_Jacket.zip' onclick="this.io = this.getElementsByTagName('img')[0].style; io.display='inline'; setTimeout
    
    (function(){io.display='none' }, 1000); ">Download!<img  style="display:none;" src='ajax.gif' /></a></strong>
    URL: http://wifee.missingstudios.com/downloads/sims.php
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    repeat and reverse for text.
    wrapping it in a b tag makes it bold, but more importantly, gives you a handle to the text you want to change.

    Code:
    <html >
    <body >this is a 
    <a href='hello.mpg' onclick="ts = this.style; ts.color='transparent'; io = this.getElementsByTagName('img')[0].style; io2 = this.getElementsByTagName('b')[0].style; io.display='inline'; io2.display='none'; setTimeout(function(){io.display='none' ; io2.display='inline' ;}, 1000); "><b>download</b>  <img  style="display:none;" src='http://www.crh.noaa.gov/css/default/images/nws_logo.jpg' /></a>
    </body>
    </html>
    Last edited by rnd me; 05-22-2008 at 11:10 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •