Scrolling horizontally from left or right to the same position - javascript

I have a row of 4 buttons, and above them, I have a container that scrolls horizontally. When clicking on a button, it should scroll to a specific point in the container. I use an <a href> tag and id= attribute to connect button and scroll area.
Unfortunately, when I click on a button that should move the content back to the left, the content connected to that button is shown differently than when clicking that same button when moving content to the right.
How can I fix this?
Click from left to right:
Click from right to left:
The content inside a horizontal slider:
<div class="MainDiv_tablet">
<h2>Lees</h2> <h2 class="bold">Testimonials</h2>
<div class="SecondDiv_tablet">
<div class="horizontal_slider">
<div class="slider_container">
<div class="item1">
<img class="couple" id="Testimonial1"
src="./Assets/Testimonials_1_mobile.png" alt="Testimonial 1">
<div class="testimonial1">
<p class="testimonial">
We hoorden Strings 4 Weddings spelen op de bruiloft
van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven.
Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf
gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De
organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft
zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
</p>
</div>
</div>
<div class="item2">
<img class="couple" id="Testimonial2"
src="./Assets/Testimonials_2_mobile.png" alt="Testimonial 1">
<div class="testimonial2">
<p class="testimonial">
We hoorden Strings 4 Weddings spelen op de bruiloft
van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven.
Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf
gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De
organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft
zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
</p>
</div>
</div>
<div class="item3">
<img class="couple" id="Testimonial3"
src="./Assets/Testimonials_3_mobile.png" alt="Testimonial 1">
<div class="testimonial3">
<p class="testimonial">
We hoorden Strings 4 Weddings spelen op de bruiloft
van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven.
Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf
gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De
organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft
zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
</p>
</div>
</div>
</div>
</div>
</div>
The set of buttons:
<div id="scrollbar">
<button class="btn active"><a href="#Testimonial1">
<svg width="104" height="10" viewBox="0 0 104 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="104" height="10" rx="5" fill="white"/>
</svg>
</a>
</button>
<button class="btn"><a href="#Testimonial2">
<svg width="104" height="10" viewBox="0 0 104 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="104" height="10" rx="5" fill="white"/>
</svg>
</a>
</button>
<button class="btn"><a href="#Testimonial3">
<svg width="104" height="10" viewBox="0 0 104 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="104" height="10" rx="5" fill="white"/>
</svg>
</a>
</button>
<button class="btn">
<svg width="104" height="10" viewBox="0 0 104 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="104" height="10" rx="5" fill="white"/>
</svg>
</button>
</div>
The function JS to click on buttons and have it change color:
<script>
var header = document.getElementById("scrollbar");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
The CSS:
.MainDiv_tablet {
display: inline-block;
flex-direction: row;
justify-content: center;
width: 100%;
height: 450px;
border: 5px solid white;
border-radius: 20px 0px 0px 20px;
margin-top: 20px;
margin-right: 0px;
padding-top: 40px;
text-align: center;
}
.SecondDiv {
display: none;
}
.SecondDiv_tablet {
position: absolute;
z-index: 0;
display: block;
justify-content: flex-start;
width: 530px;
height: 500px;
border: 5px solid white;
border-radius: 20px 0px 20px 20px;
margin-top: 8px;
margin-right: 0px;
padding-top: 50px;
padding-right: 0px;
right: 0%;
}
.horizontal_slider {
position: absolute;
display: flex;
justify-content: center;
overflow-y: scroll;
width: 100%;
height: 670px;
}
.slider_container {
display: flex;
justify-content:space-between;
}
I watched movies that integrate JS, a horizontal nav__list with buttons, jumping to a vertical positioned content. In my case I need the button to switch to the next horizontal content.

Related

Why my button and a tag do not work at all

