According to the button 1 image is shown - javascript

I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>


This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>

Related

How to stop swiper.js swiper slides moving to top onclick?

i have created a sliding menu that shows two items at a time. However, when the second slide in view is clicked, instead of loading in content, it puts the slide to the top of the nav and then it will load content once clicked again.
I would like the slide to load in the content and not move to the top, it does it once the slides reach the ned but i could have 20 slides in at a time.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
overflow: hidden;
width: 990px;
height: 1570px;
margin: 0 0 0 25px;
font-family: open sans;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 20px;
border: 20px #fff solid;
}
.poiIframe {
overflow: hidden;
width: 990px;
height: 100%;
left: 25px;
margin: 0;
z-index: 1;
background: white;
border: 0px;
}
.poiMenu {
overflow: hidden;
position: absolute;
width: 410px;
height: 830px;
bottom: 200px;
left: 55px;
}
.swiper-container {
position: absolute;
width: 100%;
height: 102%;
top: 0px;
left: 0px;
z-index: 100;
}
.poiBtn {
overflow: hidden;
position: absolute;
width: 350px;
height: 350px;
top: 10px;
left: 10px;
background: white;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.poiBtnImg {
overflow: hidden;
position: absolute;
width: 330px;
height: 170px;
top: 10px;
left: 10px;
border-bottom: solid 2px #F0F0F0;
border-radius: 20px;
z-index: 10;
}
.poiBtnTitle {
overflow: hidden;
position: absolute;
width: 330px;
height: 140px;
top: 200px;
left: 10px;
color: #222;
font-size: 2.1vh;
display: table;
}
.poiBtnTitle span {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
.poiFtr {
position: absolute;
overflow: hidden;
bottom: 25px;
left: 50px;
height: 150px;
width: 990px;
background-image: url(../img/bg/iframeFtrBg.png);
background-repeat: no-repeat;
z-index: 10;
background-color: white;
}
.poiFtrBtn {
position: absolute;
overflow: hidden;
top: 20px;
height: 122px;
width: 138px;
z-index: 100;
background-repeat: no-repeat;
border: 0;
}
.attractions {
background-image: url(../img/btn/NCity/attractionsBtn.png);
left: 0px;
}
.universities {
background-image: url(../img/btn/NCity/universitiesBtn.png);
left: 420px;
}
.hospitals {
background-image: url(../img/btn/NCity/hospitalsBtn.png);
left: 280px;
}
.transport {
background-image: url(../img/btn/NCity/transportGreyBtnV2.png);
left: 560px;
}
.entertainment {
background-image: url(../img/btn/NCity/entertainmentBtn.png);
left: 140px;
}
.libraries {
background-image: url(../img/btn/NCity/librariesBtn.png);
left: 560px;
}
.parks {
background-image: url(../img/btn/NCity/parksBtn.png);
left: 700px;
}
.sports {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn.png);
left: 840px;
}
.attractionsActive {
background-image: url(../img/btn/NCity/attractionsBtn2.png);
left: 0px;
}
.universitiesActive {
background-image: url(../img/btn/NCity/universitiesBtn2.png);
left: 420px;
}
.hospitalsActive {
background-image: url(../img/btn/NCity/hospitalsBtn2.png);
left: 280px;
}
.transportActive {
background-image: url(../img/btn/NCity/transportGreenBtnV2.png);
left: 560px;
}
.entertainmentActive {
background-image: url(../img/btn/NCity/entertainmentBtn2.png);
left: 140px;
}
.librariesActive {
background-image: url(../img/btn/NCity/librariesBtn2.png);
left: 560px;
}
.parksActive {
background-image: url(../img/btn/NCity/parksBtn2.png);
left: 700px;
}
.sportsActive {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn2.png);
left: 840px;
}
.swiper-vertical>.swiper-scrollbar {
position: absolute;
right: 0px;
top: 1%;
z-index: 50;
width: 10px;
height: 98%;
}
.swiper-pagination-bullet-active {
background-color: #C4D000 !important;
}
<html>
<head>
<meta charset="utf-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MZLHQBBKRP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MZLHQBBKRP');
</script>
<title>Notts City - Attractions</title>
<link href="../../../css/d2n2WhatsNearby.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<!-- Main POI Frame -->
<iframe class="poiIframe" name="poiIframe" src="pois/Attractions/oldMarketSquare.html"></iframe>
<!-- Info Area -->
<div class="poiMenu">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- POI 1 -->
<div class="swiper-slide"><a href="pois/Attractions/oldMarketSquare.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Old Market Square.png" /></div>
<div class="poiBtnTitle"><span>Old Market Square</span></div>
</div>
</a> </div>
<!-- POI 2 -->
<div class="swiper-slide"><a href="pois/Attractions/nottinghamCastle.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Castle.png" /></div>
<div class="poiBtnTitle"><span>Nottingham Castle</span></div>
</div>
</a> </div>
<!-- POI 3 -->
<div class="swiper-slide"><a href="pois/Attractions/yeOldeTripJerusalem.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Ye Olde Trip to Jerusalem.png" /></div>
<div class="poiBtnTitle"><span>Ye Olde Trip to Jerusalem</span></div>
</div>
</a> </div>
<!-- POI 5 -->
<div class="swiper-slide"><a href="pois/Attractions/touristInfoCentre.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Tourism and Travel Centre.png" /></div>
<div class="poiBtnTitle"><span>Tourism and Travel Centre</span></div>
</div>
</a> </div>
</div>
<!-- <div class="swiper-scrollbar"></div>-->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Initialize Swiper -->
<script> var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 2,
spaceBetween: 60,
freeMode: true,
// scrollbar: {
// el: '.swiper-scrollbar',
// hide: false,
// },
pagination: {
el: '.swiper-pagination',
},
})
</script>
</body>
</html>

