Jessica Jessica - 6 months ago 16
Javascript Question

Make div go past parent border

I have a vertical range slider, and I'm using

transform translateY
to adjust the cursor's position, as opposed to
top
. There's just one slight thing that's not working as I want it to.

When you bring the cursor all the way up, it doesn't go past the sliders border; but when bring the cursor down, it goes half the cursors height past the sliders border.

How can I make the cursor go half the cursors height pass the top sliders border, just like it does at the bottom?

Here's the relevant code at line #43.

hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - cursorRadius) + 'px)';


I'm not looking for JQuery answers, nor am I looking for
html's
input range.

JSFiddle





var luminenceBarWrapper = document.getElementById('luminenceBarWrapper'),
hsv_barBGLayer = document.getElementById('bar-bg'),
hsv_barcursor = document.getElementById('hsv-barcursor'),
hsv_barCursors = document.getElementById('hsv-barcursors'),

hsv_barHeight = hsv_barCursors.offsetHeight,
cursorRadius = hsv_barcursor.offsetHeight / 2,
startPoint,
currentTarget,
myColor = new Colors();

// Create Event Functions
var hsvDown = function(e) { // mouseDown callback
e.preventDefault();

if (e.target === hsv_barcursor) currentTarget = e.target.parentNode;
else if (e.target === hsv_barCursors) currentTarget = e.target;
else return;

startPoint = getOrigin(currentTarget);

window.addEventListener('mousemove', hsvMove);
hsvMove(e);
startRender();
},
hsvMove = function(e) { // mouseMove callback
myColor.setColor({
v: (hsv_barHeight - (e.clientY - startPoint.top)) / hsv_barHeight * 100
}, 'hsv');
};

// Initial Rendering
doRender(myColor.colors);

// Adde Events To Objects
luminenceBarWrapper.addEventListener('mousedown', hsvDown);
window.addEventListener('mouseup', function() {
window.removeEventListener('mousemove', hsvMove);
stopRender();
});

function doRender(color) {
hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - cursorRadius) + 'px)';
}

var renderTimer,
startRender = function(oneTime) {
renderTimer = window.setInterval(function() {
doRender(myColor.colors);
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
},
stopRender = function() {
window.clearInterval(renderTimer);
};

function getOrigin(elm) {
var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
top: 0,
left: 0
},
doc = elm && elm.ownerDocument,
body = doc.body,
win = doc.defaultView || doc.parentWindow || window,
docElem = doc.documentElement || body.parentNode,
clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
clientLeft = docElem.clientLeft || body.clientLeft || 0;

return {
left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
};
}

body {
position: absolute;
}
#bar-bg {
width: 15px;
height: 500px;
background-color: greenyellow;
}
#hsv-barcursors {
position: absolute;
right: -7.5px;
width: 30px;
top: 0;
height: 500px;
overflow: hidden;
cursor: pointer;
}
#hsv-barcursor {
position: absolute;
right: 7.5px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid black;
margin-bottom: 5px;
}

<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>

<div id="luminenceBarWrapper">
<div id="bar-bg"></div>
<div id="hsv-barcursors" id="hsv_cursors">
<div id="hsv-barcursor"></div>
</div>
</div>




Answer

You need to remove the circle's radius after the other calculations in the doRender() function.

This is because when the value of color.RND.hsv.v is zero, the numerator becomes zero and the entire value for Y is limited to zero (i.e. cannot go to a negative Y value)

See sample code:

function doRender(color) {     
    var transY = ((100 - color.RND.hsv.v) / 100 * (hsv_barHeight)) - cursorRadius;
    hsv_barcursor.style.transform = 'translateY(' + transY + 'px)';
}

Updated fiddle

Comments