I am having an issue with the button and a tag will act like a paragraph won't open nothing won't do nothing and I can't figure it out.
here is my html for the page with the problems (on my other sections work just fine only on this section won't work.
.main-bonus {
position: relative;
width: 100%;
margin-top: 50px;
z-index: -1;
}
.bonus-logo {
width: 600px;
padding: 25px;
}
.main-bonus-txt {
color: var(--main-l);
text-align: center;
padding: 25px 0px;
}
.top-mb {
display: flex;
align-items: center;
justify-content: center;
}
.place-bonus {
position: relative;
color: var(--main);
margin: 40px;
border: 1px solid var(--light);
text-align: center;
border-radius: 15px;
padding: 10px;
height: 360px;
background-color: black;
}
.place-bonus h3 {
margin: 10px 0px;
}
.place-bonus-1 {
position: relative;
color: var(--main);
margin: 50px;
border: 1px solid var(--light);
text-align: center;
border-radius: 10px;
padding: 10px;
background-color: black;
width: 80%;
}
.left-mb {
display: grid;
grid-template-columns: 1fr 1fr;
}
.first-place {
position: absolute;
bottom: 164px;
left: 520px;
width: 100px;
}
.second-place {
position: absolute;
bottom: 167px;
left: 186px;
width: 100px;
}
.third-place {
position: absolute;
bottom: 167px;
left: 186px;
width: 100px;
}
.bonus-simplu {
padding: 10px;
margin: 20px;
color: var(--main);
background-color: transparent;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
font-size: 16px;
}
<div class="main-bonus">
<div class="main-bonus-txt">
<h1>Joacă ACUM FĂRĂ DEPUNERE</h1>
</div>
<div class="top-mb">
<div class="place-bonus-1">
<img src="img/bonus/magicjackpot.png" alt="Magic Jackpot Logo" class="bonus-logo">
<img src="img/bonus/Asset-1.png" alt="" class="first-place">
<h3>400 rotiri Burning si Shining (*depunere minima)</h3>
<form action="https://stackoverflow.com/">
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</form>
Ia bonusul
</div>
</div>
<div class="left-mb">
<div class="place-bonus">
<img src="img/bonus/superbet.png" alt="Superbet Logo" class="bonus-logo">
<img src="img/bonus/Asset-2.png" alt="" class="second-place">
<h3>200 rotiri FARA DEPUNERE Shining Crown</h3>
<form action="https://stackoverflow.com/">
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</form>
Ia bonusul
</div>
<div class="place-bonus">
<img src="img/bonus/winner.png" alt="Winner Logo" class="bonus-logo">
<img src="img/bonus/Asset-3.png" alt="" class="third-place">
<h3>100 rotiri FARA DEPUNERE Shining Crown</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/maxbet.png" alt="Maxbet Logo" class="bonus-logo">
<h3>350 rotiri FARA DEPUNERE la Shining Crown</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/luck.png" alt="Luck Casino Logo" class="bonus-logo">
<h3>25 rotiri FARA DEPUNERE + bonus CASH FARA RULAJ</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/frankcasino.png" alt="Frank Casino Logo" class="bonus-logo">
<h3>500 rotiri GRATIS la EGT (*depunere minima)</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/unibet2.png" alt="Unibet Logo" class="bonus-logo">
<h3>333 rotiri GRATIS la EGT (*depunere minima)</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/las-vegas-1.png" alt="Las Vegas Logo" class="bonus-logo">
<h3>200 rotiri FARA DEPUNERE SuperHot (FĂRĂ RULAJ)</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/vladcazino.png" alt="Vlad Casino Logo" class="bonus-logo">
<h3>400 rotiri GRATIS la EGT (*depunere minima)</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
<div class="place-bonus">
<img src="img/bonus/mrbit.png" alt="MrBit Casino Logo" class="bonus-logo">
<h3>250 rotiri GRATIS la EGT (*depunere minima)</h3>
<button class="bonus-simplu">Înregistrează-te si ia bonusul</button>
</div>
</div>
I did check to see if any images overlay the buttons or a tag, but no luck... I google it but still didn't find anything..

SVG does not scale up again

Currently I'm making a band-site with HTML. My idea was to have a banner in the -tag where you can click on seperate members to go to there individual page, in an "about us"-page. The basics work, but I have 2 problems.
If I scale the page down the 's are responsive but if I scale up they aren't anymore.
The whole SVG works only on my laptop on any other device it does not work at all.
How can I fix this?
This is the, relevant, code I have right now:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html{
font-family:'Lato', sans-serif;
text-align:center;
background-color:#F1F1F1;
color:#212121;
font-size:1.0875vw;
}
#media screen and (max-width:1150px){
html{
font-size:12.50625px;
}
}
body{
margin:0px;
}
.afbeelding_container{
position:relative;
float:left;
}
.afbeelding_container .tekst_container{
position:absolute;
top:10px;
left:20px;
color:#FFFFFF;
}
.svg_container{
position:absolute;
top:0.625em;
left:1.25em;
}
.MenuButton{
font-size:38px;
cursor:pointer;
color:#F1F1F1;
float:left;
}
#media screen and (max-width:441.92px) {
.MenuButton {
font-size:8.2vw;
}
}
</style>
</head>
<body>
<nav style="width:100%">
<div style="width:100%" class="afbeelding_container">
<img src="Afbeeldingen/Jeopardy Banner 1.jpg" style="width:100%">
<div class="svg_container">
<svg viewBox="0 0 1600 460">
<g class="hover_group" opacity="0">
<a href="maudn.html">
<rect x="195.2" y="54.4" width="228.8" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="maudj.html">
<rect x="448" y="54.4" width="214.4" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="bjorn.html">
<rect x="691.2" y="54.4" width="234.56" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="anne.html">
<rect x="960" y="54.4" width="200" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="merwin.html">
<rect x="1174.4" y="54.4" width="219.52" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<a href="https://www.sophiebik.nl">
<rect x="0" y="403" width="100" height="56" style="fill:blue;fill-opacity:0"/>
</a>
</svg>
<div class="tekst_container">
<p><div id="myNav" class="overlay">
×
<div class="overlay-content" style="margin-left:1.vw">
<a href="index.html" >Home</a>
Over ons
Contact
</div>
</div>
<span class="MenuButton" id="MenuButton" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementById("MenuButton").style.color = "#222";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("MenuButton").style.color = "#F1F1F1";
}
</script>
</p>
</div>
</div>
</div>
</nav>
</body>
</html>

