Need help with dynamic download button that uses fading

**tio777** · 06-30-2013, 03:17 AM

I have been trying to get a button working on my webpage.

Here is what I have so far...

Code:

<head>
<style>
    #container{
        display: block;
        position: absolute;
        height: 61px;
        width: 373px;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
    }
    .customButton{
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    #myButton1{
        background-image:url('http://imageurl.com/PDownloadAllFiles1.png');  
    }
    #myButton2{
        background-image:url('http://imageurl.com/PDownloadAllFiles2.png'); 
        opacity:0;
 	-webkit-transition: opacity 0.5s ease-in-out;
 	-moz-transition: opacity 0.5s ease-in-out;
 	-o-transition: opacity 0.5s ease-in-out;
 	transition: opacity 0.5s ease-in-out;
    }
    #myButton2:hover{
        opacity: 1;
    }
    #myButton3{
        visibility: hidden;
        background-image:url('http://imageurl.com/downloading.gif');
    }


</style>

<script>
function onContainerClick(){
    document.getElementById('myButton3').style.visibility='visible';
}
</script>
</head>
<body>
<div id='container' onclick='onContainerClick();'>
    <div id='myButton1' class='customButton'></div>
    <div id='myButton2' class='customButton'></div>
    <div id='myButton3' class='customButton'></div>
</div>
</body>
</html>

Where I'm having trouble is that when I click on the "myButton2" div I want an href that will download a file. I can do this by adding my href to the div code there. Only when it is downloading the file I also want it to turn into myButton3 as well. So if I add the href in the div I can't have it turn into myButton3.

Help!

**james438** · 06-30-2013, 03:41 AM

Could you elaborate a little more on your last paragraph?

**jscheuer1** · 06-30-2013, 05:08 AM

Yes elaborate. What kind of href would it be? I mean you cannot add an href to a div. You could add an a tag with an href. If you do, there's no reason why the image cannot change when clicked, that is as long as the href is to a file that will download, rather than to another page where the download will happen. If you do change the page, well obviously you cannot change the button. But you could make that other page look like this page only with the myButton3 button already visible.

**tio777** · 06-30-2013, 10:02 PM

Well... I did add an href to the myButton2 div and it worked. The href was a file to download. It worked fine only after I clicked it and the href file started downloading the button just stayed as the myButton2 image rather than changing to myButton3 image.

I don't know how to add a tag with an href and have it work. Some help would be appreciated.

Ultimately... all I want to do is have this button be clicked, download a file and then (after it's clicked to download the file) it changes to a 3rd image and stays that way.

**Beverleyh** · 06-30-2013, 11:28 PM

and then (after it's clicked to download the file) it changes to a 3rd image and stays that way

Stays that way (as the 3rd image) for how long? Just while downloading, while you're still on that page? (look into "a:active" in CSS ) or always? (you could use a cookie to 'permanently' change the state of the image)

**tio777** · 06-30-2013, 11:48 PM

While you're still on that page.

I don't want to use a cookie. It's just a simple download button. If they refresh the page they can click it again and download it again.

**Beverleyh** · 07-01-2013, 12:05 AM

I think you're over-complicating the markup. You really just need one 'button' element (ideally just an <a> tag dressed-up as a button) but with 3 states that you can change with CSS. Here's a tutorial: http://inspectelement.com/tutorials/...g-css-sprites/

**css-mfc-pro** · 07-04-2013, 12:58 PM

you can create a clickable div element using this code:

Code:

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

Regarding your issue posted above... there is a better and faster method to create your html-css "widget" .
If what I was able to understand you want an button when clicked to show other two buttons for downloading a file and for each of them a url to be displayed ...
Correct me if I'm wrong.
It's possible? Yes!
Using only html-css and a 3-4 lines of javascript .

Thread: Need help with dynamic download button that uses fading

Thread Tools

Search Thread

Need help with dynamic download button that uses fading

Similar Threads

Download button

Thickbox Download Button

download button script

Popup File download window that closes when download button clicked

Code for download button

Bookmarks

Bookmarks

Posting Permissions