Looking to Add Bottom Margin for Selection Box
I have attempted the following CSS:
#Selection { margin-bottom:23px; }
Unfortunately, this method did not work for me. Is there a way to achieve this using JavaScript or jQuery?
View Example on JsFiddle
Snippet Provided Below:
var startX = 0,
startY = 0,
started = false;
$(document).mousedown(function(e) {
e.preventDefault();
startX = e.pageX;
startY = e.pageY;
started = true;
$('#selection').css({
'top': startY,
'left': startX
});
});
$(document).mousemove(function(e) {
if (started) {
$('#selection').css({
'left': startX > e.pageX ? e.pageX : startX,
'top': startY > e.pageY ? e.pageY : startY
});
$('#selection').css({
'height': Math.abs(e.pageY - startY),
'width': Math.abs(e.pageX - startX)
});
}
});
$(document).mouseup(function() {
$('#selection').css({
'top': 0,
'left': 0,
'height': 0,
'width': 0
});
started = false;
startX = 0;
startY = 0;
});
$(document).on('contextmenu', function() {
return false;
});body {
background:url(http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/win7-desktop-bg.jpg) no-repeat bottom center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
}
#container {
position: absolute;
width:100%;
height:90%;
top:0px;
}
#selection {
position: absolute;
background-color: rgba(0, 0, 0, 0.25);
-webkit-box-shadow:inset 0px 0px 0px 2px #f00;
-moz-box-shadow:inset 0px 0px 0px 2px #f00;
-ms-box-shadow:inset 0px 0px 0px 2px #f00;
-o-box-shadow:inset 0px 0px 0px 2px #f00;
box-shadow:inset 0px 0px 0px 2px #f00;
}
#bottom {
position:fixed;
background-color: rgba(255, 0, 0, 0.5);
width:100%;
height:10%;
text-align:center;
bottom:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="selection"></div>
</div>
<div id="bottom">
<font size="+3" color="lime">don't want selection box here!</font>
</div>