I would suggest abandoning your plan of using a scalable SVG for this and simple allow the box to be sized by your images, and place boxes inside it absolute to align with the image position. The below example is very simple, and once you have your percentage locations and widths, the example will scale up and down perfectly:
header {
position: relative;
width: 80vw;
height: auto;
margin: 0px auto;
}
header img {
width: 100%;
}
header a {
position: absolute;
border: 1px solid red;
}
header a#member1 {
width: 23%;
height: 25%;
top: 25%;
left: 13%;
}
header a#member2 {
width: 13%;
height: 55%;
top: 5%;
left: 43%;
}
header a#member3 {
width: 33%;
height: 15%;
top: 35%;
left: 65%;
}
<header>
<img src="http://placehold.it/900x300" />
Band Member 1
Band Member 2
Band Member 3
</header>
Keep in mind all my values are really just examples, as I have no idea what your actual desired result should look like.

JQuery slider next and prev buttons only work when click spamming them

So I'm making a custom jquery slider where you can browse through content sliders by using next and prev buttons (classes next and prev in the DOM). For some reason the results I am getting are quite random, only changing from slide to slide after spamming the prev button, I console log the results so that you can see the visible index.
Here is my code:
$(document).ready(function(){
var sliders = $('.slider');
var show_index = 0;
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
console.log(sliders.length);
$('.prev').click(function(){
console.log('clicked prev');
if(show_index == 0){
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index-1).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index--).addClass('active_slider');
console.log(show_index);
}
});
$('.next').click(function(){
console.log('clicked next');
if(show_index == sliders.length){
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(0).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index++).addClass('active_slider');
console.log(show_index);
}
});
});
/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.prev{cursor:pointer; position:absolute; left:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.next{cursor:pointer; position:absolute; right:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
.gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
.gran_slider_big_item_container{display:none; width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
.active_slider{display:flex;}
/*GRAN SLIDER END*/
.from_right_to_bottom {
position: absolute;
right: 120px;
opacity: 0;
animation-name: from_right_to_bottom;
animation-delay: 1500ms;
animation-duration: 6s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-iteration-count: 1;
z-index:9999;
text-align:right;
}
#keyframes from_right_to_bottom {
0% {top: -200px; opacity: 0;}
100% {top: 250px; opacity: 1;}
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="gran_slider_maincontainer" style="">
<div class="gran_slider_big_container" style=" ">
<i class="prev fa fa-chevron-left" style=""></i>
<i class="next fa fa-chevron-right" style=""></i>
<!--
<div class="gran_slider_big_navegation_container" style=" ">
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
</div>
-->
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:blue;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:red;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:green;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
</div>
<div class="gran_slider_small_container" style=""></div>
</div>

I think you need to set your global variable (show_index) in your click events. Just doing show_index++ doesn't set the value... you need to set the value with an equals (=) sign, like this show_index = {some value};
Your prev click event should look more like this:
$('.prev').click(function() {
console.log('clicked prev');
if (show_index == 0) {
$('.slider').eq(show_index).removeClass('active_slider');
show_index = (sliders.length - 1); // set your global variable
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
} else {
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index - 1; // set your global variable
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
});
And the next one like this:
$('.next').click(function() {
console.log('clicked next');
if (show_index == (sliders.length- 1)) {
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; //set global variable
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
} else {
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; //set global variable
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
});
var show_index = 0;
$(document).ready(function(){
var sliders = $('.slider');
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
console.log(sliders.length);
$('.prev').click(function(){
console.log('clicked prev');
if(show_index == 0){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = (sliders.length - 1);// set it here
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index - 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
});
$('.next').click(function(){
console.log('clicked next');
if(show_index == (sliders.length- 1)){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; // set it here
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
}
});
});
/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.prev{cursor:pointer; position:absolute; left:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.next{cursor:pointer; position:absolute; right:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
.gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
.gran_slider_big_item_container{display:none; width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
.active_slider{display:flex;}
/*GRAN SLIDER END*/
.from_right_to_bottom {
position: absolute;
right: 120px;
opacity: 0;
animation-name: from_right_to_bottom;
animation-delay: 1500ms;
animation-duration: 6s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-iteration-count: 1;
z-index:9999;
text-align:right;
}
#keyframes from_right_to_bottom {
0% {top: -200px; opacity: 0;}
100% {top: 250px; opacity: 1;}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<div class="gran_slider_maincontainer" style="">
<div class="gran_slider_big_container" style=" ">
<i class="prev fa fa-chevron-left" style=""></i>
<i class="next fa fa-chevron-right" style=""></i>
<!--
<div class="gran_slider_big_navegation_container" style=" ">
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
</div>
-->
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:blue;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:red;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:green;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
</div>
<div class="gran_slider_small_container" style=""></div>
</div>

Hiding play button initially

How would I hide the Playbutton when viewing the cover image, and show it after you click on the image?
I've been trying different ways, but can't seem to get it.
Full Code:
https://jsfiddle.net/0yxvpa09/12/
Click on the image to reveal a grid
Screenshot
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
}
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
</script>

(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
document.querySelector(".playButton").classList.remove("hide");
}
document.querySelector(".playButton").classList.add("hide");
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
.cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.links div {
margin: 0 0 12px 0;
}
.links a {
display: block;
width: 50px;
height: 50px;
background-color: green;
margin: -50px 0 0;
transition: 0.5s ease-in-out;
}
a.x1 {
margin: 0
}
a.x2 {
margin-left: 54px
}
a.x3 {
margin-left: 108px
}
a.x4 {
margin-left: 162px
}
a.x5 {
margin-left: 216px
}
.links a:hover,
.links a:active,
.links a:focus {
background: blue;
}
.scrl a:visited {
background: orange;
color: #000000;
}
.scrl a:hover {
background: red;
}
.hide {
display: none;
}
.links div:last-child {
margin-bottom: 0;
}
.playButton {
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
fill: #aaff00;
margin: -112px 0 0 108px;
}
.playButton.playing {
background-color: #000000;
}
<div class="cover">Links</div>
<div class="test hide">
<div class="links ">
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
</div>
Hide your play button div onload using your class hide. then remove it on click of cover element.

add
position:absolute;
z-index:999;
to your .cover class
and than added
position:absolute;
z-index:1;
to your .playButton class.

Just add the hide class to the play button and add document.querySelector(".playButton").classList.remove("hide"); to the hideClickedElement function.
JSFiddle: https://jsfiddle.net/0yxvpa09/19/

svg rect doesnt respond with another div fixed with a high z-index

I want to have the rectangles in the svg tag to show up and change opacity on hover. I had this whole code working, but after adding a fixed div with a high z-index, the svg no longer worked (The hover effect has worked briefly but not consistently so I know that the elements are still where they should be).
<style>
.hover_group:hover
{
opacity:1;
}
#projectsvg
{
position: relative;
width: 100%;
vertical-align: middle;
margin: 0;
overflow: hidden;
margin:10px;
}
#projectsvg svg
{
position: relative;
float: left;
top: 0;
left: -199;
}
</style>
<div class="row" style="background-image: url(../img/home/blue_bk.jpg);">
<div class="col-xs-1 col-sm-0"></div>
<div class="col-xs-10 col-sm-5 col-lg-4">
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="500 -50 920 1180" preserveAspectRatio="xMinYMin meet" >
//set your background image
<image width="1920" height="1080" xlink:href="../img/home/pain_chart3.png">
</image>
<!-- Shoulder-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="130.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- Hand-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="300.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- knee-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="862" y="560.1" opacity="0.2" fill="#FFFFFF" width="180.6" height="80.8"></rect>
</a>
</g>
<!-- Elbow-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="1132" y="190.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
</svg>
</figure>
</div>
<div class="col-xs-12 col-sm-7 col-lg-8">
<h1>hello</h1>
</div>
</div>
Is there any way to fix the bug, or do I have to write the code manually?

Categories