Fiddle link
I am trying to make this circle in perspective(check fiddle link). I tried the css property but it shows unusual behaviour.
/*
using:
circular positioning code:
http://stackoverflow.com/a/10152437/1644202
point at:
http://pointat.idenations.com/api
depends on:
jquery
https://github.com/thomas-dotworx/jqrotate (pointat)
*/
function createFields() {
$('.field').remove();
var container = $('#container');
for(var i = 0; i < +$('input:text').val(); i++) {
$('<div/>', {
'class': 'field',
'text': i + 1,
}).appendTo(container);
}
}
function distributeFields(deg) {
deg = deg || 0;
var radius = 200;
var fields = $('.field:not([deleting])'), container = $('#container'),
width = container.width(), height = container.height(),
angle = deg || Math.PI*3.5, step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
initPointAt();
});
var timer = null,
timer2 = null;
$('#addone').click(function() {
// do not append to current, otherwise you see it moving through the container
$('.field').addClass('moveAni');
$('<div/>', {
'class': 'field',
'text': $('.field').length +1
})
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'})
.addClass('moveAni')
.appendTo('#container')
.pointat({
target: "#center",
defaultDirection: "down"
});
distributeFields();
// without css:
//$('.field').pointat("updateRotation");
// with css: for css move animation
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field').length);
});
$('#delone').click(function() {
$('#container .field:not([deleting]):last')
.attr('deleting', 'true')
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'
})
.fadeOut(400, function() {
$(this).remove();
});
// do distribiution as if the currently out-animating fields are gone allready
distributeFields();
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field:not([deleting])').length); // update yet
});
createFields();
distributeFields();
initPointAt();
function initPointAt() {
$('.field').pointat({
target: "#center",
defaultDirection: "down",
xCorrection: -20,
yCorrection: -20
});
}
body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }
.field {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.moveAni {
transition: left 400ms ease-out, top 400ms ease-out;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
Then i inserted an image tad inside container and tried to add field inside image tag.
I achieved this using three.js but don't want to do this in it because it takes too much time to load.
Wrap your container in another div you apply perspective to. The perspective must be applied to the parent, not to the element itself.
Updated Fiddle link : http://jsfiddle.net/w840vkbL/1/
#perspective {
perspective: 500px;
width: 150px;
}
#container {
transform: rotateY(40deg);
background: lightblue;
height: 150px;
}
<div id="perspective">
<div id="container">
<h3>SOME PERSPECTIVE CONTENT</h3>
</div>
</div>
Related
I understand that we need to use transform: rotate(ndeg); in order to rotate a specific element in CSS. In this case, I want to do it dynamically. Using jQuery, I want to rotate the box/container div when the user drags the handle (the red background) on n degrees as the user wishes. Is it possible in jQuery?
body {
padding: 50px;
}
.box_element {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
z-index: -1;
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
}
<body>
<div class="box_element">
THIS IS TEST
<div class="handle"></div>
</div>
</body>
Here you need to write few code to make it possible, try live code https://codepen.io/libin-prasanth/pen/xxxzbLg
var stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI;
function start(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x,
y;
center = {
x: l + w / 2,
y: t + h / 2
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return (active = true);
}
function rotate(e) {
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)");
}
function stop() {
angle += rotation;
return (active = false);
}
rot = document.getElementById("draggable");
rot.addEventListener("mousedown", start, false);
window.addEventListener("mousemove", function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
window.addEventListener("mouseup", function(event) {
event.preventDefault();
stop(event);
});
#draggable {
left: 50px;
top: 50px;
width: 100px;
height: 100px;
position: relative;
border: 1px solid #000;
}
#draggable:before{
content: "";
position: absolute;
bottom: -5px;
right: -5px;
width: 10px;
height: 10px;
background: #f00;
}
<div id="draggable">
</div>
You can make use of a css-variable and then change the value of the variable when clicked.
const box_element = document.getElementById('box_element');
const handle = document.getElementById('handle');
handle.addEventListener('click', function() {
let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg');
box_element.style.setProperty(
'--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg');
});
:root {
--rotate_deg: 0deg;
}
.box_element {
margin: 1em;
border: 1px solid black;
width: 100px;
height: 100px;
position: relative;
z-index: -1;
transform: rotate(var(--rotate_deg))
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
cursor: pointer;
}
<div class="box_element" id="box_element">
THIS IS TEST
<div class="handle" id="handle"></div>
</div>
I am trying to place the percentage total in the center of the colored progress bar but am struggling to do so.
I have tried placing the <p> tag within the different <div> tags but can't quite work it out.
Can anyone help?
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>
You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
right: 100 - $('.progress-wrap').data('progress-percent') + '%'
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100%;
text-align:center;
margin:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value alt text-center">25%</p>
</div>
You don't need positioning here. Simply put your .progress-value element into the wrapper and use the padding-left attribute to animate the percentage value as well. To center the value, you can i.e. use an offset and half of your total progress value: (progressTotal-15)/2
Here is the working example:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
paddingLeft: (progressTotal-15)/2
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value progress-size alt text-center">25%</p>
</div>
Please check, hope this will helpful form you
https://codepen.io/Thakur92411/pen/aRoEoa1
<div class="progress-wrap" data-progress-percent="25">
<div class="valuetext">25%</div>
<div class="progress-bar progress-value progress-size"></div>
</div>
I'm using a jQuery slideshow plugin but it doesn't have an option for autoplay. Currently, the only way to trigger the slides is by clicking the left and right arrows.
Anyone have any solutions? I did some research but couldn't find anyone who came up with a solution yet and the original developer doesn't appear to be coding anymore.
Below is the slider I'm using on codepen.
(function() {
var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
carouselContent = $(".carousel__content");
carouselIndex = 0;
carouselLength = carouselContent.children().length;
isAnimating = false;
itemWidth = 100 / carouselLength;
firstItem = $(carouselContent.children()[0]);
lastItem = $(carouselContent.children()[carouselLength - 1]);
firstClone = null;
lastClone = null;
carouselContent.css("width", carouselLength * 100 + "%");
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
$(".nav--left").on("click", function() {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex--;
if (carouselIndex === -1) {
lastItem.prependTo(carouselContent);
carouselContent.transition({
x: ((carouselIndex + 2) * -itemWidth) + "%"
}, 0);
return carouselContent.transition({
x: ((carouselIndex + 1) * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
carouselIndex = carouselLength - 1;
lastItem.appendTo(carouselContent);
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
return isAnimating = false;
});
} else {
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
return isAnimating = false;
});
}
});
$(".nav--right").on("click", function() {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex++;
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 1000, "easeInOutExpo", function() {
isAnimating = false;
if (firstClone) {
carouselIndex = 0;
carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
firstClone.remove();
firstClone = null;
carouselLength = carouselContent.children().length;
itemWidth = 100 / carouselLength;
carouselContent.css("width", carouselLength * 100 + "%");
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
return;
}
if (carouselIndex === carouselLength - 1) {
carouselLength++;
itemWidth = 100 / carouselLength;
firstClone = firstItem.clone();
firstClone.addClass("clone");
firstClone.appendTo(carouselContent);
carouselContent.css("width", carouselLength * 100 + "%");
$.each(carouselContent.children(), function() {
return $(this).css("width", itemWidth + "%");
});
return carouselContent.transition({
x: (carouselIndex * -itemWidth) + "%"
}, 0);
}
});
});
}).call(this);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-family: "europa-1","europa-2", sans-serif;
overflow: hidden;
}
.wrapper {
max-width: 940px;
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
/**
* Use this wrapper only for demo purposes
* So you can show the items outside the wrapper
*/
.wrapper--demo {
overflow: visible;
}
.wrapper--demo:after, .wrapper--demo:before {
content: "";
position: absolute;
width: 800px;
height: 100%;
top: 0;
left: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 2;
}
.wrapper--demo:before {
left: -800px;
}
.carousel {
width: 100%;
position: relative;
}
.carousel .carousel__content {
width: auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .item {
display: block;
float: left;
width: 100%;
position: relative;
}
.carousel .carousel__content .item .title {
position: absolute;
top: 50%;
left: 0;
margin: -33px 0 0 0;
padding: 0;
font-size: 3rem;
width: 100%;
text-align: center;
letter-spacing: .3rem;
color: #FFF;
}
.carousel .carousel__content .item .title--sub {
margin-top: 20px;
font-size: 1.2em;
opacity: .5;
}
.carousel .carousel__content .item img {
width: 100%;
max-width: 100%;
display: block;
}
.carousel .carousel__nav {
position: absolute;
width: 100%;
top: 50%;
margin-top: -17px;
left: 0;
z-index: 1;
}
.carousel .carousel__nav .nav {
position: absolute;
top: 0;
color: #000;
background: #FFF;
padding: 8px 12px;
font-weight: bold;
text-decoration: none;
font-size: .8rem;
transition: padding .25s ease;
}
.carousel .carousel__nav .nav:hover {
padding: 8px 20px;
}
.carousel .carousel__nav .nav--left {
border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--right {
right: 0;
border-radius: 3px 0px 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<div class="wrapper wrapper--demo">
<div class="carousel">
<div class="carousel__content">
<div class="item">
<p class="title">First</p>
<img src="http://placehold.it/1800x850/70AD96/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Second</p>
<img src="http://placehold.it/1800x850/EA4E23/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Third</p>
<img src="http://placehold.it/1800x850/9BA452/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fourth</p>
<img src="http://placehold.it/1800x850/472D38/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fifth</p>
<img src="http://placehold.it/1800x850/F77C85/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Sixth</p>
<p class="title title--sub">Last Item</p>
<img src="http://placehold.it/1800x850/00FFAE/FFF&text= " alt="">
</div>
</div>
<div class="carousel__nav">
Previous
Next
</div>
</div>
</div>
Use jQuery .click() to mimic user click on the corresponding DOM element which is $(".nav--left").click() & $(".nav--right").click() in your case.
Use setInterval to achieve the desired "autplay effect".
This should do it quick and dirty; just append it to your existing script. Have fun with this working Forked PEN (there is also a link to an advanced one at the bottom).
JavaScript:
var autoSlide = function( sDirection ) {
sDirection === 'left' || sDirection = 'right';
$( '.nav--' + sDirection ).click(); // ".nav--left" or ".nav--right"
};
setInterval( function() {
autoSlide(); // with default direction: 'right'
// autoSlide( 'left' ) // slide left
}, 1000 ); // every 1000 milliseconds
CoffeeScript:
autoSlide = ( sDirection ) ->
sDirection == 'left' || sDirection = 'right'
$( ".nav--#{sDirection}" ).click()
setInterval(
-> autoSlide() # with default direction: 'right'
# autoSlide( 'left' ) # slide left
1000 # every second
)
I only posted whats new instead of repeating your answers snippet! If you have any questions about customization or general functionality feel free to leave a comment.
PEN with advanced control capabilities.
shortened version (reduced to the very essential):
setInterval(function() { $('.nav--right').click() }, 1000 );
or for the other direction and as half as slow:
setInterval(function() { $('.nav--left').click() }, 2000 );
I have a circle that expands and contracts, but there is a glitch at about 10px - 20px. Look carefully and you will see it "twitch".
It's as if the the circle has some alloted space and then "breaks" out of it.
https://jsfiddle.net/nj2u9bhy/4/
$A.Class.create('test',{
Name: 'Animator',
E: {
timer: '#timer'
},
init: function(){
this.animate();
},
animate: function(){
var s = this.E.timer.style;
var step = 2;
var state = 'up';
$A.setInterval(function(){
$A.log(step);
s.height = s.width = step + 'px';
s.borderRadius = step/2 + 'px';
if(state === 'up') {
step += 2;
}
if(state === 'down') {
step -= 2;
}
if(step === 2) {
state = 'up';
}
if(step === 42){
state = 'down';
}
}, 200);
}
});
I tried explicitly giving it space here:
https://jsfiddle.net/nj2u9bhy/5/
but same effect.
That is because it is an inline block element which vertical aligns to bottom so give it vertical align top solve the issue, or change it to a block element.
Updated fiddle
#timer{
position: relative;
top: 20px;
left: 20px;
display: inline-block;
width: 32px;
height: 32px;
vertical-align: top;
background-color: black;
border-radius: 16px;
}
And it can be easily done using CSS animation which will give a smoother transition (note that CSS animations are not supported in IE 9 and earlier)
#timer{
position: relative;
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
background-color: black;
border-radius: 50%;
animation: zoom 3s linear infinite;
}
#keyframes zoom {
0% {width: 0; height: 0;}
50% {width: 32px; height: 32px;}
100% {width: 0; height: 0;}
}
<div id="timer">
</div>
My code allows scrolling vertically in the bottom section to control scrolling horizontally in the top section.
My jsfiddle
You'll see the colors shift through a gradient. Works pretty well. Problem is that I can't quite seem to get the inverse to work. Scrolling horizontally in the top controls scrolling in the bottom.
Any ideas?
Here's the script that makes it work:
// Add event listener for scrolling
$("#bottom").on("scroll", function bottomScroll() {
var scrolledleft = parseInt($("#bottom").scrollTop()) * 1;
console.log(scrolledleft + scrolledright)
$("#top").scrollLeft(scrolledleft + scrolledright)
})
//Move right column to bottom initially
$("#top").scrollLeft($("#top").height())
//Get actual distance scrolled
var scrolledright = parseInt($("#top").scrollLeft())
Your event handlers need to temporarily cancel each other so that they don't both fire at once. You want to calculate your position percentage based on the current scrollLeft / (width of child div - width of container), then apply that percentage to the other element, and likewise for top/height. Also I changed the height of #top to 50% in CSS.
var handler = function (e) {
var src = e.target;
// the first element that triggers this function becomes the active one, until it's done
if (!activeScroller) activeScroller = src.id;
else if (activeScroller != src.id) return;
var $b = $("#bottom");
var $t = $("#top");
var scrollH = $("#bottom-content").height() - $b.height();
var scrollW = $("#top-content").width() - $t.width();
var scrollPct = 0;
if (src.id == "top") {
if (scrollW > 0) {
scrollPct = $t.scrollLeft() / scrollW;
}
$b.scrollTop(scrollH * scrollPct);
} else {
if (scrollH > 0) {
scrollPct = $b.scrollTop() / scrollH;
}
$t.scrollLeft(scrollW * scrollPct);
}
// give all animations a chance to finish
setTimeout(function () { activeScroller = ""; }, 100);
};
var activeScroller = "";
$("#top,#bottom").on("scroll", handler);
#top {
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: red;
}
#top-content {
height: 100%;
width: 2000px;
background: linear-gradient(90deg, red, blue);
}
#bottom {
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: green;
z-index: 100;
}
#bottom-content {
height: 2000px;
width: 100%;
background: linear-gradient(0deg, orange, green);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="top">
<div id="top-content"></div>
</div>
<div id="bottom">
<div id="bottom-content"></div>
</div>
Check out this:
https://jsfiddle.net/1p7gp72h/1/
I'm not sure what your end goal is here.
$("#top").on("scroll", function topScroll() {
var scrolledleft = parseInt($("#top").scrollTop()) * 1;
$("#bottom").scrollLeft(scrolledleft + scrolledright)
});
#top {
top: 0;
right: 0;
left: 0;
width: 5000px;
height: 100%;
overflow: auto;
background: red;
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
Scroll to left ::
$('div').scrollLeft(1000);
Scroll back to normal/ scroll to right ::
$('div.slick-viewport').scrollLeft(-1000);