Using data-attribute and click function to push data value to div

Using data-attribute and click function to push data value to div - javascript

I am using data-attributes to hold values for product names. When a user clicks on .compProdBlock I want the data-fastName to populate within the fastTitle field.
In my attempt I am using the push and each function. I am not getting any errors, but the data is not populating.
Does anyone see what I am doing wrong? Only the top two choices have data associated with them.
var fastShowName = [];
$('.compProdBlock').click(function() {
$('.compProdBlock').each(function() {
fastShowName.push($($(this).data('fastName')));
});
$('#fastTitle').html(fastShowName);
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>

The name of the data-* attribute should be data-fast-name instead of data-fastName.
No need for loop you could set the data of the current clicked element using :
$('#fastTitle').text( $(this).data('fast-name') );
$(function() {
$('.compProdBlock').click(function() {
$('#fastTitle').text($(this).data('fast-name'));
});
$('.compProdBlock:first').click();
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fast-name="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fast-name="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>

Use $('#id').attr('data-fastName') instead of $('#id').data('fastName')
If you only want to display the clicked item as title, you don't need to push all the fastName into an array.
var fastShowName = [];
$('.compProdBlock').click(function () {
$('#fastTitle').html($(this).attr('data-fastName'));
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>

There were 2 issues in your code. First you created array and that array would not be printed inside <h3> tag. because it's still an object. you can't print that. and another is after creation on DOM. Data part will be insensitive from case. so if you taking $(this).data('fastName') then it will return undefined. you will need to use $(this).data('fastname')
var fastShowName = '';
$('.compProdBlock').click(function () {
fastShowName = '';
$('.compProdBlock').each(function () {
fastShowName = fastShowName + $(this).data('fastname');
});
console.log(fastShowName);
$('#fastTitle').html(fastShowName);
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock" data-fastName="Standard 32b Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>

You need to modify the javascript to get the attribute 'data-fastName' of the div:
var fastShowName = [];
$('.compProdBlock').click(function () {
$('.compProdBlock').each(function () {
fastShowName.push($(this).attr('data-fastName'));
});
$('#fastTitle').html(fastShowName);
});

Related

Make html element only visible in one section of page

im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>

I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle

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>

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>

toggle Jquery doesn't work

I have an issue with jquery toggle, it does not toggle the current div but instead the next div of the current one, when I try to change the class of the toggle div it doesn't work at all. Can anyone help me please ?
P.S: I'm toggling the SITES block, I wrapped it's content (background: yellow) in the class="clsDashRegion_sitesBloc", when I put this class in my JS it does not work.
Here is my code
(function zipContentBloc($) {
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
// Toggle the panel next to the item that was clicked
$(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
})(jQuery);
/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
position: absolute;
top: 6%;
right: 0.5rem;
transform: translateY(-50%);
font-size: 1.8rem;
}
/* Plus */
.clsDashRegion_zipIndicator::after {
content: '\002B';
}
/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
content: '\002D';
font-size: 3rem;
}
.clsDashRegion_levelOne {
width: 25rem;
/* height: 100%; */
background: #3c4647;
position: relative;
}
.clsDashRegion_catgBloc {
position: relative;
left: 2%;
width: calc(100% - 1rem);
height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.9);
opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
height: 2.5rem;
background: aqua;
}
.clsDashRegion_catgLogoBloc {
width: 2.5rem;
height: 2.5rem;
float: left;
}
.clsDashRegion_catgTitleBloc {
float: left;
width: calc(100% - 5.5rem);
height: 2.5rem;
color: #000000;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
float: right;
width: 3rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
/* position: absolute; */
/*float: none;*/
display: block;
float: right;
width: 10rem;
height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
float: left;
width: 5rem;
height: 2.5rem;
color: #000000;
text-align: center;
font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
position: relative;
float: right;
display: block;
width: 100%;
height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
float: left;
width: 50%;
height: 2.5rem;
font-weight: bold;
margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
float: right;
width: 5rem;
height: 2.5rem;
text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
position: relative;
float: left;
display: block;
width: 100%;
height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
position: relative;
float: left;
display: block;
width: 100%;
height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
position: relative;
float: left;
top: 1rem;
text-align: center;
}
.clsDashRegion_buttonValue {
width: 5rem;
height: 1.5rem;
margin-left: 2rem;
border: 1px solid;
line-height: 1.4rem;
background: chartreuse;
border-style: groove;
}
.clsDashRegion_buttonTitle {
margin-left: 1.5rem;
line-height: 1.4rem;
font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
position: relative;
float: right;
display: block;
width: 100%;
top: 0.5rem;
text-align: center;
font-weight: bold;
}
.clsDashRegion_valueTech {
float: left;
width: calc(100% - 4rem);
margin-bottom: 0.5rem;
border-style: groove;
letter-spacing: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
<div class="clsDashRegion_levelOne">
<div class="clsDashRegion_catgBloc">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
<div class="clsDashRegion_catgTitleBloc">ALARMES</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Critique</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:8em;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TICKETS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocTicket">
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:20rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
<div class="clsDashRegion_catgTitleBloc">SITES</div>
<div class="clsDashRegion_zipIndicator"></div>
</div>
<div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">-3dB</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Rx</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Perte HF</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocGE">
<div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V2</div>
<div class="clsDashRegion_buttonTitle">- 10 jrs</div>
</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:18rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
</div>
</div>
</div>
</div>
</div>

Happens because you use extra selector with on('click', '.clsDashRegion_catgBloc',...
Try this:
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
// Toggle the panel next to the item that was clicked
$( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
$(this) = $('.clsDashRegion_levelOne'); - block which you add .on();
$( event.target ) =$('.clsDashRegion_catgBloc'); - block which was exactly clicked
Fiddle example: https://jsfiddle.net/z4tdxmbk/
Check this also

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!

Develop Reference

JavaScript is the programming language of the Web.

Using data-attribute and click function to push data value to div - javascript

You need to modify the javascript to get the attribute 'data-fastName' of the div: var fastShowName = []; $('.compProdBlock').click(function () { $('.compProdBlock').each(function () { fastShowName.push($(this).attr('data-fastName')); }); $('#fastTitle').html(fastShowName); });

Related

Make html element only visible in one section of page

Why my slick slider with indicator not working?

Close Multiple Popup Message Boxes using Vanilla Javascript

toggle Jquery doesn't work

jQuery commands not working

Categories

Resources