Horizontal Scroll on hover / on click - javascript

First of all thanks in advance for any help.
Case:
I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs.
I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.
Problem:
I've already tried with some CSS and JavaScript but I can't seem to get this right.
Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?
I've made a fiddle: https://jsfiddle.net/wsemLhtz/
Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.
Best regards.
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
<div class="box-outer">
<a class="arrow-left">L</a>
<a class="arrow-right">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>


You can use that)
var box = $(".box-inner"), x;
$(".arrow").click(function() {
if ($(this).hasClass("arrow-right")) {
x = ((box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x,
})
} else {
x = ((box.width() / 2)) - box.scrollLeft();
box.animate({
scrollLeft: -x,
})
}
})
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box-outer">
<a class="arrow-left arrow">L</a>
<a class="arrow-right arrow">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
Fiddle


FIDDLE:
$('a').click(function() {
switch ($(this).text()) {
case "L":
$('.box-inner').scrollLeft(-300);
break;
case "R":
$('.box-inner').scrollLeft(300);
break;
}
});


use jquery like following........
$(".arrow-left").click(function () {
var leftPos = $('.box-inner').scrollLeft();
$(".box-inner").animate({scrollLeft: leftPos - 50}, 1);
});
$(".arrow-right").click(function () {
var leftPos = $('.box-inner').scrollLeft();
$(".box-inner").animate({scrollLeft: leftPos + 50}, 1);
});
EDIT: Here is updated fiddle https://jsfiddle.net/wsemLhtz/5/


There you go ! Solution here using some simple Jquery :)
http://codepen.io/AxelCardinaels/pen/rxMrem
HTML :
<div class="box-outer">
<a class="arrow-left">L</a>
<a class="arrow-right">R</a>
<div class="box-inner">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
CSS :
.box-outer {
width: 20rem;
height: 6rem;
position: relative;
}
.arrow-left {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
left: 0rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.arrow-right {
position: absolute;
width: 2rem;
height: 2rem;
top: 1.5rem;
right: 10rem;
z-index: 1;
background-color: yellow;
border: 1px solid black;
}
.box-inner {
width: 10rem;
height: 6rem;
position: absolute;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
.thumb {
height: 5rem;
width: 2rem;
background-color: green;
border: 1px solid black;
display: inline-block;
}
JS :
$(".arrow-left").click(function(){
// To get actual position
var actualScroll = $(".box-inner").scrollLeft();
// To set new position
$(".box-inner").scrollLeft(actualScroll+50)
})
Hope this is what you were looking for !

Related

Why my slick slider with indicator not working?

I have a question about slick sliders. I've made a slider with a slick, I want to create an indicator for each slide. I have the code in Codepen, please check.
What I Want
When I was on the first slide, the active border was on the slider 1 indicator, when I was on slide 2 the indicator was on the slider 2 indicator as below.
I've been looking for several ways but still nothing I can use. if you know how, please help me. Because I don't know how to make custom indicators like that. I need your help please.
HTML
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",
nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});

Check out this snippet:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
}
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active, .slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>

Make parent div behind child element

