Ajax a link with throbber

Script by mplungjan 2013 - feel free to use, but leave the credit, please

by Michel Plungjan

HTML

<ul class="linkcontainer">
    <li><span class="bullet">•</span> <a href="url1.ext?item=item1" class="save">Save item 1</a></li>
    <li><span class="bullet">•</span> <a href="url1.ext?item=item2" class="save">Save item 2</a></li>
    <li><span class="bullet">•</span> <a href="url1.ext?item=item3" class="save">Save item 3</a></li>
</ul>
    <div id="target"></div>    
<div id="throbber"><img src="http://plungjan.name/images/pacman.gif"/></div>

CSS

#throbber { position:absolute; display:none}
.linkcontainer { list-style: none  }

JavaScript

/* Script by mplungjan 2013 - feel free to use, but leave the credit, please */
$(function() {
  $(".save").on("click",function(e) {
    e.preventDefault(); // do not follow the link

    if ($("#throbber").is(":visible")) { 
        // do not allow a click while the download of another link is running
        return; // leave the function
    }
    
    $("#target").empty(); // clear the feedback

    // Fluff - but fun
    var $ppos = $(this).parent().position();
    var $throbber= $(this).parent().find("span");
    $throbber.animate({opacity:0},1200);
    $("#throbber")
    .css({"top":$ppos.top,"left":$ppos.left-50})
      .show()
      .animate({'left' : "+200"},3000);      
    // end of fluff
    
    $.post('/echo/html/',{ html: "<p>Saved "+this.href.split("item=")[1]+"</p>", delay: 3}, function(data) {
      $("#target").html(data); 
      $("#throbber").hide();
      $throbber.animate({opacity:1},10);
    });
  });  
});      

























/* by: thinkingstiff.com license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28096782-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
$(function() {
  $("body").prepend(
 '<a href="http://plungjan.name" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: grey;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image:...