Snippet to help debuging scroll related scripts

RulersSnippet.js

Ruler = function (label, top, color, $container){
    return $('<p class="ruler">'+label+'</p>').css({
      "position": "absolute",
      "width": "100%",
      "margin": "0",
      "padding": "0",
      "border-top": "2px solid "+color,
      "top": top,
      "background": "rgba(255,255,255,.6)"
    }).appendTo($container);
}

// DEBUG
$container = timeline.$container;

timeline.$dates.each(function(){
    offsetTop = $(this).offset().top-$($container).offset().top+$($container).scrollTop();
    label = 'data-id = '+$(this).attr("data-id")+', offesetTop= '+offsetTop+'px';
    $ruler = new Ruler(label, offsetTop, "red", $container);
});
"";

// /DEBUG

printScroll = function(){
   new Ruler("scrollTop:"+$($container).scrollTop()+"px", $($container).scrollTop(), "blue", $container);
   "";
}
clearRulers = function(){
    $('.ruler').remove();
    "";
}