Bookmark and Share

Thursday, March 22, 2012

Jquery : adding a question to every download link

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:

image

after a click:

image

After the click on the checkbox the download starts using an iframe created on the fly:

image

and the download:

image

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 fix
  37:                     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>