// Slightly adapted from http://ignorethecode.net/blog/2010/04/20/footnotes/ // this script requires jQuery $(document).ready(function() { Footnotes.setup(); }); var Footnotes = { footnotetimeout: false, setup: function() { var footnotelinks = $("a[rel='footnote']") footnotelinks.unbind('mouseover',Footnotes.footnoteover); footnotelinks.unbind('mouseout',Footnotes.footnoteoout); footnotelinks.bind('mouseover',Footnotes.footnoteover); footnotelinks.bind('mouseout',Footnotes.footnoteoout); }, footnoteover: function() { clearTimeout(Footnotes.footnotetimeout); $('#footnotediv').stop(); $('#footnotediv').remove(); var id = $(this).attr('href').substr(1); var position = $(this).offset(); var div = $(document.createElement('div')); div.attr('id','footnotediv'); div.css('position','absolute'); div.bind('mouseover',Footnotes.divover); div.bind('mouseout',Footnotes.footnoteoout); var el = document.getElementById(id); div.html($(el).html()); $(document.body).append(div); var left = position.left; if(left + 420 > $(window).width() + $(window).scrollLeft()) left = $(window).width() - 420 + $(window).scrollLeft(); var top = position.top+20; if(top + div.height() > $(window).height() + $(window).scrollTop()) top = position.top - div.height() - 15; div.css({ left:left, top:top, opacity:0.9 }); }, footnoteoout: function() { Footnotes.footnotetimeout = setTimeout(function() { $('#footnotediv').animate({ opacity: 0 }, 600, function() { $('#footnotediv').remove(); }); },100); }, divover: function() { clearTimeout(Footnotes.footnotetimeout); $('#footnotediv').stop(); $('#footnotediv').css({ opacity: 0.9 }); } }