I'm using jQuery.Gantt in a project and I need do many customization in this plugin.
One of this is pass mouse over an element (blue cells) and show a tooltip (in example I put a title).
I have some divs that "highlight" weekends and these divs is over gantt elements (blue cells)
If I change z-index of cells they will overlay the header (month and day) in horizontal scroll.
I trying to find a way to get the following order: weekend div with z-index 0, gantt cells (blue) with z-index 1 and header with z-index 2. I need this order to display the title on gantt cells and use mouseover event on weekend cells.
How can I achieve this with the example below?
.dataPanel {
outline: 1px solid #DDD;
background-position-y: 15px;
background-size: 30px 48px;
background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%);
background-repeat: repeat;
position: relative;
font-family: 'Verdana, sans-serif';
}
.header {
position: sticky;
top: 0;
z-index: 600;
width: 241px;
background: #fff;
height: 63px;
}
.row {
float: left;
height: 24px;
line-height: 24px;
margin: 0;
}
.dayPosition {
top: 46px;
}
.monthPosition {
top: 15px;
}
.day {
background-color: #fff;
width: 24px;
line-height: 24px;
text-align: center;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
font-size: 10px;
color: #007E7A;
}
.row .sa,
.row .sn,
.row .wd {
height: 24px;
text-align: center;
width: 29px;
}
.bar {
background-color: #D0E4FD;
height: 18px;
margin: 0 3px 3px 0;
position: absolute;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
border-radius: 3px;
}
<div class="dataPanel" style="width: 27540px; height: 732px;">
<div class="header">
<div class="row header monthPosition">
JAN
</div>
<div class="row header dayPosition">
<div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000">
<div class="fn-label">WED</div>
</div>
<div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000">
<div class="fn-label">THU</div>
</div>
<div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000">
<div class="fn-label">FRI</div>
</div>
<div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000">
<div class="fn-label">SAT</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000">
<div class="fn-label">SUN</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000">
<div class="fn-label">MON</div>
</div>
<div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000">
<div class="fn-label">TUE</div>
</div>
<div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000">
<div class="fn-label">WED</div>
</div>
</div>
</div>
<div title="Saturday" class="bar" style="top: 63px; left: 90px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Sunday" class="bar" style="top: 63px; left: 120px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Monday" class="bar" style="top: 63px; left: 150px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Tuesday" class="bar" style="top: 63px; left: 180px; width: 29px;"><div class="fn-label">24</div></div>
</div>
Code in JSFiddle

You just need to add pointer-events: none; to the overlay div.

Close Multiple Popup Message Boxes using Vanilla Javascript

I'd like to know how to close multiple popup boxes by clicking close buttons with Pure Javascript.
I tried the code below, but it didn't work.
JavaScript
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}

const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.style.display ='none';
});
});
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>

Try this
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>

Jump on slideUp jQuery

I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?

Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump

jQuery commands not working

I am working on a website for a project of mine, and I am trying to incorporate some simple jQuery commands. They don't seem to be working. Please read through and let me know if I am missing something.
HTML Code:
<div class="button"> Home</div>
<div class="button"> About us</div>
<div class="button"> Contact us</div>
<div class="button-right" id="businesses"> <a href="forbusinesses.htm" class="a-top">For
businesses</a></div>
<div class="button-right"> For users</div>
<div class="fluid-margin">
<div class="orange-body">
<div class="fake-header">
<img src="http://i879.photobucket.com/albums/ab358/dylanhusted/bulletnlogotranssmall_zpsa04c3fed .png" id="logo"/>
</div>
</div>
</div>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
<div class="footer">
Home
About Us
Contact Us
</div>
</body>
</html>
CSS Code:
body {
background-color: #ffffff;
}
#landing-page {
width: 100%;
position:relative;
width:100%;
padding-bottom: 40%;
height:0;
overflow:hidden;
z-index: -1;
}
#line {
margin-left: 0;
margin-bottom: 0;
width: 100%;
}
.orange-body {
width: 70%;
z-index: -3;
border-radius: 5px;
margin: auto;
}
.fluid-margin {
position:relative;
width:100%;
padding-bottom:8%;
height:0;
overflow:hidden;
}
.fake-header {
width: 70%;
position: absolute;
border-radius: 5px;
margin-top: 1%;
margin-left: 15%;
z-index: -0;
}
#logo {
width: 28%;
height: 63%;
margin-top: .7%;
margin-left: 14%;
z-index: 1;
}
.button {
display: inline-block;
font-family: Trebuchet MS;
color: #8d8d8d;
font-size: 110%;
padding: 5px;
}
jQuery Code:
$(document).ready(function() {
$('a').mouseover(function() {
(this).css("color", "#dfdbd8");
});
});
Thanks!

Try:
$('a').mouseover(function() {
$(this).css("color", "#dfdbd8");
});
So I am an idiot!
In your css add:
a:hover{color:#dfdbd8}
I didn't read close enough, and you dont actually require JS to do it!

Categories

Resources