Stop event bubbling in foreach loop

I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.

Having different Overlays with picture buttons, but it only opens one overlay

/*when you click on the picture it should open an overlay, which closes if you click anywhere*/
<script type="text/javascript">
function on() {document.getElementById("over1").style.display="block";}
function off() {
document.getElementById("over1").style.display = "none";
}
function on() {document.getElementById("over2").style.display="block";}
function off() {
document.getElementById("over2").style.display = "none";
} </script>
<style>
.container{
background-color: #94AB98;
height:370px;
width:280px;
margin: 30px;
margin-bottom: 60px;
float: left;
display: inline-block;
}
.container .bildbt1{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic1);
}
.container .bildbt2{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic2);}
#over1{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#over2{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#text1{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
#text2{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
</style>
/*those are my containers, with buttons*/
<body>
<div class="container">
<div id="over1" onclick="off()">
<a id="text1">some text</a></div>
<button class="bildbt1" onclick="on()">
</button>
<h2>text too</h2>
</div>
<div class="container">
<div id="over2" onclick="off()">
<a id="text2">
also text</a>
</div>
<button class="bildbt2" onclick="on()"></button>
<h2>and there is also text</h2>
</div>
</body>
It only shows Overlay 2, i tried various options but it doesn't work.
Can you help me?
I'don't know why I can't poste this question...
It looks like your post is mostly code; add some more details...
i think there are enough details.

JS - Click event not working as it should

