Skip to content

Instantly share code, notes, and snippets.

@shikhalev shikhalev/body.css
Last active Dec 21, 2015

Embed
What would you like to do?
body {
position : absolute;
top : 0px;
bottom : 0px;
left : 0px;
right : 0px;
padding : 0px;
margin : 0px;
}
body {
position : absolute;
top : 0px;
bottom : 0px;
left : 0px;
right : 0px;
padding : 0px;
margin : 0px;
}
#toolbar {
position : absolute;
left : 0px;
right : 0px;
top : 0px;
height : 32px;
background-color : silver;
}
#main {
position : absolute;
left : 20%;
right : 20%;
top : 32px;
bottom : 64px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Selection demo</title>
<link rel="stylesheet" href="selection.css">
<script src="selection.js"></script>
</head>
<body>
<div id="toolbar"></div>
<div id="main" contenteditable>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit metus,
pulvinar vitae faucibus eget, imperdiet eu metus. Pellentesque hendrerit tortor
dolor, at posuere urna sodales et. Vivamus rutrum nulla ultricies sodales
posuere. Fusce tempus vitae magna quis mollis. Donec vehicula eget massa a
posuere. Suspendisse tincidunt, eros eu condimentum rutrum, nunc leo tristique
eros, et lacinia justo massa sed lacus. Sed dignissim lacinia lacinia. Nulla sed
lobortis odio. Etiam vel eros cursus, suscipit felis in, ultricies turpis. Proin
feugiat blandit neque eget varius. Sed vel libero lorem. Vestibulum viverra
purus eros. Nullam adipiscing magna eu libero pharetra, suscipit pellentesque
augue condimentum.</p>
<p>Etiam dapibus nisl non odio congue mollis. Nulla ut molestie massa. Integer
sodales porta sapien et posuere. Suspendisse nec pretium lacus. Etiam quis neque
vel sapien venenatis pretium tincidunt ut lacus. Ut id pulvinar orci. Etiam
bibendum pharetra erat. Pellentesque at eros lacus.</p>
<p>Nam convallis luctus ligula. Sed ac lacus tempor, feugiat mi at, consectetur
felis. Nulla laoreet, massa non fringilla congue, libero felis mollis nulla, id
dignissim velit tellus sit amet massa. Maecenas ante dui, tincidunt vitae metus
in, gravida eleifend purus. Sed eget mi vel odio bibendum aliquam vel sit amet
dui. Ut nisi nisl, aliquet ut molestie suscipit, dignissim vitae erat. Phasellus
gravida rutrum consequat.</p>
</div>
</body>
</html>
var saved = null;
function storeSelection(e) {
var main = document.getElementById('main');
var current = e.target;
var compare = main.compareDocumentPosition(current);
if (compare != 0 && (compare & 16) == 0) {
var range = window.getSelection().getRangeAt(0);
saved = {
startContainer : range.startContainer,
startOffset : range.startOffset,
endContainer : range.endContainer,
endOffset : range.endOffset
};
}
}
function restoreSelection(e) {
var main = document.getElementById('main');
var current = e.target;
var compare = main.compareDocumentPosition(current);
if (saved && compare != 0 && (compare & 16) == 0) {
var range = document.createRange();
range.setStart(saved.startContainer, saved.startOffset);
range.setEnd(saved.endContainer, saved.endOffset);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
window.addEventListener('load', function(e) {
var body = document.body;
body.addEventListener('mousedown', storeSelection, false);
body.addEventListener('mouseup', restoreSelection, false);
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.