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>
I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}
Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}
In my blogger website second line of main menu is not displaying correctly.First line is working fine, second line is also working fine but not displaying correctly when i moves mouse pointer on second line buttons than they displays but in general looks completely white.
My website link - Click Here
HTML codes-
.social-text .snapchat a:after {
content: "Snapchat"
}
.social-text .email a:after {
content: "Email"
}
.social-text .external-link a:after {
content: "WebSite"
}
#header-wrap {
position: relative;
margin: 0
}
.header-header {
background-color: #fff;
width: 100%;
height: 90px;
position: relative;
overflow: hidden;
padding: 30px 0
}
.header-header .container {
position: relative;
margin: 0 auto;
padding: 0
}
.header-logo {
position: relative;
float: left;
width: auto;
max-width: 120px;
max-height: 100px;
margin: 0;
padding: 0px 0
}
.header-logo .header-image-wrapper {
display: block
}
.header-logo img {
max-width: 120%;
max-height: 150px;
margin: 0;
margin-left: 70px
}
.header-logo h1 {
color: $(title.color);
font-size: 36px;
line-height: 60px;
margin: 0
}
.header-logo p {
font-size: 12px;
margin: 5px 0 0
}
.header-ads {
position: relative;
float: right
}
.header-ads .widget>.widget-title {
display: none
}
.header-ads .widget {
max-width: 100%
}
.header-ads .widget .widget-content {
width: 728px;
max-width: 100%;
max-height: 90px;
line-height: 1
}
.header-menu {
position: relative;
width: 100%;
height: 46px;
z-index: 10;
font-size: 13px;
margin: 0;
background-color: $(main.dark.color);
border-top: 2px solid $(main.color)
}
.header-menu .container {
position: relative;
margin: 0 auto;
padding: 0
}
#main-menu .widget,
#main-menu .widget>.widget-title {
display: none
}
#main-menu .show-menu {
display: block
}
#main-menu {
position: relative;
height: 46px;
z-index: 15
}
#main-menu ul>li {
float: left;
position: relative;
margin: 0;
padding: 0;
transition: background .17s
}
#main-menu #main-menu-nav>li:hover,
#main-menu #main-menu-nav>li.li-home {
background-color: $(main.color)
}
#main-menu ul>li>a {
position: relative;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 46px;
display: inline-block;
margin: 0;
padding: 0 15px;
transition: color .17s ease
}
#main-menu #main-menu-nav>li>a {
text-transform: uppercase;
font-weight: 700
}
#main-menu ul>li:hover>a {
color: #fff
}
#main-menu ul>li>ul {
position: absolute;
float: left;
left: 0;
top: 46px;
width: 180px;
background-color: $(main.dark.color);
z-index: 99999;
margin-top: 0;
padding: 0;
border-top: 2px solid $(main.color);
visibility: hidden;
opacity: 0
}
#main-menu ul>li>ul>li>ul {
position: absolute;
float: left;
top: 0;
left: 100%;
margin: -2px 0 0
}
#main-menu ul>li>ul>li {
display: block;
float: none;
position: relative
}
#main-menu ul>li>ul>li:hover {
background-color: $(main.color)
}
#main-menu ul>li>ul>li a {
display: block;
height: 36px;
font-size: 13px;
color: #fff;
line-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0 15px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all .17s ease
}
#main-menu ul>li>ul>li:hover>a {
color: #fff
}
#main-menu ul>li.has-sub>a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 12px;
font-weight: 400;
margin: 0 0 0 5px
}
#main-menu ul>li>ul>li.has-sub>a:after {
content: '\f105';
float: right;
margin: 0
}
#main-menu .mega-menu {
position: static!important
}
#main-menu .mega-menu>ul {
width: 100%;
box-sizing: border-box;
padding: 20px 10px
}
#main-menu .mega-menu>ul.mega-menu-inner {
overflow: hidden
}
#main-menu ul>li:hover>ul,
#main-menu ul>li>ul>li:hover>ul {
visibility: visible;
opacity: 1
}
#main-menu ul ul {
transition: all .25s ease
}
.mega-menu-inner .mega-item {
float: left;
width: 20%;
box-sizing: border-box;
padding: 0 10px
}
.mega-menu-inner .mega-content {
position: relative;
width: 100%;
overflow: hidden;
padding: 0
}
.mega-content .post-image-wrap {
width: 100%;
height: 120px
}
.mega-content .post-image-link {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
padding: 0
}
.mega-content .post-title {
position: relative;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
margin: 7px 0 5px;
padding: 0
}
.mega-content .post-title a {
display: block;
color: #fff;
transition: color .17s
}
.mega-content .post-title a:hover {
color: $(title.hover)
}
.mega-content .post-meta {
font-size: 11px
}
.no-posts {
float: left;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center
}
.mega-menu .no-posts {
line-height: 60px;
color: $(title.color)
}
.show-search,
.hide-search {
position: absolute;
right: 0;
top: 0;
display: block;
width: 46px;
height: 46px;
background-color: $(main.color);
line-height: 46px;
z-index: 20;
color: #fff;
font-size: 15px;
text-align: center;
cursor: pointer;
padding: 0;
transition: background .17s ease
}
.show-search:before {
content: "\f002";
font-family: FontAwesome;
font-weight: 400
}
.hide-search:before {
content: "\f00d";
font-family: FontAwesome;
font-weight: 400
}
#nav-search {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
z-index: 99;
background-color: $(main.dark.color);
box-sizing: border-box;
padding: 0
}
#nav-search .search-form {
width: 100%;
height: 46px;
background-color: rgba(0, 0, 0, 0);
line-height: 46px;
overflow: hidden;
padding: 0
}
#nav-search .search-input {
width: 100%;
height: 46px;
font-family: inherit;
color: #fff;
}
1, you have more menu items right, so you have to reduce font-size, padding from (#main-menu ul > li > a).
2, Or otherwise you can go for a inner scroll.
.header-menu {
position: relative;
width: 100%;
/* height: 46px; */
z-index: 10;
font-size: 13px;
margin: 0;
background-color: #384a5f;
border-top: 2px solid #ffd012;
}
#main-menu {
position: relative;
/* height: 46px; */
z-index: 15;
}
#main-menu ul{
display:flex;
flex-wrap:wrap;
}
replace this code in your css for each element! i just removed the height for both header and main menu so that the div can expand with the height of her child! added display:flexfor ul to make height adjust depending on child
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'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "↑" + "</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'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "↑" + "</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'>" + "✖" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "✚" + "</div>");
$(this).append("<div class='deleteStyle3' data-direction='up'>" + "↑" + "</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>
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!