jquery snippet to dump position info and outline with color borders an element and its parents

colorParents.js

//*debug layout *//
function randomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }

    //The .offset() the current position of an element relative to the document

function colorParents(startelt, on) {
    if (on) {
        $(startelt).parents().each(function (ind, elt) {
            var elt$ = $(elt);
            elt$.data('oldborder', elt$).css('border');
            elt$.css("border", "5px solid " + randomColor());
            elt$.find('.posinfo').remove();
            var msg = '<p class="posinfo">' +
                elt.tagName + "#" + elt.id +
                ' offsetTop:' + elt.offsetTop +
                ' scrollTop:' + elt.scrollTop +
                ' offset().top:' + elt$.offset().top + "</p>";
            elt$.prepend(msg);
            elt$.append(msg);
        });
    }
    else
    {
        var oldv = $(startelt).data('oldborder');
        $(startelt).css("border", oldv);
        $(startelt).find('.posinfo').remove();
    }
}

function dumpParents(item){
    $(item).parents().andSelf().each(function (ind, elt) {
        console.log(elt.tagName.toLowerCase() +
                    (elt.id ? ("#" + elt.id) : "") +
                    (elt.className ? ("." + elt.className) : "") +
                    ' offsetTop:' + elt.offsetTop +
                    ' scrollTop:' + elt.scrollTop +
                    " offsetTop:" + $(elt).offset().top);
        });
}