We Keep Coding

Link click issue with a static click function. How to fix this? - javascript

Info
I have a flickity slideshow, that on a 'static click' is going to the next pictures.In addition I have on top of the pictures inside my flickity slideshow a button with some caption and a a href linked to an external website (e.g. https://www.google.it).
Here my issue:
When I click on the link my flickity during the external loading (around 500 ms) is going to the next slide instead of stop working.
What i need is to go to the URL immediately without having my flickity going to the next slide instead.
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
Have a look here ---------→
https://codepen.io/skurodrome/pen/XWXWapo

You Can't open google.com in same slider so please use target="blank" in anchor.Please see example it will work fine.
Change this HTML Code. Code is here :-
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
body {
background: antiquewhite;
}
/*.is-selected .info {
opacity:1;
display:block;
transition: 0.25s;
transition-timing-function: ease-out;
transform: translateY(0);
opacity: 1;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
//transition: 0.2s;
opacity: 0;
transition: opacity .1s linear;
bottom: 100px;
position: absolute;
left: 50%;
background: #fff;
border-radius: 15px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
.is-selected .info {
transform: translateY(0);
left:50%;
-webkit-transform: translate(-50%,0px);
transform: translate(-50%,0px);
transition: 0.4s;
transition-timing-function: ease-out;
opacity:1;
display:block;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
opacity: 0;
transition: opacity .3s linear;
transition: 0.5s;
bottom: 20px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,80px);
transform: translate(-50%,80px);
background: #fff;
border-radius: 10px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.caption {
background: #FAFAFA;
margin: 0;
padding: 10px;
text-align: center;
}
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
padding: 2px;
background: linear-gradient(to top right, #fb8200, #c43390);
}
.avatar img {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/*
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
//background-color:rgba(236, 240, 241,1.0);
//border: 3px solid rgb(236, 240, 241);
display:inline-block;
border: 1px solid #cacaca;
overflow: hidden;
img {
width:100%;
}}
*/
.hide
{
display: none;
height:0;
}
.avatar-caption {
padding: 0 0 0 20px;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail img {
max-width: 100%;
max-height: 100%;
}
img {
height: auto;
max-width: 100%;
display: block;
}
.front-page-gallery .product-moods .gallery-cell .info a h3 {
font-size: .825rem;
}
.front-page-gallery .product-moods .gallery-cell .info a, .front-page-gallery .product-moods .gallery-cell .info h3, .front-page-gallery .product-moods .gallery-cell .info p {
white-space: nowrap;
line-height: 1.2;
}
h1, h2, h3, p, ul {
color: #262626;
letter-spacing: 0;
margin: 0;
font-size: 12px;
line-height: 14px;
}
h1, h2, h3 {
color: #262626;
color: rgba(var(--i1d,38,38,38),1);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 18px;
color:black;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail {
width: 40px;
height: 40px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: .5rem 1.4em .5rem 1.4rem;
text-decoration:none;
}
html,
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.slide,
.main-carousel {
width: 100%;
height: 287px;
//height: 587px;
}
.carousel-cell { margin-right: 10px; }
.slide {
border-radius:10px;
padding: 1rem;
width: 500px;
color: white;
}
.slide-1 {
background: red;
}
.slide-2 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/c0.151.1349.1349a/s640x640/97960668_102131031487479_5118500540678732059_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=IZgKw1IUOCwAX_WD1KZ&oh=0e2dbbec3a33af0c1905fcfd8bc485bc&oe=5F1585A9");
background-repeat: no-repeat;
background-size: cover;
}
.slide-3 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/p640x640/95420076_657451761718836_7126794433093464345_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=cMN4jjBUawUAX-cMrN7&oh=a83c7fa9be06d83910444d8cf652a1fc&oe=5F13818B");
background-repeat: no-repeat;
background-size: cover;
}
.slide-4 {
background-image: url("https://pbs.twimg.com/media/Bi4fWQoCMAATf5e.jpg");
background-color: black;
background-size: cover;
//background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slide-5 {
background: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/flickity#2.0.11/dist/flickity.css">
<div class="main-carousel">
<div class="carousel-cell">
<div class="slide slide-1">
1
</div>
</div>
<!--2-->
<div class="carousel-cell" >
<div class="slide slide-2" ></div>
<div class="info">
<a target="_blank" href="https://www.google.com/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s150x150/61984225_404664133594231_7441499034704936960_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=GQqwKdosiZsAX_hOD2p&oh=83248d05fda0a9af488e722739842f15&oe=5F1342F9" alt="tester"></div></div><div class="avatar-caption"><h3>Samutaro</h3><p class="color">Narratives Not Noise</p></div></a></div></div>
<!--3-->
<div class="carousel-cell">
<div class="slide slide-3"></div>
<div class="info">
<a target="_blank" href="https://www.google.it/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s320x320/45710471_1974274545985110_3650146834896125952_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=6YMGwWKDusMAX8AQMU2&oh=9cdbea6cf114306d368ecf2bc50a4628&oe=5F168E4A" alt="tester"></div></div><div class="avatar-caption"><h3>Poptones 1979</h3><p class="secondary">⚡️AFFA</p></div></a></div>
</div>
<div class="carousel-cell">
<div class="slide slide-4">
4
</div>
</div>
<div class="carousel-cell">
<div class="slide slide-5">
5
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2.0.11/dist/flickity.pkgd.js"></script>

Related

I'm using jquery-circle-progress plugin.
The code is working perfectly. But now I put 1 button there to update the value of percentage.
<button id="add">Add</button>
As you can see below example, When I click the button then the circle progress will update the data but I want the animation is not reset from 0, just continue from current value to updated value.
Is it possible?
let options = {
startAngle: -1.55,
size: 150,
value: 0.85,
fill: {gradient: ['#a445b2', '#fa4299']}
}
$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});
$(".react .bar").circleProgress({
value: 0.60
});
$('#add').on('click', function(){
$(".react .bar").circleProgress({
value: 0.80
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: -webkit-linear-gradient(left, #53c68a, #8b67c4);
}
.wrapper{
width: 1000px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .card{
background: #fff;
width: calc(25% - 8px);
height: 300px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .card .circle{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
cursor: default;
}
.card .circle .box,
.card .circle .box span{
position: absolute;
top: 50%;
left: 50%;
}
.card .circle .box{
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.8);
transition: all 0.2s;
}
.card .circle:hover .box{
transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span,
.wrapper .card .text{
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.circle .box span{
font-size: 38px;
font-family: sans-serif;
font-weight: 600;
transform: translate(-45%, -45%);
transition: all 0.1s;
}
.card .circle:hover .box span{
transform: translate(-45%, -45%) scale(1.09);
}
.card .text{
font-size: 20px;
font-weight: 600;
}
#media(max-width: 753px){
.wrapper{
max-width: 700px;
}
.wrapper .card{
width: calc(50% - 20px);
margin-bottom: 20px;
}
}
#media(max-width: 505px){
.wrapper{
max-width: 500px;
}
.wrapper .card{
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<div class="wrapper">
<div class="card react">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">React JS</div>
</div>
</div>
<button id="add">Add</button>

Yes, it is possible. Just change the circleProgress function signature to receive a string and a number.
$(".react .bar").circleProgress('value', 0.60);
...
$(".react .bar").circleProgress('value', 0.80);
Following the fourth example found in the documentation, in order to emulate dynamic value update, you must call the method passing two arguments, a string 'value' then a real number ranging from 0 to 1 to go to based on the previous set value.
let options = {
startAngle: -1.55,
size: 150,
value: 0.85,
fill: {gradient: ['#a445b2', '#fa4299']}
}
$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
let precision = 1; // change here number of digits after .
let num = (stepValue*100).toFixed(precision);
$(this).parent().find("span").text(String(num) + "%");
});
$(".react .bar").circleProgress('value', 0.60);
$('#add').on('click', function(){
$(".react .bar").circleProgress('value', 0.802);
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: -webkit-linear-gradient(left, #53c68a, #8b67c4);
}
.wrapper{
width: 1000px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .card{
background: #fff;
width: calc(25% - 8px);
height: 300px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .card .circle{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
cursor: default;
}
.card .circle .box,
.card .circle .box span{
position: absolute;
top: 50%;
left: 50%;
}
.card .circle .box{
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.8);
transition: all 0.2s;
}
.card .circle:hover .box{
transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span,
.wrapper .card .text{
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.circle .box span{
font-size: 38px;
font-family: sans-serif;
font-weight: 600;
transform: translate(-45%, -45%);
transition: all 0.1s;
}
.card .circle:hover .box span{
transform: translate(-45%, -45%) scale(1.09);
}
.card .text{
font-size: 20px;
font-weight: 600;
}
#media(max-width: 753px){
.wrapper{
max-width: 700px;
}
.wrapper .card{
width: calc(50% - 20px);
margin-bottom: 20px;
}
}
#media(max-width: 505px){
.wrapper{
max-width: 500px;
}
.wrapper .card{
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<div class="wrapper">
<div class="card react">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">React JS</div>
</div>
</div>
<button id="add">Add</button>

my whole website pushes content to left and usually its due to syntax error but i really cant find my problem please help I'm a beginner and my code has a lot of noise and i have run the html and css in multiple formatter and validator websites and still did not find anything i also removed all media queries to se if the problem resolved but no luck please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
scroll-behavior: smooth;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
}
/*Button Back To Top-----------------------------------------------------------------------*/
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #f10e32; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #d19ea6;
}
/*NAVBAR --------------------------------------------------------------------------------------*/
.navbar {
top: 0;
width: 100%;
height: auto;
background: #18191a;
display: flex;
justify-content: center;
align-content: center;
z-index: 2;
transition: top 0.3s;
}
.mylist {
height: 100%;
width: 500px;
display: flex;
justify-content: center;
align-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
.icons {
width: 100%;
height: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.icons a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.icons:hover {
opacity: 0.7;
}
.icon {
width: 35px;
height: auto;
}
/*INFO -------------------------------------------------------------------------------------------*/
.head-info {
background-color: rgba(134, 128, 128, 0.035);
width: 70%;
border-radius: 10px;
}
.info {
margin-top: 100px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
text-align: center;
}
.info p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
h1 {
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
h2 {
color: rgb(192, 184, 153);
font-weight: 400;
margin-bottom: 30px;
}
h3 {
font-size: 20px;
color: crimson;
font-weight: 500;
}
.btn {
margin: 80px 0 0 0;
font-family: "Roboto", sans-serif;
background: #f10e32;
border: none;
width: 136px;
height: auto;
outline: none;
overflow: hidden;
font-size: 16px;
padding: 10px;
color: rgb(198, 181, 181);
border-radius: 5px;
cursor: pointer;
scroll-behavior: smooth;
z-index: 1;
margin-bottom: 300px;
}
.btn:hover {
opacity: 0.7;
color: black;
transition: 0.3s ease-in;
text-decoration: none;
}
/*PROJECTS---------------------------------------------------------------------------------------*/
.projects {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(134, 128, 128, 0.035);
border-radius: 10px;
}
.projects h4 {
display: none;
}
.one,
.two,
.three {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
scroll-behavior: smooth;
position: relative;
}
.images {
margin: 10px;
cursor: pointer;
width: 320px;
height: 220px;
border-radius: 4px;
}
h5 {
position: relative;
right: 200px;
top: 5px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h5 {
visibility: hidden;
}
#first,
#second,
#third,
#fourth,
#fifth,
#sixth,
#seventh
{
position: relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(22, 22, 22, 0.705);
opacity: 0;
transition: 0.3s ease;
cursor: pointer;
}
.overlay p {
font-family: "Roboto", sans-serif;
font-size: 23px;
font-weight: 500;
color: #daced0;
}
.overlay:hover {
opacity: 1;
}
/*Summery and Skills -------------------------------------------------------------*/
.about {
background-color: rgba(134, 128, 128, 0.035);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 200px;
margin-bottom: 30px;
font-family: "Montserrat", sans-serif;
padding: 70px;
border-radius: 20px;
}
.about h3 {
font-size: 20px;
font-weight: 500;
}
.about p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
.skills {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin-top: 100px;
}
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
}
.skill a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
transition: 0.3s ease;
}
.skill a:hover {
transform: translateY(-20px);
}
/*CONTACTS ----------------------------------------------------------------------------------------*/
.contact {
background-color: rgba(255, 0, 0, 0.096);
width: 100%;
height: 400px;
text-align: center;
}
.contacts h3 {
text-align: center;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#centrada{
margin: 50px auto 0px auto;
width:300px;
font-family: 'Verdana';
font-weight: bold;
text-align: center;
}
.utopix{
padding-bottom:50px;
}
a{
color:#fff;
text-decoration:none;
}
.cube {
width: 100%;
height: 50px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: pointer;
}
.default-state,.active-state {
height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.flip-to-top .active-state {
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-o-transform: rotateX(90deg) translateZ(75px);
-ms-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform: rotateX(-90deg) translateZ(-50px);
-o-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
-webkit-transform: rotateX(-89deg);
-moz-transform: rotateX(-89deg);
-o-transform: rotateX(-89deg);
-ms-transform: rotateX(-89deg);
transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state,
.active-state {
font-size: 16px;
color: #fff;
line-height: 50px;
-webkit-transition: background 250ms ease;
-moz-transition: background 250ms ease;
-o-transition: background 250ms ease;
transition: background 250ms ease;
}
.cube:hover .default-state {
background: #000;
}
.facebook {
background: #016d1f;
}
.twitter {
background: #0ec90b;
}
.google-plus {
background: #c01a04;
}
.linkedin {
background:#0590db;
}
.instagram {
background-color: #da4273;
}
/*MEDIA ------------------------------------------------------------------------------------------*/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<nav id="navbar" class="navbar">
<ul class="mylist" >
<li class="icons" title="HOME">
<a href="./index.html"><img class="icon" src="./images/home.png" alt="">
Home
</a>
</li>
<li class="icons" title="resume">
<a href="download=""><img class="icon" src="./images/Resume.png" alt="">
Get Resume
</a>
</li>
<li class="icons" title="ABOUT ME">
<a href="#about"><img class="icon" src="./images/about.png" alt="Todo List">
About
</a>
</li>
<li class="icons" title="CONTACT ME">
<a href="#contacts"><img class="icon" src="./images/contact-book.png" alt="">
Contacts
</a>
</li>
</ul>
</nav>
<div class="info">
<div class="head-info">
<h1></h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope while working in the team of experts under a skillful and talented management.
</div>
<a class="btn" href="#first">VIEW PROJECTS</a>
</div>
<div id="projects" class="projects">
<div id="first-div" class="one">
<div id="first" class="image-container">
<a href="./projects/color-flipper/index.html" target="_blank">
<img src="./images/projects/Color-flipper.png" class="images" alt="Color Flipper">
<div class="overlay"><p>Color Flipper</p></div>
<h4>Color Flipper</h4>
</a>
</div>
<div id="second" class="image-container">
<a href="./projects/Comment/index.html" target="_blank">
<img src="./images/projects/secrets.png" class="images" alt="Secrets">
<div class="overlay"><p>Secrets</p></div>
<h4>Secrets</h4>
</a>
</div>
<div id="third" class="image-container">
<a href="./projects/counter/index.html" target="_blank"
><img src="./images/projects/counter.png" class="images" alt="Counter">
<div class="overlay"><p>Counter</p></div>
<h4>Counter</h4>
</a>
</div>
</div>
<div class="two">
<div id="fourth" class="image-container">
<a href="./projects/Login-page/index.html" target="_blank">
<img src="./images/projects/login.png" class="images" alt="Login">
<div class="overlay"><p>Login Page</p></div>
<h4>Login-Page</h4>
</a>
</div>
</div>
<div class="three">
<div id="fifth" class="image-container">
<a href="./projects/Random Quotes/index.html" target="_blank">
<img src="./images/projects/quotes.png" class="images" alt="Quotes">
<div class="overlay"><p>Random Quotes</p></div>
<h4>Random Quotes</h4>
</a>
</div>
<div id="sixth" class="image-container">
<a href="./projects/responsive-header/index.html" target="_blank">
<img src="./images/projects/header.png" class="images" alt="Movies">
<div class="overlay"><p>Movies</p></div>
<h4>Movies</h4>
</a>
</div>
<div id="seventh" class="image-container">
<a href="./projects/todo-list/index.html" target="_blank">
<img src="./images/projects/todo.png" class="images" alt="">
<div class="overlay"><p>Todo List</p></div>
<h4>Todo-List</h4>
</a>
</div>
</div>
</div>
<div id="about" class="about">
<h3>Summery</h3>
<p>With over 5 years of experience in English translation I have decided to change my career into something more rewarding and futureproof such as web development.
So as of 2019 I have trained online to become a front-end web developer and covered various topics such as responsive web design, vanilla JavaScript web application basics and user friendly UI and UX design.
</p>
<div class="skills">
<h3>Skills</h3>
<div class="skill">
<img src="./images/skills/html.png" alt=""><br>HTML
<img src="./images/skills/css.png" alt=""><br>CSS3
<img src="./images/skills/js.png" alt=""><br>JAVASCRIPT
<img src="./images/skills/git.png" alt=""><br>Git
<img src="./images/skills/figma.png" alt=""><br>Figma
<img src="./images/skills/wordpress.png" alt=""><br>Wordpress
<img src="./images/skills/photoshop.png" alt=""><br>Photoshop
<img src="./images/skills/word.png" alt=""><br>Word
<img src="./images/skills/excel.png" alt=""><br>Excell
<img src="./images/skills/powerpoint.png" alt=""><br>Powerpoint
</div>
</div>
</div>
<div id="contacts" class="contacts">
<h3>Contact Me</h3>
<div id="centrada">
<div class="cube flip-to-top">
<div class="default-state facebook">
<span>Phone</span>
</div>
<div class="active-state facebook">
<span>+98-0990-136-91-46</span>
</div>
</div>
<div class="cube flip-to-top google-plus">
<div class="default-state">
<span>Gmail</span>
</div>
<div class="active-state google-plus">
<span><a>naeimipoor.a#gmail.com</a></span>
</div>
</div>
<div class="cube flip-to-top twitter">
<div class="default-state">
<span>Whatsapp</span>
</div>
<div class="active-state twitter">
<span>+98-990-136-91-46</span>
</div>
</div>
<div class="cube flip-to-top">
<div class="default-state linkedin">
<span>Linkedin</span>
</div>
<div class="active-state linkedin">
<span>Ashkan Naeimipoor</span>
</div>
</div>
</div>
</div>
</div>
<script>
/*NAVBAR JAVASCRIPT-----------------------------------------*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
/*BACK ON TOP BUTTON JAVASCRIPT------------------------------------------------*/
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</html>

Add flex-wrap:wrap on .skill
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
flex-wrap: wrap; /*Add Here*/
}

I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}

You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>

I am building a netflix-like slider in which a hovered slider-item pushes the other slider-items aside (depending on their location).
(see example code)
I can't find a solution to the following situation:
when I hover item 3, all other items are pushed aside to the left and right precisely as I want.
when item 2 is hovered, I want item 1 (or any item left of .item-left) to not move(stay in position). all others go as planned.
when item 4 is hovered, I want item 3/2/1 to keep the same distance from 4 as when not hovered. item 5 behaves correctly.
Hovered Items need to stay within the lightblue area (show-peek).
how can I make this work? Any help is welcome.
Thank you!
var slider = document.getElementById('sli');
var prev = document.getElementById('prev');
prev.addEventListener('click', prevC, false);
var next = document.getElementById('next');
next.addEventListener('click', nextC, false);
function prevC() {
alert('-1')
}
function nextC() {
alert('+1');
}
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background-color: white/* rgba(20, 23, 26, .1) */
;
}
.page-head {
display: block;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.page-head h1 {
font-size: 2em;
color: red;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
/* general stuff */
.row {
display: block;
width: 400px;
margin: 0 auto;
/* overflow-x:hidden; */
}
.row-header {}
.row-header h2 {
font-size: 1.4em;
font-weight: 500;
padding: 8px 0;
margin-left: 45px;
}
.row-container {
position: relative;
}
.slider {
width: 100%;
padding: 0 41px 0 42px;
margin-top: 45px;
}
.slider .handle {
position: absolute;
top: 0;
bottom: 0;
z-index: 20;
width: 44px;
height: 69px;
text-align: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #fff;
background: rgba(20, 20, 20, .3);
z-index: .9;
cursor: pointer;
line-height: 69px;
}
.handle-prev {
left: 0;
}
.handle-next {
right: 0;
}
.show-peek {
display: inline-block;
width: 316px;
height: 69px;
background: lightblue;
overflow-x: visible;
vertical-align: middle;
border: 1px dotted grey;
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
.slider-content:hover .slider-item {
opacity: 1;
transform: translateX(-49px);
transition-delay: .85s;
}
.slider-content:hover .slider-item:hover {
opacity: 1;
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content li .bg-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
}
.slider-content li:hover {
transition-delay: 0.1s;
width: 200px;
height: 130px;
}
.slider-content .left-item:hover {
transform: translateX(0);
z-index: 999;
}
.slider-content .left-item:hover~.slider-item {
transform: translate3d(0px, 0, 0);
}
.slider-content .right-item:hover {
margin-left: -50px;
z-index: 999;
}
.slider-content li:hover a .content {
transform: translateY(0) translateX(-50%);
transition-delay: 0.75s;
opacity: 1;
}
.slider-content li a {
color: white;
text-decoration: none;
cursor: pointer;
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
}
.slider-content li a .content {
background: linear-gradient(transparent, rgba(0, 0, 0, .75));
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
transition-duration: .75s;
transition-delay: .4s;
opacity: 0;
padding: 40px 10px 10px 10px;
width: 400px;
}
.slider-content li a .content h2 {
font-weight: 300;
color: white;
font-size: 24px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="row">
<div class="row-header">
<h2></h2>
</div>
<div class="row-container">
<div class="slider">
<span id="prev" class="handle handle-prev"><</span>
<div class="show-peek">
<ul class="slider-content">
<li class="slider-item">1</li>
<li class="slider-item left-item">2</li>
<li class="slider-item">3
</li>
<li class="slider-item right-item">4</li>
<li class="slider-item">5</li>
</ul>
</div>
<!-- ends show-peek -->
<span id="next" class="handle handle-next">></span>
</div>
<!-- ends slider -->
</div>
<!-- ends row-container -->
</div>
<!-- ends row -->

I did say that there was not really a CSS only solution but it seems you can be a bit creative..
You can take advantage of the -webkit-transform: scale CSS attribute.
Take your ul's and li's like so :
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
We can add some CSS to itterate over their order and modify their hover
ul{
list-style:none;
}
ul:hover li {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}
ul:hover li:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition-duration: 0.1818181818s;
}
ul:hover li:hover ~ li {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
This works by using the animations in CSS and some clever use of the translate css also.

I'm having a very silly issue here. I'm sure I'm missing something simple, or am overlooking something.
I have a set of tabs that I would like to change the background image each time you click on a new tab link. Just a simple background image change. Can't seem to get the document.getElementById to work. I think I'm not targeting it correctly.
Excuse the sloppiness of the code, still organizing it. No JS was implemented.
Any help at getting this working would be great!
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
a {
color: #fff;
text-decoration: none;
}
/*header {
color: #yellow;
text-align: center;
min-height: 140px;
margin-bottom: 60px;
}*/
header h1{
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a{
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color:red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255,255,255,.1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1, #tab-1 + span {
left: 0;
}
#tab-2, #tab-2 + span {
left: 20%;
}
#tab-3, #tab-3 + span {
left: 40%;
}
#tab-4, #tab-4 + span {
left: 60%;
}
#tab-5, #tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display:block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float:left;
width:50%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float:left;
width:40%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong, .box40-2 strong {
font-weight:bolder;
font-size: 26px;
}
.box60-1 p, .box40-2 p {
text-align:center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image:url(picture-2.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image:url(picture-3.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic4 {
background-image:url(picture-4.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic5 {
background-image:url(picture-5.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
<div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked">
<span>Call Center</span>
<input type="radio" id="tab-2" name="tab-effect-1">
<span>Self-Service</span>
<input type="radio" id="tab-3" name="tab-effect-1">
<span>Customer Outreach</span>
<input type="radio" id="tab-4" name="tab-effect-1">
<span>Workforce Optimization</span>
<input type="radio" id="tab-5" name="tab-effect-1">
<span style="line-height:20px; padding-top:10px;">Cloud Infrastructure<br>and Platforms</span>
<!-- tab-content -->
<div id="tab-content" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div>

I suggest taking the onclick out of the anchor tag (it is not being read because what your actually clicking on to change tabs in the input) and placing an onchange in the input itself. You will also change the classnames of each to read tab-content pic1, tab-content pic2, etc. otherwise the tab-content class gets replaced totally.
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
input {
z-index: -1;
}
a {
color: #fff;
text-decoration: none;
}
header h1 {
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a {
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color: red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255, 255, 255, .1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1,
#tab-1 + span {
left: 0;
}
#tab-2,
#tab-2 + span {
left: 20%;
}
#tab-3,
#tab-3 + span {
left: 40%;
}
#tab-4,
#tab-4 + span {
left: 60%;
}
#tab-5,
#tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display: block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float: left;
width: 50%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float: left;
width: 40%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong,
.box40-2 strong {
font-weight: bolder;
font-size: 26px;
}
.box60-1 p,
.box40-2 p {
text-align: center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image: url(http://lorempixel.com/600/300/nature/2);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image: url(http://lorempixel.com/600/300/nature/3);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
<div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked" onclick="document.getElementById('tabContent').className='pic1'">
<span>Call Center</span>
<input type="radio" id="tab-2" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic2'">
<span>Self-Service</span>
<input type="radio" id="tab-3" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic3'">
<span>Customer Outreach</span>
<!-- tab-content -->
<div id="tabContent" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div>