Using CSS animation (transition) with onClick event

Using CSS animation (transition) with onClick event - javascript

I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>

You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.

You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>

Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>

you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)

Related

how manipulate CSS display property using active class with JS

I wished to output a small pop up window to confirm if the user want to escape or stay on the page however, as soon as i click on the RUN input id="openBtn" the pop up window appears then disappear right away. I dont know what i did wrong
CSS
.pop-up{
display: none;
}
.pop-up.active{
display: flex;
position: absolute;
background-color: #fff;
font-size: 30px;
color: #222831;
flex-direction: column;
align-items: center;
height: 150px;
width: 250px;
top: 200px;
left: 170px;
border: 5px double #393E46;
border-radius: 10px;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}
SCRIPT.JS
const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");
openBtn.addEventListener('click', () =>{
popUp.classList.add('active')
})
stayBtn.addEventListener('click', () =>{
popUp.classList.remove('active')
})
HTML
<div class="controls">
<div class="left"></div>
<form action="" method="post" class="right">
<input type="submit" name="fight" value="FIGHT">
<input type="submit" name="pkmn" value="PKMN">
<input type="submit" name="item" value="ITEM">
<input type="submit" id="openBtn" value="RUN">
</form>
</div>
</div>
<div class="pop-up">
<p>Escape battle?</p>
<form action="" method="post" class="buttons">
<input type="submit" class="button" id="stayBtn" name="stay" value="Stay">
<input type="submit" class="button" name="escape" id="run" value="Run">
</form>
</div>
I just wanted to have an confirm to exit option where i use a class to have the css display switch to none and flex.

You are missing e.preventDefault() on your openBtn,
Inside the modal I used button type="button" instead of input="submit" which is better practice and with that you don't need e.preventDefault()
Note: I didn't change your input controls to button as I don't know what are you doing with it.
const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");
openBtn.addEventListener('click', e => {
e.preventDefault()
popUp.classList.add('active')
})
stayBtn.addEventListener('click', () => {
popUp.classList.remove('active')
})
.pop-up {
display: none;
}
.pop-up.active {
display: flex;
position: absolute;
background-color: #fff;
font-size: 30px;
color: #222831;
flex-direction: column;
align-items: center;
height: 150px;
width: 250px;
top: 200px;
left: 170px;
border: 5px double #393E46;
border-radius: 10px;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}
<div class="controls">
<div class="left"></div>
<form action="" method="post" class="right">
<input type="submit" name="fight" value="FIGHT">
<input type="submit" name="pkmn" value="PKMN">
<input type="submit" name="item" value="ITEM">
<input type="submit" id="openBtn" value="RUN">
</form>
</div>
<div class="pop-up">
<p>Escape battle?</p>
<button type="button" class="button" id="stayBtn" name="stay">Stay</button>
<button type="button" class="button" name="escape" id="run" value="Run">Run</button>
</div>

You are on a form .Whenever you click a button or input[submit],You will give a post request with the given values to the server .After sending the request ,the browser will show you its response by default .To not have the redirect, you have to add e.preventDefault().For this scenario, You will have to change to
openBtn.addEventListener('click', e => {
e.preventDefault()
popUp.classList.add('active')
})

How do you use CSS to format an image in parallel to multiple divisions in HTML?

So I working on my integration of JS into my HTML and I want my web page to look some what presentable for a low level programmer. I've tried putting different divisions around and image (so two on the left vertically aligned and then an image the is the height of them combined in the gap on the right to fill the rest of that row.
I've tried the normal method of:
#insertDivIdHere{
float:left;
}
#otherDivIdHere{
float:left;
}
#insertImgIdHere{
float:left;
}
This method ends up with some weird formatting issues where the divisions overlap and the objects (ie buttons and text boxes) disappear and the image is to low.
Here is the HTML and CSS if you want to try it out (but I've left out my JS because I see no point in sharing it:
#header{
font-size: 16px;
background-color:lightsteelblue;
padding:12px;
text-align:center;
}
#form{
height: 30px;
width: 100px;
}
#formdiv {
background-color: lightcyan;
padding:12px;
height: 200px;
width:300px;
float: left;
}
#ageRange{
height: 30px;
width: 120px;
}
#ageRangeDiv{
background-color: lightgrey;
padding:12px;
height:140px;
width:300px;
float: left;
}
#creds{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#age{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#image{
width: auto;
height: 340px;
float:left;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"rel="stylesheet">
<title>Intergration</title>
<script src="script.js"></script>
</head>
<body>
<div id="header">
<h1>Web intergration</h1>
</div>
<div>
<div id="formdiv" name="formdiv">
<form id="form" name="form">
First Name <input type="text" name="firstName" ><br>
<br>
Last Name <input type="text" name="lastName" ><br>
<br>
Email <input type="email" name="email"><br>
</form>
<br><br><br><br><br><br><br>
<button type="button" id="creds" onclick="validCreds()">Confirm</button>
</div>
<div id="ageRangeDiv">
<form id="ageRange" name="ageRange">
<input type="radio" name="R1" id="U13" checked>Under 13 <br>
<input type="radio" name="R1" id="U18">13-18 <br>
<input type="radio" name="R1" id="U30">19-30 <br>
<input type="radio" name="R1" id="U50">31-50 <br>
<input type="radio" name="R1" id="O50">Over 50 <br>
</form>
<br><br><br><br>
<button type="button" id="age" onclick="validAge()">Confirm</button>
</div>
<div>
<img src="eve.jpg" id="image">
</div>
</div>
</body>
</html>