Maybe some of you can help me solve this problem.
I have this code and I made like an extension for the product that will show product description when click on product. But the on click function isn't working (can't close description).
Thanks!
$('.product').on('click', function(){
$('.product .productExtension').css("display","none");
$(this).children(".productExtension").css("display","block");
});
function close(){
$('.productExtension').css("display","none");
}
.product{
position: relative;
width: 80px; height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center; font-family: Arial;
}
.product > .productExtension{
position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 300px; height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product > .productExtension > .closeProductExtension{
position: absolute;
top: -40px; left: 0;
width: 20px; height: 20px;
margin: 10px;
border: none;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="close()">Close</div>
</div>
</div>

Now I know it wasn't fully part of the question, and I took a bit of liberty with the styling, but there is absolutely no need to hide all different productExtension classes upon each close. It would be far lighter to read the properties detailed inside your product div, and render them to a modal.
It does have an overly complex way of closing the modal ( just some liberties at work there, I am sorry for that one :) )
The answer that is currently accepted both details the reason why you cannot use close (could be window.close), I just thought the offer a different perspective when you have more than one product how to transfer the data between a modal and your DOM as you describe it now. I think it has its advantages
window.addEventListener( 'load', function() {
document.querySelectorAll('.product').forEach( product => {
product.addEventListener('click', handleProductClicked, false );
} );
document.querySelectorAll('[data-action]').forEach( action => {
action.addEventListener('click', handleAction );
} );
function handleAction( e ) {
const owner = e.currentTarget;
const action = owner.getAttribute('data-action');
const selector = owner.getAttribute('data-target');
const target = document.querySelector( selector );
if (action === 'hide') {
if ( !target.classList.contains('hidden') ) {
target.classList.add('hidden');
}
}
}
function showModal( title, content, owner ) {
const modal = document.querySelector('#modal');
if ( modal.classList.contains('hidden') ) {
modal.classList.remove( 'hidden' );
}
modal.querySelector('[data-for=title]').innerText = title;
modal.querySelector('[data-for=content]').innerHTML = content;
}
function handleProductClicked( e ) {
const productContainer = e.currentTarget;
const name = productContainer.querySelector('.productName').innerText;
const description = productContainer.querySelector('.productExtension').innerHTML;
showModal( name, description, productContainer );
}
} );
.hidden {
display: none;
visibility: hidden;
}
.productExtension {
display: none;
visibility: hidden;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
border: solid #a0a0a0 1px;
box-shadow: 5px 3px 5px #777;
background-color: #cfcfcf;
}
.modal > .title {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 20px;
font-size: 0.9em;
background-color: blue;
border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 18px;
background-color: #efefef;
border: solid #a0a0a0 1px;
text-align: center;
text-transform: small-caps;
}
.controls:hover {
font-weight: bold;
cursor: pointer;
}
.modal > .title > [data-for] {
padding: 3px;
color: #fff;
font-weight: 800;
}
.modal > .content {
position: absolute;
left: 0px;
right: 0px;
top: 21px;
bottom: 0px;
padding: 5px;
border: inset #666 1px;
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
<div class="modal hidden" id="modal">
<div class="title">
<span data-for="title"></span>
<div class="controls">
<span data-action="hide" data-target="#modal">X</span>
</div>
</div>
<div class="content" data-for="content">
</div>
</div>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
</div>
</div>
<div class="product">
<div class="productName">Blue Hoodie</div>
<div class="productPrice">14.75$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in blue color</div>
</div>
</div>

This is happening because both functions trigger. The first trigger because you are clicking on an item that is inside the DIV “product” and the second because you’ve passed the function to the onClick. You should take out the “productExtension” div from “product” to make it works.

As mentioned in other comments, you have two click handler in the parent and child. The parent div is intercepting all click events. Try this for your requirement.
$(".product").on("click", function(e) {
$(".product .productExtension").css("display", "none");
$(this)
.children(".productExtension")
.css("display", "block");
if (e.target.classList.contains('closeProductExtension')) {
$(".productExtension").css("display", "none");
}
});

You have several problems. The first is that you trigger the open event as well. To solve this you can use stop propagation. The second is that you are using the method name "close" which is already used in JS.
$('.product').on('click', function() {
$('.product .productExtension').css("display", "none");
$(this).children(".productExtension").css("display", "block");
});
function closeE(event) {
event.stopPropagation();
$('.productExtension').css("display", "none");
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
.product>.productExtension {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product>.productExtension>.closeProductExtension {
position: absolute;
top: -40px;
left: 0;
width: 20px;
height: 20px;
margin: 10px;
border: 1px solid black;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="closeE(event)">Close</div>
</div>
</div>

Foundation 4 Reveal not working?

Page: http://www.bureauforgood.com/RSTR-IA-2B/1.1-Home-Modal.html
Near the end of the body tag I have the following:
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation4.min.js"></script>
<script src="javascripts/foundation.reveal.js"></script>
(note that I changed the name of the js file to "foundation4". This change works fine and I know this because Orbit is working)
Followed by this
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<div class="reveal-modal-bg" style="display: none"></div>
Click Me For A Modal
Then my closing body and html tags.
(for testing purposes I'm putting my button right at the bottom of the page, uner the footer)
On my CSS file I made sure this was included (the all the Reveal-related CSS that comes with Foundation)
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: black;
background: rgba(0, 0, 0, 0.45);
z-index: 98;
display: none;
top: 0;
left: 0; }
.reveal-modal {
visibility: hidden;
display: none;
position: absolute;
left: 50%;
z-index: 99;
height: auto;
margin-left: -40%;
width: 80%;
background-color: white;
padding: 1.25em;
border: solid 1px #666666;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
top: 50px; }
.reveal-modal .column,
.reveal-modal .columns {
min-width: 0; }
.reveal-modal > :first-child {
margin-top: 0; }
.reveal-modal > :last-child {
margin-bottom: 0; }
.reveal-modal .close-reveal-modal {
font-size: 1.375em;
line-height: 1;
position: absolute;
top: 0.5em;
right: 0.6875em;
color: #aaaaaa;
font-weight: bold;
cursor: pointer; }
#media only screen and (min-width: 768px) {
.reveal-modal {
padding: 1.875em;
top: 6.25em; }
.reveal-modal.tiny {
margin-left: -15%;
width: 30%; }
.reveal-modal.small {
margin-left: -20%;
width: 40%; }
.reveal-modal.medium {
margin-left: -30%;
width: 60%; }
.reveal-modal.large {
margin-left: -35%;
width: 70%; }
.reveal-modal.xlarge {
margin-left: -47.5%;
width: 95%; } }
#media print {
.reveal-modal {
background: white !important; } }
But the plugin doesn't work! Any ideas?

Ok, solved. I forgot to include this
<script>
$(document).foundation();
</script>

Nothing is wrong with any of your code, just make sure to always fully include the snippet below before closing your body tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Also just a suggestion, you can add a button class to your anchor tag to make it even cooler looking. Like so:
Click Me For A Modal

You need to include this script
<script src="javascripts/foundation/foundation.reveal.js"></script>

Categories

Resources