Results 1 to 8 of 8

Thread: Need help with dynamic download button that uses fading

  1. #1
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need help with dynamic download button that uses fading

    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!
    Last edited by james438; 06-30-2013 at 03:24 AM. Reason: format

  2. #2
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,696
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Could you elaborate a little more on your last paragraph?
    To choose the lesser of two evils is still to choose evil. My personal site

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Jul 2013
    Location
    Romania
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 .

Similar Threads

  1. Download button
    By santaClara in forum Looking for such a script or service
    Replies: 1
    Last Post: 07-11-2010, 10:07 PM
  2. Thickbox Download Button
    By pinyon in forum JavaScript
    Replies: 13
    Last Post: 07-14-2009, 04:20 PM
  3. download button script
    By krkalaf in forum JavaScript
    Replies: 3
    Last Post: 04-15-2008, 07:48 PM
  4. Popup File download window that closes when download button clicked
    By amccann in forum Looking for such a script or service
    Replies: 5
    Last Post: 10-27-2007, 01:37 PM
  5. Code for download button
    By dbldee in forum HTML
    Replies: 1
    Last Post: 10-19-2005, 02:58 PM

Bookmarks

Posting Permissions

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