I have one question about add class.
I have created this DEMO from codepen.io .
In this demo you can see there are tree radio button. When you click blue button after checked radio button then the .checkedWrap text will be changing.
I want to add also some class in this .checkedWrap .
So when you click
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
there is also <div id="1" class="addthisClassone"></div> i want to add addthisClassone from the .checkedWrap also like this:
<div class="checkedWrap addthisClassone"></div>
<div class="checkedWrap addthisClasstwo"></div>
<div class="checkedWrap addthisClasstree"></div>
How can i do that after clicking blue button. Anyone can help me in this regard.
CSS
<div class="container">
<div class="checkedWrap addthisClassone"></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 id="1" class="addthisClassone"></div>
</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 id="2" class="addthisClasstwo"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div id="3" class="addthisClasstree"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
JS
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
});
I suggest to add an extra general class instead of ids and data attributes to store the classes you want to change on every radio button, check the example bellow.
Note : To add class you can use addClass() function but that will append classes so every time you click new class will be added, you could reset class attribute using removeClass() on every click and add default class checkedWrap plus the new class :
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
Hope this helps.
Snippet
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
var additional_class = $('input[name=checkit]:checked').parent().find('.global-class').data('additional-class');
$('.checkedWrap').text(checked_radio_text);
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
});
});
.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% !important;
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: 10px;
width: 34px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -5px;
display: block;
width: 20px;
height: 20px;
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 {
padding:30px;
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;
}
.addthisClassone {
width:10px;
height:10px;
background-color:blue;
}
.addthisClasstwo {
background-color:green;
width:10px;
height:10px;
}
.addthisClasstree {
background-color:black;
width:10px;
height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap addthisClassone"></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 data-additional-class='addthisClassone' class="global-class"></div>
</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 data-additional-class='addthisClasstwo' class="global-class"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden"/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div data-additional-class='addthisClasstree' class="global-class"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
addClass Adds the specified class(es) to each element in the set of
matched elements.
Try out this
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
$("#checkedWrap").addClass("addthisClasstree");
});
If you want to add a class with JavaScript, you can use jQuery, it has a function for that.
Check addClass(). It adds a new class to a particular jQuery DOM Element.
Related
I have below html for a quiz and it requires that each of the radio option should display different color like red, green, blue when clicked and for default conditions all will be white background and if the click is second time using a true false condition it would become white or unselected.
I have tried using radio buttons styled as normal buttons. Would it be better to use checkboxes?
please guide so that I complete it . Would I need to use JS for each set or jquery is easy to use.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family:sans-serif;
}
#radioset {
margin:4px;
float:center;
}
#radioset label {
float:left;
width:170px;
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
width:100%
}
#radioset label span {
text-align:center;
font-size: 32px;
padding:13px 0px;
display:block;
}
#radioset label input {
position:absolute;
top:-20px;
visibility: hidden;
}
#radioset input:checked + span {
background-color:red;
color:#F7F7F7;
}
.button {
/*background-color: #4CAF50; Green */
border: 2px solid black;
/*color: white;*/
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 5vw;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
width: 100%;
}
.div1 {
width: 95vw;
border-radius: 20px;
background-color: #ddd;
padding: 10px;
margin:0 auto;
overflow:hidden;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}
input{
width: 100%;
height: 50px;
font-size: 5vw;
}
h1 {
font-size:6vw;
}
</style>
</head>
<body>
<!-- QUESTIONS-- -->
<div class="div1 card">
<h1>Question 1 ?</h1>
<div id="radioset">
<label><input type="radio" name="toggle"><span>YES</span></label><br>
<label><input type="radio" name="toggle"><span>NO</span></label><br>
<label><input type="radio" name="toggle"><span>N/A</span></label><br>
</div>
</div>
<br>
<div class="div1 card">
<h1>Question 2 ?</h1>
<div id="radioset">
<label ><input type="radio" name="toggle2"><span>YES</span></label><br>
<label ><input type="radio" name="toggle2"><span>NO</span></label><br>
<label><input type="radio" name="toggle2"><span>N/A</span></label><br>
</div>
</div>
<br>
<div class="div1 card">
<h1>Question 3 ?</h1>
<div id="radioset">
<label ><input type="radio" name="toggle3"><span>YES</span></label><br>
<label ><input type="radio" name="toggle3"><span>NO</span></label><br>
<label><input type="radio" name="toggle3"><span>N/A</span></label><br>
</div>
</div>
<p>___________________________________________________________________________________</p>
</body>
</html>
https://jsfiddle.net/mrgyk3zs/
Thanks.
Based on your comments uderneath your question and provided example here my suggenstion:
Changes on your html:
<div id="radioset">
<label><input type="checkbox" name="toggle"><span class="yes">YES</span></label><br>
<label><input type="checkbox" name="toggle"><span class="no">NO</span></label><br>
<label><input type="checkbox" name="toggle"><span class="nut">N/A</span></label><br>
</div>
and the blocks with questions. Add a unique css class to each span element. Also change the type from 'radio' to 'checkbox' because you cannot unselect a radio field, without javascript.
Duplicate your css class
#radioset input:checked + span {
background-color:red;
color:#F7F7F7;
}
three times and add an the additional css class to selector:
#radioset input:checked + span.yes {
background-color:red;
color:#F7F7F7;
}
#radioset input:checked + span.no {
background-color:blue;
color:#F7F7F7;
}
#radioset input:checked + span.nut {
background-color:green;
color:#F7F7F7;
}
Important note: If you want to prevent to select only one, you have to use javascript for it.
If you want to use type radio instead have a look at check/uncheck radio input with javascript hot two uncheck it with plain javascript.
I am trying to reverse the direction of the arrow in my checkbox by using two classes with help of ng-class.
Its not working as expected.
Here is my code:
PS : angularJS CDN is already integrated.
test.php
<div class="container">
<div class="row">
<div class="col-md-12" >
<div class="check-element animate-show-hide" ng-show="checked" style="display:inline-block;width:100%;overflow-y:auto;" >
<ul class="timeline timeline-horizontal" >
<li class="timeline-item" ng-repeat="s in steps">
<div class="timeline-badge" ng-class="{'navion':s.status === 1, 'timeline-badge-green':s.status === 0}"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{s.status === 1 ? "In progress" : (s.status === 0)? (s.date | date:"MMM d, y") : "Pending"}}</h4>
</div>
<div class="timeline-body">
<p>{{s.description}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<br>
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow"><i ng-class="{onlineClass}"></i>
</label>
</div>
style.css
label i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
}
.up {
-webkit-transform: rotate(-135deg);
margin-left: 27%;
margin-top: 38%;
}
.down {
-webkit-transform: rotate(45deg);
margin-left: 27%;
margin-top: 18%;
}
div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button:hover {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid red;
overflow:auto;
float:left;
color:red;
}
#ck-button label {
float:left;
width:4.0em;
height: 40px;
width: 40px;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#fff;
}
j_TestCtrl.js
$scope.onlineClass = function(a) {
return (a > 0) ? 'up' : 'down';
};
since onlineClass is a function you can use :
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow">
<i ng-class="onlineClass(checked)"></i>
>/label>
</div>
Try adding () after the function name in order to actually call the it in your ng-class code and also add a parameter as your function's definition is function(a).
Something like this:
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow">
<i ng-class="{onlineClass(checked)}"></i>
>/label>
</div>
P.S. Why would you want to tinker with a web standard element that everyone understands?
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 :)
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");
}
}
Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>
The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.
David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>