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
Related
I got 6 divs of which they each have an image and a button (javascript). When I click on a button of one of the divs, another div will show on the exact same place of the button of the div you clicked. When I click on all buttons separate, there is no problem. But when I click by example 'auto 2' and 'auto 3', 'auto 3" will show on the right side of the screen, not on the place where it will show when you click on the button separate. I got also this problem with 'auto 4,5 and 6. I dont got this problem with the first div 'auto 1' because its has an absolute position. When I used an absolute position on the other divs i couldnt position them properly. I think the problem has to do something with the fact that a div has a block display and that by example 'auto 2' pushes 'auto 3" to the side because it is wider than it looks.
PS. srry for my bad english and I used and internal javascript with tags because an external document like .js doesnt work for me for some reason
Thanks in advance!
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
background-color: #234aa6;
}
.auto{
padding-top: 4em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
}
.auto h1{
font-size: 40px;
}
.auto img{
width: 90%;
height: auto;
padding-top: 1em;
}
.auto button{
background-color: darkblue;
color: white;
padding: 20px;
font-family: helvetica;
font-size: 20px;
text-transform: uppercase;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
}
.auto button:hover{
transition: 0.4s;
background-color: #011b57;
}
.container {
text-align: center;
}
.auto:nth-of-type(3n+1) {
clear:left;
}
.wrapper input{
padding: 20px 100px 20px 100px;
text-align: center;
margin-top: 10em;
background-color: white;
border: none;
}
.select1{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: absolute;
display: none;
}
.select1 h1{
font-size: 40px;
}
.bg{
width: 570.83px;
height: 325px;
background-color: darkblue;
text-align: center;
margin: auto;
margin-top: 0.5em;
font-family: helvetica;
font-size: 2.5em;
padding-top: 3.5em;
}
.select2{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 65.5em;
}
.select2 h1{
font-size: 40px;
}
.select3{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 65.5em;
}
.select3 h1{
font-size: 40px;
}
.select4{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 0.25em;
bottom: 32.9em;
}
.select4 h1{
font-size: 40px;
}
.select5{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 32.9em;
}
.select5 h1{
font-size: 40px;
}
.select6{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 32.9em;
}
.select6 h1{
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sleutelkast</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="autolijst">
<div class="auto">
<h1>Auto 1</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button1">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 2</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button2">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 3</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button3">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 4</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button4">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 5</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button5">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 6</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button6">SELECTEER</button>
</div>
</div>
</div>
<div class="selectlijst">
<div class="select1" id="select1">
<h1>Auto 1</h1>
<div class="bg" id="bg">
Sleutel 1
</div>
</div>
<div class="select2" id="select2">
<h1>Auto 2</h1>
<div class="bg" id="bg">
Sleutel 2
</div>
</div>
<div class="select3" id="select3">
<h1>Auto 3</h1>
<div class="bg" id="bg">
Sleutel 3
</div>
</div>
<div class="select4" id="select4">
<h1>Auto 4</h1>
<div class="bg" id="bg">
Sleutel 4
</div>
</div>
<div class="select5" id="select5">
<h1>Auto 5</h1>
<div class="bg" id="bg">
Sleutel 5
</div>
</div>
<div class="select6" id="select6">
<h1>Auto 6</h1>
<div class="bg" id="bg">
Sleutel 6
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".select1").hide();
$("#button1").click(function(){
if($(".select1").is(':visible')){
$(".select1").slideUp(100);
}
else
{
$(".select1").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select2").hide();
$("#button2").click(function(){
if($(".select2").is(':visible')){
$(".select2").slideUp(100);
}
else
{
$(".select2").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select3").hide();
$("#button3").click(function(){
if($(".select3").is(':visible')){
$(".select3").slideUp(100);
}
else
{
$(".select3").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select4").hide();
$("#button4").click(function(){
if($(".select4").is(':visible')){
$(".select4").slideUp(100);
}
else
{
$(".select4").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select5").hide();
$("#button5").click(function(){
if($(".select5").is(':visible')){
$(".select5").slideUp(100);
}
else
{
$(".select5").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select6").hide();
$("#button6").click(function(){
if($(".select6").is(':visible')){
$(".select6").slideUp(100);
}
else
{
$(".select6").slideDown(100);
}
});
});
</script>
</html>
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>
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);
});
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
The inner Java script is override the CSS property on this HTML code initially I set the value of ID bad as none using CSS. However it is not working on the code example below. The Java script is not working properly if you look at the ID bad, initially it's value is none but it shown the data before clicking on the image.
How can I fix it?
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" onclick="myFunction()" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
.icon{
color :red;
background-color:yellow;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<i class="icon fa fa-anchor" onclick="myFunction()" id="button"></i>
<!-- <img src="button.jpg" onclick="myFunction()" id="button">--><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
Your issue shows when you load the page:
VM748:162 Uncaught SyntaxError: Unexpected token {
And in the console when you try to click the button:
VM851:178 Uncaught ReferenceError: myFunction is not defined
The problem is that your function is missing parentheses. Change it to:
function myFunction() {
document.getElementById("bad").style.display = "block";
}
Example fiddle.
It seems to be a syntax error. Look at the way you have deifned the function.
function myFunction{
document.getElementById("bad").style.display="block";
}
it should be
function myFunction**()**{
document.getElementById("bad").style.display="block";
}