When I clicked on 'continue 1' button on the first page it will direct me to second tabs. But the tab 2 header doesn't change to dark color. How should I do that?
-Another question, when i clicked on the 'continue 1' button, it directs me to second tabs, but the second tabs alignment is off. Why is it like that?
Here is the FIDDLE example:
HTML
<div class="main-content">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">1<div class="train-stop-text" id="id1">1</div></label>
<div id="tab-content1" class="tab-content animated fadeIn">
1
<br>
<button type="button" class="btn" id="previous1">Previous 1</button>
<button type="button" class="btn" id="continue1">Continue 1</button>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">2<div class="train-stop-text" id="id2">2</div></label>
<div id="tab-content2" class="tab-content animated fadeIn">
2
<br>
<button type="button" class="btn" id="previous2">Previous 2</button>
<button type="button" class="btn" id="continue2">Continue 2</button>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">3<div class="train-stop-text" id="id3">3</div></label>
<div id="tab-content3" class="tab-content animated fadeIn">
3
<br>
<button type="button" class="btn" id="previous3">Previous 3</button>
<button type="button" class="btn" id="continue3">Continue 3</button>
</div>
</li>
</ul>
</div>
CSS
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 85%;
float: none;
list-style: none;
position: relative;
padding: 0;
/* margin: 75px auto; */
}
.tabs li{
float: left;
}
.tabs label {
/*display: block;*/
width:30px;
height:30px;
text-align:center;
padding:3px;
border-radius: 25px;
border:2px solid #d1d9e5;
color: #d1d9e5;
font-size: 14px;
font-weight: normal;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #fff;
color: #8a8f96;
border: 2px solid #8a8f96;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
padding-left: 250px;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
position: absolute;
top: 100px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
Javascript
$(document).ready(function () {
$("#continue1").click(function () {
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab-content1").hide();
});
});
Thank you!
The darker border is associated with the checked radio button([id^=tab]:checked + label {}) so mark the tab2 radio as checked
$(document).ready(function () {
$("#continue1").click(function () {
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab-content1").hide();
$('#tab2').prop('checked',true)
});
});
Demo: Fiddle
Have you thought about using a pre-existing solution for this functionality?
Examples:
http://sachinchoolur.github.io/lightslider/
http://codecanyon.net/item/lush-content-slider/3918728
http://cssslider.com/
Something along these lines could save you a lot of time.
You need to remove the checked attribute in tab1 too so your first tab does not highlight.
$(document).ready(function () {
$("#continue1").click(function () {
console.log("asdf");
$("#tab-content3").hide();
$("#tab-content2").show();
$("#tab1").removeAttr("checked");
$("#tab2").attr("checked",true);
$("#tab-content1").hide();
});
});
Related
I have two buttons that they're going to show some content after getting clicked each one. the buttons are inactive at first. after getting hovered and clicked, they'll get the active class.
the problem is by clicking on the active button again, it's going to collapse the div element which is ok but that active button doesn't get inactive after getting clicked for the second time.
and keep in mind that my collapse part is not working properly in snippet which I don't know why ( actually it's working perfectly in my project) and it's not a very important issue cos it doesn't affect the main issue I discussed above.
so the question is: how can I inactivate the active button after getting clicked for the second time cos it's gonna collapse its div element so basically when the specified div element is collapsed, its button shouldn't be active anymore.
does anybody know where my mistake is?
$(document).on('click', '#Resume-items li', function () {
$(this).addClass('active').siblings().removeClass('active'),
document.getElementsByClassName('.Resume-click-open').style.height = '100px'
});
jQuery('.btn-Resume-buttons').click(function (e) {
jQuery('.collapse').collapse('hide');
});
#Resume-items {
list-style: none;
text-align: center;
}
#Resume-items li {
display: inline-block;
margin: 15px 25px;
}
#Resume-items .btn {
color: black;
background: rgba(168, 198, 222, 0.4);
cursor: pointer;
position: relative;
outline: none;
border: none;
padding: 0.9rem 1.8rem;
font-size: 16px;
}
.btn.btn-Resume-buttons::before {
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
position: absolute;
background-color: black;
transform: scaleX(0);
transition: transform 300ms ease-in-out;
transform-origin: left;
}
.btn.btn-Resume-buttons {
transition: color 300ms ease-in-out;
z-index: 1;
position: relative;
}
.btn.btn-Resume-buttons:hover::before,
.btn.btn-Resume-buttons:focus::before {
transform: scaleX(1);
box-shadow: 0 2px 6px black;
}
.btn.btn-Resume-buttons:hover,
.btn.btn-Resume-buttons:focus {
color: #dae7f1 !important;
}
#Resume-items li.active .btn.btn-Resume-buttons {
background: black;
color: #dae7f1;
}
.Resume-click-open {
max-width: 100%;
border: none;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 panel-group fade-in-resume" id="accordion">
<div class="panel justify-content-center">
<ul id="Resume-items">
<li class="panel-title">
<button data-toggle="collapse" data-parent="#accordion"
class="btn btn-Resume-buttons" href="#test1">test 1
</button>
</li>
<li class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons"
href="#Test2">Test 2
</button>
</li>
</ul>
</div>
<div class="Resume-click-open row">
<div id="test1" class="panel-collapse collapse">
something1
</div>
<div id="test2" class="panel-collapse collapse">
something2
</div>
</div>
</div>
try thisL
Jquery:
$(document).ready(function () {
$('body').on('click', '.btn', function(){
$(".btn").not(this).removeClass('active');
if($(this).hasClass('active')){
$('.Resume-click-open').css({'height' : '100px'});
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
});
$('.btn-Resume-buttons').click(function(e){
$('.collapse').collapse('hide');
});
});
HTML:
<div class="col-lg-12 panel-group fade-in-resume" id="accordion">
<div class="panel justify-content-center">
<ul id="Resume-items">
<li class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#test1">test 1</button>
</li>
<li class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" class="btn btn-Resume-buttons" href="#Test2">Test 2</button>
</li>
</ul>
</div>
<div class="Resume-click-open row">
<div id="test1" class="panel-collapse collapse">
something1
</div>
<div id="test2" class="panel-collapse collapse">
something2
</div>
</div>
</div>
CSS:
#Resume-items {
list-style: none;
text-align: center;
}
#Resume-items li {
display: inline-block;
margin: 15px 25px;
}
#Resume-items .btn {
color: black;
background: rgba(168, 198, 222, 0.4);
cursor: pointer;
position: relative;
outline: none;
border: none;
padding: 0.9rem 1.8rem;
font-size: 16px;
overflow:hidden;
transition: all 0.3s ease-in-out;
z-index:1;
}
.btn:hover {
color: #dae7f1 !important;
}
.btn.btn-Resume-buttons::before {
content: '';
width:0;
min-height:100%;
position:absolute;
left: 0;
top: 0;
z-index:-1;
transition: all 0.3s ease-in-out;
background-color: #000;
}
.btn.btn-Resume-buttons:hover::before {
color: #dae7f1 !important;
width:100%;
}
.btn.active {
background: #00b32d !important;
color: #dae7f1 !important;
}
.Resume-click-open {
max-width: 100%;
border: none;
margin: 0 auto;
}
My requirement:
1. Get the data from the mongo collection and display into accordion
2. Set the active ID of the selected html accordion tag same as that of the document from collection.
3. Get the dropdown transition when we click in any one accordion entry in UI.
sample.html
{{#each listjobs}}
<button class="accordion">{{platform}}</button>
<div class="panel">
<ul class="panel_elements">
<li><input type="submit" name="delete" value="Delete" /></li>
<li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
<li><input type="checkbox" name="def" value="def" />{{def}}</li>
<li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
<li><input type="submit" name="trigger" value="Trigger" /></li>
<li id="status">SUCCESS / FAIL</li>
</ul>
</div>
{{/each}}
sample.css
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ccc;
border: 1px solid black;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
ul.panel_elements{
list-style-type:none;
}
ul.panel_elements li{
display:inline-block;
}
sample.js
Template.trigger.events({
'click .accordion':function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
},
});
The list is displayed by fetching entry mongo collections, but when i click on the job in UI the accordion drop-down doesn't comes up!!.
Can anyone please help me to solve this? or is there any other way to do this?
I've reused what's already available here:
Template:
{{#each listjobs}}
<button class="accordion">{{platform}}</button>
<div class="panel">
<ul class="panel_elements">
<li><input type="submit" name="delete" value="Delete" /></li>
<li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
<li><input type="checkbox" name="def" value="def" />{{def}}</li>
<li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
<li><input type="submit" name="trigger" value="Trigger" /></li>
<li id="status">SUCCESS / FAIL</li>
</ul>
{{/each}}
CSS:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ccc;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
I am trying to create webpage with menus and each menu item is separate html page. While clicking the menu items they open up in the separate page(hiding the menu) which don't want as the user should be able to click on other menu they should open up in same page with menu item being displayed all time. I tried several thing but cant establish it.
Below is the html :
<DOCTYPE html>
<html>
<head>
<title>gurukul_admin</title>
<link rel="stylesheet" href="gurukul_admin.css">
<link rel="stylesheet" href="iframe.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<iframe width = "1120" class = "iframe" height = "900" style="float:right" name="admission"></iframe>
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Dashboard</span></label>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"><span>Admissions</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Application Decision</span></li>
<li><i class="fa fa-share"></i><span>Enrol/Reject</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Enrolment</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>Section Allocation</span></li>
<li><i class="fa fa-group"></i><span>Change Section</span></li>
<li><i class="fa fa-sitemap"></i><span>Exam Allocation</span></li>
<li><i class="fa fa-sitemap"></i><span>Fee Allocation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Administration</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a target="_self" href="acadmgmt.html" >Academic Year</a></span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Section Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Subject Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Fee Category/Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Assessment Codes</span></li>
<li><i class="fa fa-coffee"></i><span>System Users</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-5" value="toggle"/>
<label for="section-5"> <span>Staff Management</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Add New Staff</span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
</div>
</div>
</div>
</div>
</body>
</html>
Below is css
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1ABC9C;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 210px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
I tried with iframe but alignment changes on different screen size it looks horrible *
Iframe css
iframe {
margin-top: 0px;
margin-bottom: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: none;
background-color:#1ABC9C;
scrolling="no";
}
a:link, a:visited {
background-color: #363636;
color: white;
text-decoration: none;
}
a:hover, a:active {
background-color: #363636;
color: white;
text-decoration: none;
}
Not sure how familiar you with JQuery, but this might be helpful:
I would write a script, that would change the iframe src value to the corresponding url of the page on click.
In your case it would look something like this:
script.js
$("a").click(function(event, target){
event.preventDefault();
console.log(event.target);
$("#myiframe").attr("src", $(event.target).attr("href"));
});
Instead of a you can assign classes to the links in your menu, and put them in the code instead of "a".
In your index.html
<div>
<iframe src="anyurl.com" id="myiframe"></iframe>
</div>
It is important that you provide an id to your iframe to call it properly from the script.
Delete target attribute from your menu links, as they are not necessary anymore.
After lot of deliberation and hits and misses I eventually found out that I had to position my iframe under and position it accordingly
I want to get this effect: www.kemtecnia.com
This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.
How can I do in my code to get it?
I have the navbar top:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.
CSS of the navbar:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
Thanks so much in advance!
Edit:
Codepen here: http://codepen.io/jesfer/pen/oLvQYY
don't know if this helps... but might be what you are looking for or atleast push you in the right direction.
http://codepen.io/MatthewBryce/pen/qZBPpp
HTML
<div class="headerWrap">
<div class="headerWrapContent">
Title
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div><div class="wrap">
<div class="headerWrap">
<div class="headerWrapContent">
Stupidly simple stick-on-scroll Menu
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS
body {
color: #444;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
margin: 0px;
background: #222;
}
.headerMast {
background: #AAA;
min-height: 200px;
max-height: 200px;
margin-top: 0px;
text-align: center;
padding-top: 110px;
color: #FFF;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.headerMastAnim {
margin-top: -300px;
margin-bottom: 300px;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.wrap {
background: #444;
overflow: auto;
}
.headerWrap {
background: #222;
font-size: 30px;
height: 100px;
line-height: 100px;
font-weight: lighter;
color: #CCC;
}
.headerWrapContent {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.menuWrap {
background: RGBA(0,0,0,0.7);
color: #fff;
height: 55px;
line-height: 60px;
letter-spacing: 1px;
width: 100%;
margin-bottom: -55px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
z-index: 100;
position: absolute;
}
.menuWrap.sticky {
position: fixed;
top: 0px;
height: 30px;
line-height: 30px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
}
.menuNavigationFloat {
background: RGBA(0,0,0,0.5);
padding: 0px 20px;
width: 80%;
height: inherit;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
.menuNavigationFloat a{
list-style: none;
color: #FFF;
font-size: 16px;
width: 170px;
height: auto;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: inline-block;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: background 0.4s, width 0.3s;
}
.menuNavigationFloat a:hover{
text-decoration: none;
width: 200px;
transition: background 0.4, width 0.3s;
}
.menuNavigationFloat a:nth-child(1) { background: #CC2222; }
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; }
.contentWrap {
background: #EEE;
width: 80%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 80px;
min-height: 1000px;
}
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.menuWrap').addClass("sticky");
$('.headerMast').addClass("headerMastAnim");
}
else{
$('.menuWrap').removeClass("sticky");
$('.headerMast').removeClass("headerMastAnim");
}
});
http://codepen.io/MatthewBryce/pen/qZBPpp
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());
});
});