We Keep Coding

is there a way for me to make a custom scrollbar appear on the left instead of the right?

I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.

Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>

You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>

How can I make an image slider which makes image move right to left?

Hey guys I'm making an image slider on my website and I've got the main functionality down but I want there to be a transition where you see the next image being pulled into view instead of just appearing there. Kind of like the one on this site.
https://allisonstexasbbq.com/
Also here's a link to my website, the code posted below is incomplete because there's too much code to post here so here's my fiddle.
http://jsfiddle.net/0ekqLu4c/
p.s I also realized you can't see my images cause there saved to my machine. Unfortunately I don't know how to get around this.
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/*HEADER*/
.logo {
text-transform: uppercase;
color: white;
font-family: 'Staatliches';
font-size: 10rem;
letter-spacing: 20px;
font-weight: bolder;
position: relative;
left: 800px;
top: 150px;
}
#header {
background: url('img/mex-9.jpg');
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
}
.btn-1, .btn-2, .btn-3 {
background-color: white;
width: 62px;
margin-bottom: 9px;
height: 8px;
border-radius: 5px;
}
.btn-1 {
background-color: lightgreen;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-1-animate {
from {width: 62px; left: 0px; top: 0px;}
to { top: 75px; left: -12px; width: 84px;}
}
#keyframes btn-1-reverse {
from {top: 75px; left: -12px; width: 84px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-2 {
border-radius: none;
background-color: white;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 1;
}
#keyframes btn-2-animate {
from {top: 0px; left: 0px; width: 62px}
to {top: 58px; left: 65px; width: 117px;}
}
#keyframes btn-2-reverse {
from {top: 58px; left: 65px; width: 117px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-3 {
background-color: #ff4d4d;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-3-animate {
from {top: 0px; left: 0px; width: 62px;}
to {top: 41px; left: 180px; width: 160px;}
}
#keyframes btn-3-reverse {
from {top: 41px; left: 180px; width: 160px;}
to {top: 0px; left: 0px; width: 62px;}
}
.side-menu, .nav-btn {
padding-top: 100px;
padding-left: 50px;
}
.nav-btn {
width: 70px;
position: fixed;
top: 5px;
z-index: 10;
}
#header ul {
border-radius: 10px;
margin: 0;
list-style-type: none;
background-color: white;
position: fixed;
top: 200px;
text-align: center;
box-shadow: -15px 0px lightgreen;
}
.side-menu {
position: relative;
left: -2370px;
transition: all 0.2s ease;
z-index: 1;
}
.fa-times {
position: fixed;
left: -380px;
top: 200px;
font-size: 2rem;
color: white;
transition: all 0.2s ease;
}
.fa-times:hover {
transform: scale(1.3);
cursor: pointer;
}
#header li a {
font-family: 'Kumar One Outline';
text-decoration: none;
font-size: 2.2rem;
padding: 15px;
color: grey;
margin-bottom: 15px;
}
#header li:hover {
transform: scale(1.15);
}
#header li {
margin: 15px;
padding-left: 10px;
padding-right: 50px;
transition: all 0.35s ease;
}
#header li a:hover {
cursor: pointer;
font-weight: bolder;
color: #96ea96;
}
#header p {
float: right;
font-weight: bold;
font-size: 3.2rem;
margin-top: -10px;
margin-right: 100px;
color: white;
font-family: 'Cedarville Cursive';
}
/*ABOUT*/
#about .container {
background-color: #339966;
width: 100vw;
overflow: auto;
padding-bottom: -400px;
}
#about h1 {
margin-top: 0;
font-family: 'Cedarville Cursive';
font-size: 3.5rem;
color: white;
text-align: center;
padding-top: 5px;
}
.line {
background-color: orange;
width: 0px;
height: 4px;
padding: 0;
border-radius: 5px;
text-align: center;
margin-left: 560px;
position: relative;
top: 90px;
transition: all 1s ease;
}
#about p {
font-family: 'Josefin Sans';
color: white;
font-size: 1.8rem;
width: 35%;
margin-left: 130px;
}
.image-slider {
background-color: grey;
background-image: url(img/f-0.jpeg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 35%;
height: 250px;
margin-right: 160px;
padding-bottom: 100px;
position: relative;
top: -380px;
float: right;
}
.fa-caret-down {
color: white;
font-size: 4rem;
margin-top: 29%;
position: relative;
}
.left {
transform: rotate(90deg);
left: -40px;
}
.right {
float: right;
transform: rotate(-90deg);
left: 40px;
}
.left:hover, .right:hover {
cursor: pointer;
}
/*MENU*/
#menu .container {
background-color: #e6ac00;
width: 100vw;
margin-top: -330px;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
overflow: hidden;
}
.shape-wrap {
position: relative;
}
.shape-1 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 50px;
left: -190px;
display: inline-block;
margin: 0;
}
.shape-2 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
top: 25px;
display: inline-block;
left: 10px;
}
.shape-3 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -195px;
display: inline-block;
top: 25px;
}
.shape-4 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -40px;
display: inline-block;
top: 85px;
}
.shape-5 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
left: -298px;
display: inline-block;
top: 110px;
}
.shape-6 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 230px;
display: inline-block;
left: -351px;
}
.shape-7 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -90px;
display: inline-block;
top: 265px;
}
.shape-8 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 290px;
display: inline-block;
left: -405px;
}
.shape-9 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -140px;
display: inline-block;
top: 325px;
}
.shape-10 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -410px;
display: inline-block;
top: 325px;
}
#menu h1 {
font-size: 7rem;
color: white;
font-family: 'Cedarville Cursive';
margin-left: 220px;
position: relative;
top: -450px;
}
.line-2 {
background-color: #339966;
width: 0px;
height: 5px;
border-radius: 5px;
position: relative;
top: -600px;
left: 45px;
transition: all 1s ease;
}
.platter {
font-size: 2.3rem;
font-family: 'Cedarville Cursive';
color: #339966;
margin-left: 60px;
}
.platter-info {
font-size: 1.2rem;
font-family: 'Josefin Sans';
color: white;
margin-left: 120px;
margin-top: -50px;
margin-bottom: 30px;
}
.item {
font-family: 'Josefin Sans';
font-size: 1.3rem;
}
.price {
font-size: 1.3rem;
font-family: 'Josefin Sans';
display: block;
margin-left: 400px;
margin-bottom: -40px;
position: relative;
bottom: 40px;
}
.col-1 {
margin-left: 200px;
margin-top: 0px;
position: relative;
top: -550px;
}
.plat-4 {
position: relative;
left: 120px;
}
.plat-5 {
position: relative;
left: 75px;
}
.plat-6 {
position: relative;
left: 85px;
}
.info4tacos {
position: relative;
left: 70px;
margin-bottom: 35px;
}
.plat-7 {
position: relative;
left: 100px;
}
.plat-8 {
position: relative;
right: 50px;
}
.plat-9 {
position: relative;
left: 30px;
}
.info4breakfast {
position: relative;
left: 50px;
}
.col-2 {
float: right;
margin-top: -3185px;
margin-right: 200px;
}
.plat-2 {
position: relative;
left: 70px;
top: 15px;
}
.plat-3 {
position: relative;
left: 60px;
}
.right-border {
float: right;
transform: rotate(180deg);
position: relative;
top: 2400px;
right: 10px;
}
/*HOURS*/
#hours .container {
background-color: #339966;
width: 100vw;
position: relative;
margin-top: -470px;
clip-path: polygon(0% 4%, 5% 0%, 95% 0%, 100% 4%, 100% 100%, 0% 100%);
overflow: hidden;
}
#hours h1 {
text-align: center;
font-size: 4rem;
color: white;
font-family: 'Cedarville Cursive';
padding-bottom: 100px;
margin-top: 0px;
position: relative;
bottom: 80px;
}
.day, .hour {
text-align: center;
background-color: white;
font-size: 2.5rem;
color: #666;
padding-top: 10px;
margin-bottom: 10px;
width: 220px;
font-family: 'Josefin Sans';
border-right: 12px solid #40bf80;
}
.grid {
display: grid;
grid-template-columns: 270px 270px;
grid-auto-rows: 65px;
grid-gap: 15px;
position: relative;
left: 50%;
margin-left: -272.5px;
margin-top: -220px;
}
.move3 {
top: 85px;
}
.move10 {
position: relative;
top: 265px;
}
.rotate {
transform: rotate(180deg);
width: 600px;
}
.hours-line, .hours-line2 {
width: 500px;
height: 10px;
border-radius: 5px;
position: relative;
background-color: #ff4d4d;
top: -300px;
left: 30px;
}
.hours-line2 {
background-color: lightgreen;
left: 820px;
top: -305px;
}
.lom {
transform: rotate(-180deg);
}
/*CONTACT*/
.back-wrapper {
background-color: #595959;
width: 100vw;
height: 650px;
clip-path: polygon(0 0, 15% 15%, 85% 15%, 100% 0, 100% 100%, 0 100%);
margin-top: -100px;
overflow: hidden;
}
.contact-wrapper:before {
content: '';
background-color: #339966;
width: 250px;
height: 130px;
position: absolute;
left: 50%;
margin-left: -125px;
top: -91px;
clip-path: polygon(15% 1%, 85% 0, 100% 30%, 100% 70%, 85% 100%, 15% 100%, 0% 70%, 0% 30%);
}
.contact-wrapper:after {
content: '';
background-color: #339966;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 65px;
height: 65px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -32.5px;
}
.contact-wrapper {
display: flex;
justify-content: space-between;
background-color: #404040;
position: relative;
margin-top: -552px;
}
.loc, .con {
flex-basis: 48%;
}
.contact-wrapper h1 {
font-family: 'Cedarville Cursive';
color: white;
font-size: 5rem;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.split {
background-color: orange;
width: 3px;
height: 300px;
position: relative;
top: 160px;
}
.upArrow {
font-size: 2.5rem;
color: #404040;
position: absolute;
z-index: 1;
left: 50%;
top: -55px;
margin-left: -20px;
cursor: pointer;
transition: all 0.2s ease;
}
.upArrow:hover {
transform: scale(1.25);
color: orange;
}
.to-top {
font-family: 'Josefin Sans';
color: #404004;
font-size: 2rem;
position: absolute;
left: 50%;
margin-left: -85px;
font-weight: bold;
}
.phone, .email {
color: white;
font-size: 1.7rem;
font-family: 'Josefin Sans';
text-align: center;
margin-top: 0;
margin-bottom: 0;
margin-left: 70px;
}
textarea {
outline: none;
background-color: #333;
border: none;
margin: 15px;
position: relative;
left: 50%;
margin-left: -158.75px;
color: white;
}
input {
margin: 20px;
font-size: 1.25rem;
position: relative;
left: -95px;
top: 10px;
background-color: grey;
border: none;
border-radius: 4px;
transition: all 0.2s ease;
}
input:hover {
cursor: pointer;
color: orange;
}
.review {
font-size: 1.5rem;
color: white;
font-family: 'Josefin Sans';
position: relative;
left: 170px;
top: -20px;
}
.fab {
font-size: 3.3rem;
margin-right: 15px;
position: relative;
left: 385px;
top: -85px;
}
.recker {
transform: rotate(90deg);
width: 300px;
height: 15px;
position: relative;
background-color: #595959;
left: 30px;
top: 120px;
border-radius: 10px;
}
.main {
width: 400px;
height: 20px;
position: relative;
background-color: #595959;
left: 80px;
top: 100px;
border-radius: 10px;
}
.rd {
transform: rotate(90deg);
width: 300px;
height: 10px;
position: relative;
background-color: #595959;
left: 280px;
top: 80px;
border-radius: 10px
}
.fa-map-pin {
font-size: 4rem;
color: orange;
position: relative;
left: 290px;
top: -35px;
}
.loc p {
position: relative;
color: white;
font-family: 'Josefin Sans';
}
.con-border, .loc-border {
position: absolute;
}
.loc-border {
transform: rotate(180deg);
}
/*FOOTER*/
#footer .container {
width: 100%;
background-color: #595959;
text-align: center;
position: relative;
margin-top: -54px;
margin-bottom: 0;
}
#footer h1 {
margin: 0;
font-family: 'Josefin Sans';
font-weight: bolder;
font-size: 1.5rem;
padding: 15px;
color: darkgrey;
}

