Log in

View Full Version : 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...


<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/create-a-button-with-hover-and-active-states-using-css-sprites/
css-mfc-pro
07-04-2013, 12:58 PM
you can create a clickable div element using this 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 .