CSS Animation not working on IE11

CSS Animation not working on IE11 - javascript

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!

Related

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

space-between not working on loading page

I have created a loading page with css and html. I would like to display a loading bar to display when the page is loading, between 0% to 100%.I have used justify-content:space-between to solve this but I can't seem to make this work. I have read previous posts on this in the forum but am still stuck. here is my code, both html and css
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
base.scss
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
```
loader.scss
```
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "Orbitron", sans-serif;
&__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c7a;
border-bottom: 3px solid #6cff8c7a;
}
&__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
&--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
}
&__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
&--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
}
&--border {
width: 85%;
height: 1px;
background: #6cff8c7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
}
&__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100px;
display: flex;
justify-content: space-between;
padding-left: 10px;
}
}
```

you need to edit you .loading__counter:
width: 100%;
box-sizing: border-box;
padding: 0 10px;
See the working example below:
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "
Orbitron"
, sans-serif;
}
.loading__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c 7a;
border-bottom: 3px solid #6cff8c 7a;
}
.loading__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
}
.loading__bar--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
.loading__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.loading__text--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
}
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
.loading__text--border {
width: 85%;
height: 1px;
background: #6cff8c 7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
.loading__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>

How to make content delay using CSS and Jquery

I am attempting to create a page where the content on the screen appears 3 seconds after the page loads. By the other posts I have seen on this website, I attempted the scripting below, though with no success (Everything appears at the same time).
First is the section I am attempting to delay, then is the whole pages script. Any guidance is very much appreciated. (I am hoping I am wording everything correctly this time so I don't get another -1)
Section to delay:
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
And here is the entire page
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0">
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
</style>
</body>
</html>

Here is what I ended up changing it all to, to make it work. Hopefully this will help others that are looking to do this.
.content {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</section>

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>

We Keep Coding

JavaScript is the programming language of the Web.

CSS Animation not working on IE11 - javascript

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!

Related

Links in footer wont display inline

space-between not working on loading page

How to make content delay using CSS and Jquery

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

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

Categories

Resources