Auto-expandable code block when hovering. Drupal-ready.

autoexpandcode

// Effect that I liked from http://gsgd.co.uk/sandbox/jquery/easing/

$.easing.easeOutBack = function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
};

  // Credit: http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery
  $.fn.textWidth = function(){
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>'
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
  };


  Drupal.behaviors.drupalmotion = {

    attach: function (context, settings) {

      $('body', context).once('drupalmotion', function () {       

        $('pre code', context).each(function(){
          $pre = $(this).parent();
          var contentwidth = $(this).textWidth() + 25;  // 25px to compensate padding
          var blockwidth = $(this).width() + 25;
          if (contentwidth > blockwidth) {
            $pre.hover(function() {
              $(this).animate({ width: contentwidth}, 250, 'easeOutBack'); },
                  function() { $(this).animate({ width: blockwidth }, 250);
            });
          }
        });

      });
    }
  };