This is an example of how to use the inline-flex to align your content i hope you can modify them to do your layout.
#media only screen and (min-width: 600px) {
.container {
display: inline-flex;
}
.container div {
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container>div+div {
margin: auto;
}
}
#media only screen and (max-width: 600px) {
.container div:not(first-child) {
border: 1px solid red;
}
}
<div class="container">
<div>
<div>
1
</div>
<div>
2
</div>
</div>
<div>
3
</div>
</div>

Using localStorage to remember closed state of pop-up box

I'm having difficulty implementing localStorage on my site (https://www.reclaimdesign.org).
What I am trying to do is:
Newsletter subscription pop-up on each page - this works fine
Click X to close the subscription pop-up - this also works fine
Remember the closed state of the window so that all other pages visited on our site don't have the pop-up and irritate the user after they have closed the pop-up already - this is not working. Not even a little bit.
My thinking was to set a variable with localStorage and then refer to the variable to see if the windows should be displayed or not. It is highly likely that my logic and syntax are at best sketchy, so if anyone could please guide me in the correct method this would be much appreciated.
The code I have been tinkering with for the subscription pop-up looks like this:
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
$(window).on("load", function() {
if(localStorage.getItem("popState") == 'hide'){
//$(".signup").hide();
$(".signup").css("display", "none");
}
else if (localStorage.getItem("popState") != 'hide'){
$(".signup").css("display", "block");
}
});
}
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>

Yes your getSignup is not called correctly.
Here you can see the alternative solution without jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
if (localStorage.getItem("popState") == 'hide') {
//$(".signup").hide();
document.querySelector('.signup').style.display = 'none';
} else if (localStorage.getItem("popState") != 'hide') {
document.querySelector('.signup').style.display = 'block';
}
}
window.addEventListener("load", getSignup);
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</body>
</html>

