If you have a lot of links to downloads in your web site and you need to ask to the user why he is downloading the file/program… here is a simple jquery solution.
It searches for every link with a particular class and overrides the standard click showing a panel under the link with a question, here is an example:
after a click:
After the click on the checkbox the download starts using an iframe created on the fly:
and the download:
Here is the Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>1:2:3: <script>4:5: $(document).ready(function()6: {7: checklinks();8: }9: );10:11: function checklinks()12: {13: $('.confirmMe').click(function (e)14: {15: if ($(e.srcElement).is('a') || $(e.srcElement).parent().is('a')16: || ($.browser.mozilla && $(e.currentTarget).is('a'))17: )18: {19: var templateMessage = "<div class='confirmDownload'><br/><div style='width:200px;'>$QUESTION$</div><br/><span style='width:100px;'>$OPTION1$</span><input type='checkbox' name='down' value='OPTION1' ><span style='width:100px;'>$OPTION2$</span><input type='checkbox' name='down' value='OPTION2'></span>";20:21: var dwnMessage = templateMessage.replace('$QUESTION$', 'Download reason:');22: dwnMessage = dwnMessage.replace('$OPTION1$', 'I need to try it');23: dwnMessage = dwnMessage.replace('$OPTION2$', 'I bought it');24:25: $('.confirmDownload').remove()26:27: $(this).after(dwnMessage);28: $(this).parent().find('.confirmDownload input').click(function (e)29: {30: alert('clicked:' + $(e.srcElement).val() + ' downloading.....')31: $('.confirmDownload').hide('slow');32: var durl = $(this).parent().parent().find('.confirmMe').closest('a').attr('href') + '?REASON=' + $(e.srcElement).val();33: var stempid = 'tmpdwn' + (new Date()).getTime();34: $('body').append('<a id=' + stempid + ' href="' + durl + '"</a>')35:36: //ie fix37: if ($.browser.msie)38: document.location.href = durl;39: else {40: $('body').append('<iframe id="if' + stempid + '" src="about:blank" style="display:none;"></iframe>')41: setTimeout("$('.confirmDownload').remove();$('#if" + stempid + "').attr('src',$('#" + stempid + "').attr('href'));", 1000);42: }43: })44: e.stopPropagation();45: return false;46: }47: });48: }</script>
<body>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
</body>
</html>
Posts
No comments:
Post a Comment