OnClick not working in chrome

Question

I searched a lot for an answer, but I didn't understand how to fix this...

So I have a landing page and I want to add an arrow thats point where it download the file (in chrome its button left).

For the arrow i used this code: http://jsfiddle.net/hY2Ce/4/

The problem is that its works great in safari but on chrome it doesn't show the arrow...

My code: http://jsfiddle.net/zP5Km/

If you need more code just tell me...

Thanks a lot!

Javascript

navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    return M;
})();
// http://stackoverflow.com/questions/2400935/browser-detection-in-javascript#2401861
//console.log(navigator.sayswho);

function auK(auy) {
    $(auy).fadeIn(750, function () {
        setTimeout(function () {
            $(auy).fadeOut(1000);
        }, 10000);
    });
}

function download() {
    if (navigator.sayswho[0].toLowerCase() == 'chrome') {
      auK('#arrow-chrome');

    }
    if ((navigator.sayswho[0].toLowerCase() == 'msie') && (navigator.sayswho[1] == 9.0)) {
      auK('#arrow-ie');

    }
    if (navigator.sayswho[0].toLowerCase() == 'safari' && (navigator.platform.toUpperCase().indexOf('MAC')>=0) ) {
      auK('#arrow-safari-mac');

    }
}

HTML

<a href="http://www.example.com/test.exe" class="top-download-button" onclick="download()" >
  <img class="a" src="img/download-button.png" alt="Download">
  <img class="b" src="img/download-button-hover.png" alt="Download" >
</a>

<div id="arrow-chrome"></div>
<div id="arrow-ie"></div>
<div id="arrow-safari-mac"></div>

CSS

#arrow-chrome, #arrow-ie, #arrow-safari-mac {
    position: fixed;
    display: none;
    z-index: 10;
    height: 309px;
    width: 186px;
}

#arrow-chrome {
    bottom: 10px;
    left: 20px;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_down.png") no-repeat scroll center center transparent;
}

#arrow-ie {
    bottom: 10px;
    left: 50%;
    margin-left: -140px;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_down.png") no-repeat scroll center center transparent;
}

#arrow-safari-mac {
    top: 10px;
    right: 10px;
    z-index: 100 !important;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_up.png") no-repeat scroll center center transparent;
}

html,body {
    width:100%;
    height:100%;
}

Just paste the code, hilight/select it, and press ctrl+k. I thank you for posting a link anyway. on load, the console writes two errors: GET http://fiddle.jshell.net/_display/img/download-button.png 404 (Not Found) fiddle.jshell.net/:89 GET http://fiddle.jshell.net/_display/img/download-button-hover.png 404 (Not Found) fiddle.jshell.net/:89 — user2350838, Jun 29 '13 at 14:48
yeah i dont want to upload all the code here... if you have time send me Email to 22diabolo@gmail.com and i will send you all the files — user535351, Jun 29 '13 at 14:50
i know the arrow demo works great in chrome but when i put it on its stoped working :( — user535351, Jun 29 '13 at 14:54
I've added your code to your post (look at your post after it's out of the review queue to see how you can add it). — Sumurai8, Jun 29 '13 at 14:58
@user535351 On StackOverflow, other users can edit your posts. If the user doesn't have enough reputation (like me), the edit will be put in a review queue before it is visible, so that other users with enough reputation can accept or deny the edit. The edit is now visible. If you click 'edit' under your post, you can see the markup of your post. — Sumurai8, Jun 29 '13 at 15:13

score 0 · Answer 1 · answered Jun 29 '13 at 14:55

0

Try this code:

    <a class="top-download-button" onclick="download(); window.location='test.exe';" >
<img class="a" src="img/download-button.png" alt="Download">
<img class="b" src="img/download-button-hover.png" alt="Download" >
</a>

answered Jun 29 '13 at 14:55

saleem

21
2

with this code i cant even press the button to download in chrome... but its still works in safari – user535351 Jun 29 '13 at 15:01
then i got the right solution for u, add iframe, keep it hidden with no source, and in onclick, do this: onclick="download(); document.getElementById('iframeId').src='http://www.example.com/test.exe';" – saleem Jun 29 '13 at 15:23

OnClick not working in chrome

1 Answers1