How can i add selected radio text to add in other div after clicked button using jquery.
I have created this Codepen DEMO
<div class="container">
<div class="checkedWrap"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
Firstly attach a click event to your button, then get the selected input radio using :checked selector and finally get the text from the parent using parent().text(), check the example bellow.
Hope this helps.
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
})
});
.container {
width:400px;
height:auto;
box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
margin:0px auto;
margin-top:10px;
}
.checkedWrap {
width:100%;
float:left;
padding:15px;
background-color:#b71c1c;
box-sizing:border-box;
}
.checkList {
width:100%;
padding:10px;
box-sizing:border-box;
float:left;
}
.lbl {
float:left;
position: relative;
display: block;
height: 20px;
width: 44px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 26px;
height: 26px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after { transform: scale(1.15, 0.85); }
.cbx:checked ~ label { background: #6fbeb5; }
.cbx:checked ~ label:after {
left: 20px;
background: #179588;
}
.cbx:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.cbx:disabled ~ label:after { background: #bcbdbc; }
.container {
position: absolute;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.demo {
margin-bottom: 40px;
width:100%;
overflow:hidden;
padding:5px;
box-sizing:border-box;
text-indent:10px;
}
.hidden { display: none; }
.Click {
float:left;
margin-top: 30px;
color: #fff;
height:30px;
background-color:#0288d1;
color:#ffffff;
width:100%;
box-sizing:border-box;
text-align:center;
line-height:30px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
This piece of code selects the text of the label you have currently selected and inserts it to the top red box:
$(document).ready(function() {
$("body").on( "click",".Click",function(){
var text = $("input[name=checkit]:checked").parent().find("span").text();
$(".checkedWrap").text(text);
});
});
Also wrap the plain text into a <span>, it makes the code clearer and easier to select from.
Here's a working example.
Here is script.
$(document).ready(function() {
$('input[type=radio][name=checkit]').change(function () {
jQuery('.checkedWrap').text($('input[name=checkit]:checked').parent().text());
});
});
Related
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');
I'm facing a problem while integrating a project from codepen into ASP.NET. While I download the project and test it on atom it works perfectly, but when I try to transfer it to ASP.NET (copy paste) it stops working, it just switch between log in / register without moving. I'm new to ASP.NET so maybe I'm missing something... It gives a green warning on the double <html> and <body> tags maybe the problem is there, I just don't know how to fix it. Any help is welcome thanks on advance.
The original codepen: Codepen Link
Note: only edit I made was adding / on non closing <> elements because ASP.NET told me to.
var $loginMsg = $('.loginMsg'),
$login = $('.login'),
$signupMsg = $('.signupMsg'),
$signup = $('.signup'),
$frontbox = $('.frontbox');
$('#switch1').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
setTimeout(function () {
$('#switch1').click()
}, 1000)
setTimeout(function () {
$('#switch2').click()
}, 3000)
body{
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
font-family: 'Roboto', sans-serif;
}
.container{
/*border:1px solid white;*/
width: 600px;
height: 350px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.backbox{
background-color: #404040;
width: 100%;
height: 80%;
position: absolute;
transform: translate(0,-50%);
top:50%;
display: inline-flex;
border-radius: 15px;
}
.frontbox{
background-color: white;
border-radius: 20px;
height: 100%;
width: 50%;
z-index: 10;
position: absolute;
right:0;
margin-right: 3%;
margin-left: 3%;
transition: right .8s ease-in-out;
}
.moving{
right:45%;
}
.loginMsg, .signupMsg{
width: 50%;
height: 100%;
font-size: 15px;
box-sizing: border-box;
}
.loginMsg .title,
.signupMsg .title{
font-weight: 300;
font-size: 23px;
}
.loginMsg p,
.signupMsg p {
font-weight: 100;
}
.textcontent{
color:white;
margin-top:65px;
margin-left: 12%;
}
.loginMsg button,
.signupMsg button {
background-color: #404040;
border: 2px solid white;
border-radius: 10px;
color:white;
font-size: 12px;
box-sizing: content-box;
font-weight: 300;
padding:10px;
margin-top: 20px;
}
/* front box content*/
.login, .signup{
padding: 20px;
text-align: center;
}
.login h2,
.signup h2 {
color: #35B729;
font-size:22px;
}
.inputbox{
margin-top:30px;
}
.login input,
.signup input {
display: block;
width: 100%;
height: 40px;
background-color: #f2f2f2;
border: none;
margin-bottom:20px;
font-size: 12px;
}
.login button,
.signup button{
background-color: #35B729;
border: none;
color:white;
font-size: 12px;
font-weight: 300;
box-sizing: content-box;
padding:10px;
border-radius: 10px;
width: 60px;
position: absolute;
right:30px;
bottom: 30px;
cursor: pointer;
}
/* Fade In & Out*/
.login p {
cursor: pointer;
color:#404040;
font-size:15px;
}
.loginMsg, .signupMsg{
/*opacity: 1;*/
transition: opacity .8s ease-in-out;
}
.visibility{
opacity: 0;
}
.hide{
display: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'/>
<link href="stylelogin.css" rel="stylesheet" />
</head>
<body>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="backbox">
<div class="loginMsg">
<div class="textcontent">
<p class="title">Don't have an account?</p>
<p>Sign up to save all your graph.</p>
<button id="switch1">Sign Up</button>
</div>
</div>
<div class="signupMsg visibility">
<div class="textcontent">
<p class="title">Have an account?</p>
<p>Log in to see all your collection.</p>
<button id="switch2">LOG IN</button>
</div>
</div>
</div>
<!-- backbox -->
<div class="frontbox">
<div class="login">
<h2>LOG IN</h2>
<div class="inputbox">
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<p>FORGET PASSWORD?</p>
<button>LOG IN</button>
</div>
<div class="signup hide">
<h2>SIGN UP</h2>
<div class="inputbox">
<input type="text" name="fullname" placeholder=" FULLNAME"/>
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<button>SIGN UP</button>
</div>
</div>
<!-- frontbox -->
</div>
</form>
</body>
</html>
<script src="jslogin.js"></script>
</body>
</html>
Try adding e.preventDefault to your functions to avoid jQuery triggering things it doesn't have to do.
$('#switch1').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
I got this working in this jsFiddle, so please check it out, try it on your code and let us know if it works or not.
Hope it helps you.
I have a css customized checkbox. When someone checks it, a checkbox group has to appear.
If you check the current code, I have made the main check box hidden. Once a user clicks on the box, it should reveal a gropu of checkbox that should be inside the box.
Main issue I am facing is that I am getting html calidation error when I place the checkbox group inside the box.
How do I make this happen?
.custom_chk input[type="checkbox"] {
display: none;
}
.custom_chk label {
border: 1px solid #e9f8fb;
padding: 16px;
display: block;
position: relative;
cursor: pointer;
-webkit-box-shadow: 1px 2px 3px -2px #999;
-moz-box-shadow: 1px 2px 3px -2px #999;
box-shadow: 1px 2px 3px -2px #999;
margin-top: 15px;
margin-bottom:10px;
background: #FDFDFD;
font-family: 'proxima_novaregular', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: normal;
}
.custom_chk label::before {
background-color: white;
border: 1px solid #ff6d6d;
color: white;
content: " ";
display: block;
height: 25px;
line-height: 28px;
position: absolute;
right: -2px;
text-align: center;
top: -2px;
transform: scale(0);
transition-duration: 0s;
width: 25px;
}
.custom_chk :checked+label {
outline: 2px solid #FF6D6D;
}
.custom_chk :checked+label:before {
content: "\2713";
background-color: #FF6D6D;
transform: scale(0.9);
}
<div class="form-group custom_chk">
<div class="col-lg-10 col-md-12 col-sm-12">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<input type="checkbox" id="hyper_self" name="hyper_self" />
<label for="hyper_self">
<span class="ailment_icon hyper"></span>
<span class="ailment_text">main Item</span>
<span class="check_family">
<span class="check_family_item">
<input type="checkbox" class="custom-control-input" id="diab_gp">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
<label for="diab_gp">Grand Parents</label></span>
</span>
</span>
</label>
</div>
</div>
</div>
</div>
custom_chk class should be given to the input checkbox.
These are the CSS changes you need to add
.custom_chk+label+.checkbox-group {
display:none;
}
.custom_chk:checked+label+.checkbox-group {
display:block;
}
You can find the working example in the plunker URL
http://plnkr.co/edit/D97DUvyzIvVU88Fy4YpD?p=preview
I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color.
edit I'm sorry if I didn't make sense! What I'm trying to do is something like this: sv.tinypic.com/r/dcelb6/9. So the boxed are colored, and you can check them.
Here is my html:
<div>
<a href="#" class="color-box black-box" value="0">
<h3>Black</h3>
</a>
</div>
<div>
<a href="#" class="color-box grey-box" value="0">
<h3>Grey</h3>
</a>
</div>
<div>
<a href="#" class="color-box blue-box" value="0">
<h3>Blue</h3>
</a>
</div>
</div>
and here is the CSS:
.color-box {
width: 15.20833%;
min-width: 15.20833%;
height: 0;
padding-bottom: 15.20833%;
background-color: #fff;
margin-top: 0.72917%;
display: block;
float: left;
position: relative;
margin: 7px 0.72917%;
border: 1px solid transparent;
}
.color-box h3 {
color: #fff;
text-decoration: none;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
where the user can choose colors by checking the colored boxes to pick
the ones they want.
snippet here
colors={'black-box':'black','grey-box':'grey','blue-box':'blue'}
var elements=document.getElementsByClassName('color-box')
function handler(el){
el[i].addEventListener('click',
function(e){
if(e.target.className.split(' ')[1] in colors){
document.getElementById('selector').style.background= colors[e.target.className.split(' ')[1]]
}
for(var i=0;i<elements.length;++i){
if(elements[i]!=e.target){elements[i].innerHTML=''}
}
e.target.innerHTML=='✓'?e.target.innerHTML='':e.target.innerHTML='✓';
},false)
}
for(var i=0;i<elements.length;++i){
handler(elements)
}
//document.getElementsByClassName('color-box').forEach(handler)
.color-box {
color:white;
font-size:20px;
width:30px;
height:30px;
background-color: #fff;
margin-top: 0.72917%;
display: block;
text-align:center;
position: relative;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
#selector{
width:200px;
height:200px;
border:solid;
}
<div class="color-box black-box" >
</div>
<div class="color-box grey-box">
</div>
<div class="color-box blue-box">
</div>
</div>
<div id='selector'>
</div>
This is a basic example of how to implement it without JS https://plnkr.co/edit/tvamZjENZSLWnrtthDHP?p=preview
<style>
.checkbox > input[type="checkbox"] { display: none; }
.checkbox > input[type="checkbox"]:checked + label:before {margin-right: 10px; content: "[X]";}
.checkbox > input[type="checkbox"] + label:before {margin-right: 10px; content: "[ ]";}
</style>
<div class="checkbox">
<input type="checkbox" id="test">
<label for="test">HELLO</label>
</div>
Note that i'm using > to indicate the immediate checkbox element descendant of .checkbox element, and the + selector for getting the next LABEL element sibling of that input
This is a pure CSS one, using "hidden" radioset with their label colored
JS Fiddle
.radios{
display:none;
}
.color-box {
width: 50px;
line-height: 50px;
margin-top: 0.72917%;
display: inline-block;
margin: 7px 0.72917%;
color: #fff;
text-align:center;
text-decoration: none;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
.radios:checked + label{
text-decoration:underline;
}
#rad1:checked ~ #result{
background-color:black;
}
#rad2:checked ~ #result{
background-color:#9E9E9E;
}
#rad3:checked ~ #result{
background-color:#205DB1;
}
#result{
width:200px;
height:200px;
border:2px orange solid;
}
<div>
<input type="radio" id="rad1" name="rad" class="radios">
<label for="rad1" class="color-box black-box">Black</label>
<input type="radio" id="rad2" name="rad" class="radios">
<label for="rad2" class="color-box grey-box">Grey</label>
<input type="radio" id="rad3" name="rad" class="radios">
<label for="rad3" class="color-box blue-box">Blue</label>
<hr>
<div id="result"></div>
</div>
This is really strange. Anything else (button, dropdown etc.) works with this method, but not checkboxes. In my code, a button appears, and when I press it, the checkbox becomes visible. But when I press it again, the checkbox doesn't dissappear. I figured out that if I remove a line, the code seems to work (but the text is not float:left, which I need). How could I solve this problem so that my formatting stays correct? This is the line that needs to be removed:
input[type=checkbox] {margin: 5px; float:left; }
This is my whole code:
<!DOCTYPE html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
hidden0001{display:none}
</style>
<style>
</style>
<style id="Styles">
label { margin: 1px; padding: 0px; float:right;}
html { margin: 0px; padding: 0px; }
body {margin: 0px; padding: 0px;}
p.left { text-align: left; margin: 0px;}
.image {margin: 5px;}
.headertext {margin: 5px; margin-left: 5px; margin-right: 5px; }
.draggable { width: auto; height: auto; position: absolute;}
input[type=text] {margin: 5px;}
input[type=button] {margin: 5px;}
input[type=checkbox] {margin: 5px; float:left; }
input[type=file] {margin: 0px;}
span {margin: 5px;}
textarea {margin: 5px;}
select {margin: 5px;}
.tablink {float:left; margin: 5px;}
.ui-tabs {height:40px; vertical-align: central; margin: 2px;}
.mainheader {margin: 5px;vertical-align: central; padding: 0px; }
#TabBox {background-color:#fff;padding: 0px;}
.check { clear: both; float: left; display: block; }
.ui-tooltip {z-index:10;font-size:0.875em;margin-left:5px;
color:#fff;background-color: #000000;font-family: 'Droid Sans', sans-serif;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; position: absolute;padding: 5px;
border:2px solid blue;}
.tab_box {width:800px; height:400px; position: relative; }
</style>
</head>
<body style="cursor: auto; ">
<div style="width:100%;height:auto;">
<center>
<div class="maincontainer" style="display: block; ">
<div id="Builder" style="display: block; opacity: 1; ">
<div id="Main">
<div class="mainheader changeheader" style="width: 800px; ">
</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="width: 800px; display: none; ">
<div id="tablinks">
</div>
</div>
<div id="TabBox" style="width: 800px; ">
<div class="Elements-0 tab_box" id="containment-wrapper-0" style="display: block; ">
<div id="draggable_1" class="draggable ui-widget-content ui-draggable" style="left: 30px; top: 60px; ">
<input type="button" value="PUSH THIS BUTTON" class="btn " onclick="ubot.runScript('runthis()')">
</div>
<div id="draggable_2" class="draggable ui-widget-content ui-draggable" style="left: 242px; top: 64px; ">
<hidden0001>
<input type="checkbox" id="CheckBox_2" variable="#chbox" fillwith="checked">
<label for="CheckBox_2" style="padding-top:1px;">This is a checkbox</label>
</hidden0001>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js">
</script>
<script>
//Get current tab ID / Switch Tabs
$(".tablink").live("click", function() {
currentTabID = $(this).attr('id');
$(".tablink").css("border-bottom", "2px inset #000");
$(".tab" + currentTabID).css("border-bottom", "");
$(".tab_box").hide();
$("#containment-wrapper-" + currentTabID).show();
drag();
});
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(document).tooltip();
});
</script>
<script>
$(document).ready(function(){
$("#draggable_1").click(function(){
$("hidden0001").toggle();
});
});
</script>
</body>
</html>
Thank you for any help, I truly appreciate your work, guys!
All the best,
Jones
I think you got a problem making your own tags where is the checkbox.
<hidden0001>....</hidden0001>
Just change this for a known tag like <span> with that classname:
<span class="hidden0001"> .... </span>
And in your code:
/*CSS*/
.hidden0001{display:none}
/*Jquery*/
$(document).ready(function(){
$("#draggable_1").click(function(){
$(".hidden0001").toggle();
});
});
The demo http://jsfiddle.net/BVmUL/181/