Thanks very much for your input guys. I got it working with the following (for anyone who might come up against the same issue)...
HTML:
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
CSS:
.signup {
bottom: 2%;
display: none;
margin-right: -15px !important;
max-width: 280px;
position: fixed;
right: 2%;
z-index: 9999;
}
.signup-header {
background: #539c22;
border-radius: 10px 10px 0 0;
color: #ffffff;
font-family: 'Carrois Gothic', sans-serif;
font-size: 20px;
padding: 25px 15px;
text-transform: uppercase;
}
.signup-container {
background-color: #6db240;
border-radius: 0 0 10px 10px;
color: #ffffff;
padding: 15px;
}
.closebtn {
color: #ffffff;
cursor: pointer;
font-size: 30px;
position: absolute;
right: 15px;
top: 5px;
}
.closebtn:hover {
color: #6db240;
}
.signup-container .button {
background-color: #539c22;
border: 0 none;
border-radius: 5px;
color: #ffffff !important;
cursor: pointer;
font-size: 15px;
height: 32px;
line-height: 32px;
margin: 0 15px 0 0 !important;
text-align: center;
transition: all 0.23s ease-in-out 0s;
width: 100% !important;
}
.signup-container .button:hover {
opacity: 0.7;
}
.signup-container .mc-field-group input {
display: block;
padding: 8px 0;
text-indent: 2%;
width: 100%;
}
.signup-container input {
border: 1px solid #d0d0d0;
border-radius: 5px;
cursor: auto;
font-family: 'Open sans', sans-serif;
font-size: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
JQuery:
$(document).ready(function() {
$('.signup').css('display', 'block');
$PopUp = $('.signup');
var hide = JSON.parse(localStorage.getItem('hide'));
if (hide) {
$PopUp.hide();
} else {
// initialize value in case it hasn't been set already
localStorage.setItem('hide', false);
}
$('.closebtn').click(function() {
$('.signup' ).hide();
// toggle the boolean by negating its value
var hide = JSON.parse(localStorage.getItem('hide'));
localStorage.setItem('hide', !hide);
});
});

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>

You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.

You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.

You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.

first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

jQuery for each input change text for matching element

I'm making a printable ICE card. User enters info in form inputs and they are shown preview below.
The code I have is working fine, but I have to copy/paste it for each input/element match. I want to compress the code so that it listens for changes for each input and changes the text for matching element.
Snippet below. JSFiddle is here
$("#inputName").keyup(function() {
$("#spanName").html($(this).val());
});
$("#inputHCN").keyup(function() {
$("#spanHCN").html($(this).val());
});
$("#inputDOB").keyup(function() {
$("#spanDOB").html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Data attributes is the way I would go
$("[data-out]").keyup(function() {
var selector = $(this).data("out");
$(selector).text($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Add data-target attribute to your form elements with ids of elements where the text should be displayed:
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
Now change your scripts to display the text. Note that I am using two events keyup and change so that copy-paste would work as well.
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
Demo shown below:
$(".form-control").on('keyup change', function(e) {
var target = $(this).data("target");
$(target).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

There could be a lot of variants, here is a short one that rely to keep a naming convention between input id attribute and span id attribute:
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
$("#span" + this.id.replace('input', '')).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

Another way is through replacing input with span assuming that the naming convention is followed.
$("#inputName, #inputHCN, #inputDOB").keyup(function() {
var spanId = $(this).attr("id").replace("input", "span");
$("#" + spanId).html($(this).val());
});

You can try this. Hope it will help. Just change the name of textboxes and find the span control using textbox name.
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
var inputValue = $(this).attr("name");
$("#span" + inputValue).html($(this).val());
});
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

You could loop through inputs and add event listeners to each:
var inputs = $('form p input');
for (var i=0; i<inputs.length; i++) {
$(inputs[i]).keyup(function() {
var span = $(this).attr('id').replace('input','span');
$("#"+span).html($(this).val());
});
}
* {
margin: 0;
outline: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}
div {
background: #fff;
height: 54mm;
width: 100mm;
border-width: 2px;
border-style: dashed;
border-radius: 2.88mm;
padding: 10px;
margin: 0 auto;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
color: blue;
}
span[id*="span"] {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</p>
<p>
<input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
</p>
<p>
<input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
</p>
etc...
</form>
<br />
<h4>
Preview of your printable card
</h4>
<br />
<div>
<ul>
<li>Name: <span id="spanName"></span></li>
<li>Health Card #: <span id="spanHCN"></span></li>
<li>D.O.B.: <span id="spanDOB"></span></li>
<li>etc...</li>
</ul>
</div>

//map the names of the input elements with the output elements
var myIOMap={
inputName:"spanName",
inputHCN:"spanHCN",
inputDOB:"spanDOB",
};
function doTextBinding(ioMap){
Object.keys(ioMap).forEach(function(inputName,outputName){
var inputElement="#"+inputName;
var outputElement="#"+ioMap[inputName];
console.log(inputElement);
console.log(outputElement);
$(inputElement).keyup(function() {
$(outputElement).html($(this).val());
});
});
}
doTextBinding(myIOMap);
Replace your JavaScript with the following code, it will do the same without having to rewrite the key-up binding for each element. Make sure you call the function every time the page initializes though.

We Keep Coding

JavaScript is the programming language of the Web.

Using CSS animation (transition) with onClick event - javascript

You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted. To fix it, you can replace button by another tag. Or avoid submitting while click event happens.

Add the attribute type='button' to your button element. It should works for you. <button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>

you can use the atribute visibility: document.getElementById("myP").style.visibility = "hidden"; You can start the div with visibility hidden and remove that for showing the element. Its works fine :)

Related

how manipulate CSS display property using active class with JS

How do you use CSS to format an image in parallel to multiple divisions in HTML?

Using localStorage to remember closed state of pop-up box

Change image when radio button checked

jQuery for each input change text for matching element

Categories

Resources