Consider the following html code snippet:
<div id="parent" class="parent">
<form id="child" class="child">
<input id="textForDim" type="text" />
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>
and corresponding css styles
.parent{
position: absolute;
text-align: center;
width: 350px;
height: 450px;
background-color: #f7f7f7;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.childd{
width:200px;
height:180px;
background: grey;
}
.cchild{
background:aqua;
width:20px;
height:10px;
}
JSFIDDLE. How i can do that after submit button click we have margin-left,margin-right,width,padding-left,padding-right in the textForDim input as the follow:
margin-left: _Margin-Left_Value_px, margin-right: _Margin-Right_Value_px, etcetera...
Is it possible to apply JS for this needs or it's a bad practice?
Where _Margin-Right_Value_px is the value of margin-right property of divchild div element.
<script>
function doThis()
{
var k = document.getElementById('textForDim');
k.style.marginLeft = _Margin_Left_Value_px + "px";
k.style.marginRight = _Margin_Right_Value_px + "px";
}
</script>
<div id="parent" class="parent">
<form id="child" class="child">
<input type="text" id="textForDim" onclick="doThis()"/>
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>
Related
I use google services to create forms and upload photos to google drive. File name rule decision so I want to automatically rename the file according to the rules available on the html form. Is that work even possible?
In the [Attachment filename] the selected file name will be displayed.
The [Attachment file name after rename] will display the file name after automatically renaming it.
※The file name rule I want to change is title_date
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{
margin: 0 auto;
margin-top:30px;
}
.container{
font-family: 'PT Sans', sans-serif;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
margin-top: 10px;
width:100%;
}
input[type=text], select, textarea,input[type=date] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<div class="container" >
<h1 style="color:#7c795d">TITLE</h1>
<label for="part6"> Attachment</label><br>
<script>
updateList = function() {
var input = document.getElementById('myFile');
var output = document.getElementById('fileList');
var children = "";
for (var i = 0; i < input.files.length; ++i) {
children += '<li>' + input.files.item(i).name + '</li>';
}
output.innerHTML = '<ul>'+children+'</ul>';
}
</script>
<input type="file" onchange="javascript:updateList()" name="filename" id="myFile" multiple>
<input type="hidden" id="fileData" name="fileData" />
<input type="hidden" id="mimeType" name="mimeType" />
<input type="hidden" id="fileName" name="fileName" />
<p>Attachment file name:</p>
<div id="fileList"></div>
<div id="output" ></div>
<div id="progressbar" >
<div class="progress-label" ></div>
</div>
<input type="submit" value="Send" onclick="iteratorFileUpload()" >
</div>
</div>
</form>
</body>
</html>
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 have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.
If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.
Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/
I have this fiddle where I am trying to create a floating div which should toggle from right to left .
I am very new to UI so my code is bit messy
here is my code and FIddle
$(".widget-toggle-btn").click(function() {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.widget').toggle(effect, 'right', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
So if you click on that toggle button I am getting error that n.easing[this.easing] is not a function
Can any one help me fix this thanks
you can use float values in jquery.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').css('float','left');
$('.widget-toggle-btn').css('float','right');
});
Here is your update code. https://jsfiddle.net/KFmLv/6753/
You can do it like this also. refer the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.mydiv{
width: 0px;
height: 100px;
position: absolute;
left: 70px;
top: 20px;
background-color: orange;
overflow: hidden;
text-align: center;
color: white;
}
#mybutton{
width: 70px;
height: 100px;
color: white;
position: absolute;
top:20px;
left:0px;
background-color: black;
color: orange;
}
</style>
<body>
<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>
<script type="text/javascript">
var theNum = 0;
$("#mybutton").click(function(){
theNum = theNum +1;
if(theNum%2 != 0)
{
$("div.mydiv").animate({width:500},1000);
}
else
{
$("div.mydiv").animate({width:0},1000);
}
});
</script>
</body>
</html>
NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.holder{
width: 400px;
height: 600px;
position: absolute;
right: 0;
}
div.holder div.formholder{
width: 0px;
height: 600px;
background-color: orange;
position: absolute;
right: 0;
}
#mybutton{
width: 50px;
height: auto;
position: absolute;
right: 0px;
}
</style>
<body>
<div class="holder">
<div class="formholder"></div>
<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>
<script type="text/javascript">
var my_val = 0;
$("#mybutton").click(function(){
my_val = my_val+1;
if (my_val%2 != 0)
{
$("div.formholder").animate({width:300},1000);
$("#mybutton").animate({right:300},1000);
}
else
{
$("div.formholder").animate({width:0},1000);
$("#mybutton").animate({right:0},1000);
}
});
</script>
</body>
</html>
You need to download the jquery ui plugin. all the effects are binding in a single file.
Link for Jquery UI Effects
Sorry I can't add a comment, but the button is fixed because it does not have class .widget
you missed the jQuery ui library.
And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').toggle(effect,'left', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
Updated
$(".widget-toggle-btn").click(function() {
var effect = 'slide';
var options = { direction: 'right' };
var duration = 500;
$('.widget').toggle(effect, options, duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
display: none;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
#popup-x{
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
You don't need jQuery for this effect. Doing it with css transforms is more performant.
const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
box.classList.toggle('show')
})
body {
background-color: mediumseagreen;
}
button {
border: 1px solid #fff;
border-radius: 3px;
background: none;
padding: 5px;
margin: 5px;
}
.box {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: seagreen;
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease-in-out;
}
.show {
transform: scaleX(1);
}
<button>Toggle</button>
<div class="box">
I'm just a simple box!
</div>
You have an error in this row:
$('.widget').toggle(effect,'left', duration);
effect and duration are the property names.. you can't just copy it and hope that it's gonna work.
if you want to fix it, change it to:
$('.widget').toggle('left');
but if you want to study, read some jQuery tutorial
this one for example: http://www.w3schools.com/jquery/
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.