What will help you Abracompteur or a new way of navigating the review

To begin with, that the idea somehow came to my head when I was reading a post on the topic of display reviews. Naturally the topic came about that when the tree structure the location of the answers, seek the right, are compressed and become unreadable.
Then I decided that I need to move the left edge to the left to narrow reviews become wider as it looks? It is not very clear. Okay! I wrote a bookmarklet that you all can see for yourself! It is created specially for Habra, so you can use it all the time.

the

Bookmarklet

For those who do not know what a bookmarklet is, read statue Wikipedia.
Open bookmarklet.txt, copy the string, create a new entry in the tabs row to insert in the "URL"field
the

Javascript

If you are worried about the theft of the cookies, you can make a bookmarklet from the code. By the way, very convenient to make bookmarklets using the JS minifier.
if(!commentsPatched){
var commentsPatched = true;

var comments = $('commentsdiv').getElementsByClassName('comment_item');
var commentsLength = comments.length;
for(var i=0;i<commentsLength; i++){
var margin= parseInt(comments[i].style.marginLeft);
if(margin>0){

var toLeft = document.createElement('img');
toLeft.setAttribute('src','http://habr.rumkin.ru/images/to-left.gif');
toLeft.setAttribute('style','cursor:pointer;cursor:hand;');
toLeft.setAttribute('onclick','commentToLeft(this);');
comments[i].appendChild(toLeft);

var toRight= document.createElement('img');
toRight.setAttribute('src','http://habr.rumkin.ru/images/to-right.gif');
toRight.setAttribute('style','cursor:pointer;cursor:hand;');
toRight.setAttribute('onclick','commentToRight(this);');
comments[i].appendChild(toRight);
}
}

alert('Patched');
}

commentToLeft function(obj){
var boundElement = obj.parentNode.childNodes[1].firstChild;
var bound = getBounds(boundElement);
if(bound.left > 38){
var commentsDiv = $('commentsdiv');
var margin= parseInt(commentsDiv.style.marginLeft);
if(!margin) margin = 0;
var parentMargin = parseInt(obj.parentNode.style.marginLeft);
if(!parentMargin) parentMargin = 0;
commentsDiv.style.marginLeft = (-1*parentMargin)+'px';
}

}

commentToRight function(obj){
var commentsDiv = $('commentsdiv');
var margin= parseInt(commentsDiv.style.marginLeft);
if(!margin) margin = 0;

var parentMargin = parseInt(obj.parentNode.style.marginLeft);
if(!parentMargin) parentMargin = 0;
if(margin<0){
if((-1*parentMargin) > margin){
commentsDiv.style.marginLeft = (margin+30)+'px';
} else {
commentsDiv.style.marginLeft = 0 +'px';
}
}
}
function getBounds(element)
{
var left = element.offsetLeft;
var top = element.offsetTop;
for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
{
left += parent.offsetLeft;
top += parent.offsetTop;
}
return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

the

note

the

This is the first version, so you will have to wait until page load before turning on Abracompteur! the

• Very good stairs reviews for testing.
the
• Tested in FF 3.0, Opera 9.5 and Safari
the
• uses prototype.js version 1.4 installed on Habre

Article based on information from habrahabr.ru