This is the code for a left-right slider comparison.
Can anyone help me make it work from top to bottom?
I have it working going from left to right but I need it to go from top to bottom.
I tried to make some changes, but with no result. This is a slider from Codepen.
// Call & init
$(document).ready(function() {
$('.ba-slider').each(function() {
var cur = $(this);
// Adjust the slider
var width = cur.width() + 'px';
cur.find('.resize img').css('width', width);
// Bind dragging events
drags(cur.find('.handle'), cur.find('.resize'), cur);
});
});
// Update sliders on resize.
// Because we all do this: i.imgur.com/YkbaV.gif
$(window).resize(function() {
$('.ba-slider').each(function() {
var cur = $(this);
var width = cur.width() + 'px';
cur.find('.resize img').css('width', width);
});
});
function drags(dragElement, resizeElement, container) {
// Initialize the dragging event on mousedown.
dragElement.on('mousedown touchstart', function(e) {
dragElement.addClass('draggable');
resizeElement.addClass('resizable');
// Check if it's a mouse or touch event and pass along the correct value
var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
// Get the initial position
var dragWidth = dragElement.outerWidth(),
posX = dragElement.offset().left + dragWidth - startX,
containerOffset = container.offset().left,
containerWidth = container.outerWidth();
// Set limits
var minLeft = containerOffset + 10;
var maxLeft = containerOffset + containerWidth - dragWidth - 10;
// Calculate the dragging distance on mousemove.
dragElement.parents().on("mousemove touchmove", function(e) {
// Check if it's a mouse or touch event and pass along the correct value
var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
var leftValue = moveX + posX - dragWidth;
// Prevent going off limits
if (leftValue < minLeft) {
leftValue = minLeft;
} else if (leftValue > maxLeft) {
leftValue = maxLeft;
}
// Translate the handle's left value to masked divs width.
var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';
// Set the new values for the slider and the handle.
// Bind mouseup events to stop dragging.
$('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function() {
$(this).removeClass('draggable');
resizeElement.removeClass('resizable');
});
$('.resizable').css('width', widthValue);
}).on('mouseup touchend touchcancel', function() {
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
e.preventDefault();
}).on('mouseup touchend touchcancel', function(e) {
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
}.ba-slider {
position: relative;
overflow: hidden;
}
.ba-slider img {
width: 100%;
display: block;
}
.resize {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
}
.handle {
/* Thin line seperator */
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
margin-left: -2px;
background: rgba(0, 0, 0, 0.5);
cursor: ew-resize;
}
.handle:after {
/* Big orange knob */
position: absolute;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
content: '\21d4';
color: white;
font-weight: bold;
font-size: 36px;
text-align: center;
line-height: 64px;
background: #ffb800;
/* @orange */
border: 1px solid #e6a600;
/* darken(@orange, 5%) */
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #ffd466;
/* lighten(@orange, 20%)*/
}
.draggable:after {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height: 48px;
font-size: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ba-slider">
<img src="https://i.imgur.com/9JWNlfH.jpg" alt="">
<div class="resize">
<img src="https://i.imgur.com/GS86OpZ.jpg" alt="">
</div>
<span class="handle"></span>
</div>js +css-code is on codepen..I could not load it here( sorry)
I shouldn't really have done this because it was a coding change not a coding issue, but I was interested in the how to do it.
I have changed all the width calculations to heights and all the positions from left to top. I also made similar adjustments to the CSS.
// Call & init
$(document).ready(function(){
$('.ba-slider').each(function(){
var cur = $(this);
// Adjust the slider
var height = cur.height()+'px';
cur.find('.resize img').css('height', height);
// Bind dragging events
drags(cur.find('.handle'), cur.find('.resize'), cur);
});
});
// Update sliders on resize.
// Because we all do this: i.imgur.com/YkbaV.gif
$(window).resize(function(){
$('.ba-slider').each(function(){
var cur = $(this);
var height = cur.height()+'px';
cur.find('.resize img').css('height', height);
});
});
function drags(dragElement, resizeElement, container) {
// Initialize the dragging event on mousedown.
dragElement.on('mousedown touchstart', function(e) {
dragElement.addClass('draggable');
resizeElement.addClass('resizable');
// Check if it's a mouse or touch event and pass along the correct value
var startY = (e.pageY) ? e.pageY : e.originalEvent.touches[0].pageY;
// Get the initial position
var dragHeight = dragElement.outerHeight(),
posY = dragElement.offset().top + dragHeight - startY,
containerOffset = container.offset().top,
containerHeight = container.outerHeight();
// Set limits
minTop = containerOffset + 10;
maxTop = containerOffset + containerHeight - dragHeight - 10;
// Calculate the dragging distance on mousemove.
dragElement.parents().on("mousemove touchmove", function(e) {
// Check if it's a mouse or touch event and pass along the correct value
var moveY = (e.pageY) ? e.pageY : e.originalEvent.touches[0].pageY;
topValue = moveY + posY - dragHeight;
// Prevent going off limits
if ( topValue < minTop) {
topValue = minTop;
} else if (topValue > maxTop) {
topValue = maxTop;
}
// Translate the handle's left value to masked divs height.
heightValue = (topValue + dragHeight/2 - containerOffset)*100/containerHeight+'%';
// Set the new values for the slider and the handle.
// Bind mouseup events to stop dragging.
$('.draggable').css('top', heightValue).on('mouseup touchend touchcancel', function () {
$(this).removeClass('draggable');
resizeElement.removeClass('resizable');
});
$('.resizable').css('height', heightValue);
}).on('mouseup touchend touchcancel', function(){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
e.preventDefault();
}).on('mouseup touchend touchcancel', function(e){
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
}.ba-slider {
position: relative;
overflow: hidden;
}
.ba-slider img {
width: 100%;
display:block;
}
.resize {
position: absolute;
top:0;
left: 0;
height: 50%;
width: 100%;
overflow: hidden;
}
.handle { /* Thin line seperator */
position:absolute;
left:0;
top:50%;
bottom:0;
width:100%;
height:4px;
margin-left:-2px;
background: rgba(0,0,0,.5);
cursor: ns-resize;
}
.handle:after { /* Big orange knob */
position: absolute;
top: 50%;
left:50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
content:'\21D5';
color:white;
font-weight:bold;
font-size:36px;
text-align:center;
line-height:64px;
background: #ffb800; /* @orange */
border:1px solid #e6a600; /* darken(@orange, 5%) */
border-radius: 50%;
transition:all 0.3s ease;
box-shadow:
0 2px 6px rgba(0,0,0,.3),
inset 0 2px 0 rgba(255,255,255,.5),
inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/
}
.draggable:after {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height:48px;
font-size:30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ba-slider">
<img src="https://placeimg.com/640/480/animals" alt="">
<div class="resize">
<img src="https://placeimg.com/640/480/people" alt="">
</div>
<span class="handle"></span>
</div>