View divs when click buttons - javascript

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>

JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

Related

JS modal dosent work with "getElementById"

I made admin panel with HTML CSS and JavaScript and I made buttons to move about menus, but when I test console and player menu that doesn't work like that not changed menu section.
How it looks in full-screen
And for test I put console log 123, but that still doesn't work. May CSS be the problem? Or may it's HTML the problem? Because in console it doesn't give me any error. Just clear Google Chrome console.
const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>
The problem was in the css, I added position:relative; and z-index:1; to class .button so now you can add event to them and click without problem
const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
position:relative;
z-index:1;
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>
You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

Divs not in the right position when clicking button

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>

on click functions being applied to all divs with same class

I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>
Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');

html5 ,JQuery - can't get value from custom attribute

My Images are not appending from Left to right on click event ..I found that variable sources$ was not getting any data from a div with data-module attribute
Button Click event
$('#executeButton').click(function () {
var sources$ = $('#sourcePane input:checked~img');
});
It shows Blank object array
this is the particular div with data-module
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
</div>
in Demo HTML Page
http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html
sources$ has is value stored as "img#xyz source1.png"
It is just not working on my local IIS
this is the complete code
<!DOCTYPE html>
<html>
<head>
<title>Move and Copy Lab Page</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<style type="text/css">
div#sourcePane {
float: left;
width: 40%;
}
div#sourcePane img {
margin-bottom: 8px;
}
div#targetPane {
float: right;
width: 55%;
}
div.target {
border: 1px solid maroon;
background-color: #ffffcc;
margin-bottom: 8px;
}
#controls div {
margin-bottom: 4px;
}
#restoreButton {
display: none;
}
.done input[type=checkbox], .done #executeButton {
display: none;
}
.done #restoreButton {
display: inline;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
<script type="text/javascript" >
$(function () {
$('#restoreButton').click(function () {
window.location = 'lab.move.and.copy.html';
});
$('#executeButton').click(function () {
$('body').addClass('done');
$('.done #controls :radio').attr('disabled', true);
var sources$ = $('#sourcePane input:checked~img');
if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
var operation = $('[name=operations]:checked').val();
targets$[operation](sources$);
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>jQuery Move and Copy Lab Page</h1>
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source2.png" alt="source 2" title="Source 2"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source3.png" alt="source 3" title="Source 3"/>
</div>
</div>
<div data-module="Target Areas" data-module-id="targetPane">
<div id="target1" class="target">
<div><input type="checkbox" name="targets"/> Target 1</div>
</div>
<div id="target2" class="target">
<div><input type="checkbox" name="targets"/> Target 2</div>
</div>
<div id="target3" class="target">
<div><input type="checkbox" name="targets"/> Target 3</div>
</div>
<div id="controls">
<div>
<label>Operation:</label><br/>
<input type="radio" name="operations" value="append" checked="checked"/> append
<input type="radio" name="operations" value="prepend"/> prepend
<input type="radio" name="operations" value="before"/> before
<input type="radio" name="operations" value="after"/> after
</div>
<div>
<label>Clone?:</label><br/>
<input type="radio" name="clone" value="no" checked="checked"/> no
<input type="radio" name="clone" value="yes"/> yes
</div>
</div>
<div>
<button type="button" class="green90x24" id="executeButton">Execute</button>
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</div>
<div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>
</div>
</div>
</body>
</html>
Core.css
body {
background: #f5ffe8 none;
}
body.fancy {
background: #cccccc url('../images/backg.png');
}
body,th,td {
font-family: 'Verdana',sans-serif;
font-size: 9pt;
color: #444444;
}
#pageContainer {
width: 752px;
margin: 8px auto;
border: 3px #4a6074 solid;
background-color: white;
}
#pageContent {
padding: 16px;
}
h1 {
width: auto;
height: auto;
background-image: none;
padding: 0;
color: #4a6074;
font-size: 1.4em;
}
body.fancy h1 {
width: 640px;
height: 41px;
font-size: 1.2em;
background: url('../images/banner.h1.png') no-repeat;
padding: 24px 0 0 80px;
margin: 0 0 16px 0;
}
label {
font-weight: bold;
}
button {
text-align: center;
border: 0;
cursor: pointer;
}
button.green90x24 {
background: url('../images/button.90x24.green.png');
width: 90px;
height: 24px;
color: #444444;
font-weight: bold;
padding: 0;
}
div.module {
margin-bottom: 12px;
}
div.banner {
background-color: #a1c772;
}
div.banner h2 {
height: 23px;
background: url("../images/module.slice.png") repeat-x #a1c772;
color: white;
font-size: 1.1em;
font-weight: bold;
margin: 0 4px 0 4px;
padding: 7px 0 0 8px;
}
div.module div.body {
padding: 8px;
border: solid 2px #a1c772;
background-color: #f5ffe8;
}
div.module h3 {
color: #6b8150;
margin: 3px 0 3px 0;
font-size: 1.2em;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
div.footer {
text-align: center;
clear: both;
font-size: 0.8em;
color: silver;
}
div.separator {
clear: both;
}
img[src="example.jpg"] {
background-color: white;
border: 1px black solid;
padding: 12px 12px 16px 12px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.leftCap {
float: left;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.left.cap.png");
}
.rightCap {
float: right;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.right.cap.png");
}
I couldn't find the reason ...
Any suggestion will be helpful

Categories

Resources