How to swap inside DIV data when up and down button press using js and jquery?

I have working code.in which I have one timeline. and each event inside timeline is connected to each other.
Here is one delete button that removes the particular data. and there is another one which copies the data.
But I want when I click on up button and down button.
Like when I click on up button. it should swap the third element data to second data and second data to third data.
and same working on down button.
Here is working example code please see it.
And help will be appreciated.
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
var previousData = $(this).parent().prev().html();
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

Please refer the jsfiddle for your referance. Here on mouse down and up key pressed item will be selected.
https://jsfiddle.net/webdev_sudhi/avudyb2t/3/
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
//added new code here
var previousData = $(this).parent().prev();
$preTitle = $(previousData).find('header').text();
$preContent = $(previousData).find('article').text();
$(this).parent().find('header').text($preTitle);
$(this).parent().find('article').text($preContent);
//end here
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

I made some changes to you script to solve the problem:
Javascript: I used just one event to determine when you click up or down, but i had to add a data attribute with the name of the direction of the buttons to find out which button makes the call.
$(document).ready(function () {
$("#edit_button").click(function () {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function () {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3' data-direction='up'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4' data-direction='down' >" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function () {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function () {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle3, .deleteStyle4 ', function (e) {
var direction = $(e.currentTarget).data().direction,
$currentSection = $(this).parent(),
$sectionToMove = direction === 'up' ? $(this).parent().prev() : $(this).parent().next(),
currentSectionData = $currentSection.html(),
sectionToMoveData = $sectionToMove.html();
$currentSection.html(sectionToMoveData);
$sectionToMove.html(currentSectionData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

How do I make a full page width dropdown when you click the :hover of the burger menu?

How do I make a full page width drop-down appear when the burger menu is clicked but still keep the close function(X). (Dropdown menu and the close burger menu transition when clicked)
Below is the JS functions for the burger menu animations. Transition with hover and close when clicked.
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
Below is the css to transition the burger menu when hovered and closed functions are applied.
<style>
.burgerMenu-right {
font-family: 'Circe Rounded', sans-serif;
font-weight: 800;
display: inline;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 20px;
color: black;
float: right;
position: relative;
right: 4%;
}
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu:hover .line01 {
width: 65%;
}
.menu:hover .line02 {
width: 100%;
top: 66%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.menu.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
</style>
Below is the html for the burger menu....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
</div>
Thanks!

use below code
$(document).ready(function($) {
$(".menu").click(function(){
$(this).toggleClass("transition close");
$(".down-bg").slideToggle();
})
});
.burgerMenu-right {
font-family: 'Circe Rounded', sans-serif;
font-weight: 800;
display: inline;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 20px;
color: black;
float: right;
position: relative;
right: 4%;
}
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
z-index: 10
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu:hover .line01 {
width: 65%;
}
.menu:hover .line02 {
width: 100%;
top: 66%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.menu.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
.down-bg{
background: rgba(0,0,0,0.5);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
<div class="down-bg"></div>
</div>

CSS Animation not working on IE11

I have a mouse over / mouse out animation on a couple of divs that is running great in Firefox and Chrome. However in IE it just won't work. Does anyone has any ideas why as this was working before?
var actual = 1;
var over = 0;
var over2 = 0;
function scrollleft() {
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
if (actual == 2) {
$("#vidstrip").animate({
left: "0"
});
actual = 1;
return;
}
stopAllYT();
}
function scrollright() {
if (actual == 2) {
$("#vidstrip").animate({
left: "+0"
});
actual = 1;
return;
}
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
stopAllYT();
}
$("#vidstop").on({
'mouseenter': function() {
overme();
}
});
$("#vidstop").on({
'mouseleave': function() {
outme();
}
});
//ARROWS OUT
function outme() {
if (over == 1) {
$(".leftnav").removeClass("lnavchange");
$(".rightnav").removeClass("lnavchange2");
$(".leftnav").toggleClass("lnavout");
$(".rightnav").toggleClass("lnavout2");
over = 0;
//alert(over);
//alert(over);
}
//alert('MouseOut');
// handle mouse event here!
}
//ARROWS IN
function overme() {
if (over == 0) {
//remove old class
$(".leftnav").removeClass("lnavout");
$(".rightnav").removeClass("lnavout2");
//add class
$(".leftnav").toggleClass("lnavchange");
$(".rightnav").toggleClass("lnavchange2");
over = 1;
//alert(over);
}
}
#subheader {
font-family: verdana;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
#subcopy {
font-family: verdana;
text-align: center;
font-size: 14px;
font-weight: normal;
color: #000;
text-transform: capitalize;
}
#titlei {
font-family: verdana;
text-align: center;
font-size: 46px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
hr.undertitle {
background: #bfbfbf;
width: 150px;
border: 0;
height: 2px;
margin: 0 auto;
}
#subcopy {
line-height: 21px;
font-size: 14px;
text-align: center;
font-family: verdana;
}
#subhead {
line-height: 21px;
font-weight: bold;
font-size: 22px;
text-align: center;
font-family: verdana;
}
#Stage {
text-align: center;
width: 1060px;
margin-left: auto;
margin-right: auto;
}
#slidercontainer {
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#vidspeephole {
width: 724px;
height: 407px;
overflow: hidden;
float: left;
margin-left: 4px;
}
#vidsholder {
width: 2896px;
height: 407px;
position: relative;
float: left;
}
.vids {
width: 724px;
height: 407px;
float: left;
overflow: hidden;
}
#rightpromos {
height: 407px;
width: 208px;
position: relative;
float: left;
margin-left: 8px;
}
#rightarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
margin-left: 3px;
cursor: pointer;
}
#leftarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
cursor: pointer;
}
.featuredpages {
width: 208px;
height: 133px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.paging {
top: 10px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.pbutton {
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.paging a.active {
background: #999 !important;
}
.paging a:hover {
background: #000 !important;
}
#row1 {
position: relative;
width: 1060px;
overflow: hidden;
height: 440px;
}
#row2 {
position: relative;
width: 1060px;
overflow: hidden;
height: 60px;
}
promocopy1 {
height: 31px;
padding: 5px;
color: #fff;
background-color: rgba(52, 52, 52, 0.85);
position: relative;
top: -41px;
font-family: Verdana, Geneva, sans-serif;
}
#stack {
height: 114px;
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.edgeLoad-EDGE-1207420 {
visibility: hidden;
}
#mainvidcontainer {
width: 1060px;
height: 698px;
overflow: hidden;
position: relative;
}
#vidstrip {
height: 626px;
width: 2120px;
position: relative;
}
#vidstop {
height: 626px;
width: 1060px;
position: relative;
overflow: hidden;
z-index: 0;
}
.thevids {
position: relative;
width: 1060px;
float: left;
height: 596px;
}
.vidscopy {
width: 1060px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
background-color: #999;
height: 30px;
text-align: center;
vertical-align: middle;
padding-top: 4px;
}
#navis {
z-index: 9;
width: 1060px;
height: 30px;
position: relative;
}
.leftnav {
position: absolute;
top: 300px;
left: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.rightnav {
position: absolute;
top: 300px;
right: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.pagingtop {
top: 8px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 40px;
z-index: 2;
}
.pbuttontop {
margin-left: 50%;
margin-right: 50%;
text-align: center;
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.pagingtop a.active {
background: #999 !important;
}
.pagingtop a:hover {
background: #000 !important;
}
.lnavchange {
animation-name: example;
animation-duration: 0.3s;
animation-fill-mode: forwards;
-webkit-animation-name: example;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
-ms-transform-origin: left: 100px;
}
#keyframes example {
0% {
left: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 22px;
opacity: 1;
}
}
.lnavchange2 {
animation-name: example2;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example2 {
0% {
right: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
right: 22px;
opacity: 1;
}
}
.lnavout {
animation-name: example3;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example3 {
0% {
left: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
left: -80px;
opacity: 0;
}
}
.lnavout2 {
animation-name: example4;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example4 {
0% {
right: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
right: -80px;
opacity: 0;
}
}
<div id="mainvidcontainer">
<div id="vidstop">
<div class="leftnav" onclick="scrollleft()"></div>
<div class="rightnav" onclick="scrollright()"></div>
<div id="vidstrip">
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/kf03Z7iiIk?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy1</div>
</div>
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/8a05WugVHFs?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy 2</div>
</div>
</div>
</div>
<div id="navis">
<div class="pagingtop">
<a class="pbuttontop" id="b1" onclick="anitop1(1)"></a>
<a class="pbuttontop" id="b2" onclick="anitop1(2)" style="margin-left:10px;"></a>
</div>
</div>
</div>
Edit: all good now it was just the youtube video that was being overlayed in Internet Explorer.
Thank you
Nuno

Got it!
It was the youtube video that was in front of the nav arrows.
In order to fix this for IE I had to add the wmode property to the youtube url:
wmode=opaque
Thank you all!
Hope this helps other people!