Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple javascript function to draw rectangles around an element to focus on it
var allrect, lrect, rrect, urect, brect, previousOverflow;
//Dividing divs. Left and right are biggest
//||--||
//||oo||
//||oo||
//||--||
function bound(id, margin){
var rect = getBoundingRect(id);
lrect = drawRect(0,0,rect.left - margin,window.innerHeight);
rrect = drawRect(rect.right + margin,0,window.innerWidth - rect.right,window.innerHeight);
urect = drawRect(rect.left - margin,0,rect.width + margin*2,rect.top - margin);
brect = drawRect(rect.left - margin,rect.bottom + margin,rect.width + margin*2, window.innerHeight - rect.bottom);
previousOverflow = $("body").css("overflow");
console.log(previousOverflow);
$("body").css({overflow: "hidden"});
$("body").append(lrect);
$("body").append(brect);
$("body").append(urect);
$("body").append(rrect);
}
function unbound(){
lrect.remove();
rrect.remove();
urect.remove();
brect.remove();
$("body").css({overflow: previousOverflow});
}
/**
*
* @param {type} id
* @returns {getRect.rect}
*/
function getBoundingRect(id){
var element = document.getElementById(id);
var rect = element.getBoundingClientRect();
return rect;
}
function logRect(id){
bound(id, 20);
console.log(getBoundingRect(id));
}
function drawRect(x, y, w, h){
var $div = $("<div>");
$div.css(createRectStyle(x,y,w,h));
return $div;
}
function createRectStyle(x, y, w, h){
return {
"background-color": "#999",
position: "absolute",
"z-index": 10000,
top: y + "px",
left: x + "px",
width: w + "px",
height: h + "px",
opacity: 0.5
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment