Set Default Radio Button + Associated Div - javascript

I am creating a widget that utilizes stylized radios and divs to display different bits of data, based on quotes for precious metal commodities. I need the radio "current" to load by default when the page loads. Using checked="checked"does check enable the radio (by underlining the label), but it doesn't load the associated div. I need the div to load on default too.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
});
});
</script>
</head>
<body>
<div id="title">
<text id="titletext">Commodities</text>
</div>
<div id="titleaccent">
</div>
<!--The form for the radio toggle buttons-->
<form name="range">
<input id="rdb1" class="radio" type="radio" name="toggler" value="1" >
<label for="rdb1">Current</label>
<input id="rdb2" class="radio" type="radio" name="toggler" value="2" >
<label for="rdb2">24-Hour</label>
<input id="rdb3" class="radio" type="radio" name="toggler" value="3" >
<label for="rdb3">Week</label>
<input id="rdb4" class="radio" type="radio" name="toggler" value="4" >
<label for="rdb4">Month</label>
</form>
<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="toHide" style="display:none">
Current commodity quote info here
</div>
<div id="blk-2" class="toHide" style="display:none">
24-hour comparison of commodity quote info here
</div>
<div id="blk-3" class="toHide" style="display:none">
Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide" style="display:none">
Monthly comparison of commodity quote info here
</div>
</body>
</html>
CSS:
#title{
background-color: #103346;
height: 28px;
width: 305px;
}
#titletext{
color: #ffffff;
font-size: 15pt;
position: fixed;
top: 11px;
left: 18px;
}
#titleaccent{
background-color: #C3A43F;
height: 6px;
width: 305px;
}
.radio{
display: none;
margin: 10px;
}
.radio + label{
display:inline-block;
margin:-2px;
padding: 4px 12px;
}
.radio:checked + label{
text-decoration: underline;
}

Use some CSS and JS:
http://jsfiddle.net/cW4DR/1/
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$('.current').hide();
$("#blk-"+$(this).val()).show(100);
});
});
.toHide{
display:none;
}
.current{
display:block;
}

Do:
<input type="radio" name="toggler" ... checked>
$(function(){
var whatever = function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
};
$("[name=toggler]").click(whatever);
$("[name=toggler]:checked").each(whatever);
});

Related

How to prevent user from selecting next collapsible item until previous responses are filled?

I am trying to write a basic form in Flask which is just a single page right now. The user first types in their name, then they can answer their gender, and finally respond what transportation method they use. But I need them to do be able to do this sequentially, so they cannot answer their transportation method until the previous two responses have been typed or selected. This is a learning exercise, so I also want to aim this to be on a single page.
The following html/css/javascript code shows the rudimentary basics of what I have currently. All three topic questions are in a collapsible field. So I want the user unable to click on the following collapsible fields until the previous field has a response. I was thinking that this must be done in javascript, but I am unsure as to how I can do this.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: rgb(200, 211, 214);
color: black;
font-weight:bold;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: brown;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: beige;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:rgb(172, 212, 245);overflow-x:hidden">
<button type="button" class="collapsible">Name</button>
<div class="content">
<p> Must fill out before heading to next section </p>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</div>
<br>
<button type="button" class="collapsible">Gender</button>
<div class="content">
<p> Must fill out before heading to next section </p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<br>
<button type="button" class="collapsible">Transportation</button>
<div class="content">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</div>
</body>
</html>
can you try this
coll[i].collapsible( "disable" );
you can disable the rest after first is answered enable the second and go on like this

checkbox structure where If single child checkboxes are selected, then the parent checkbox should get selected automatically

enter image description hereI need to create checkbox structure with the following conditions:-
When a parent checkbox is selected, all child checkboxes should get selected automatically.
If all child checkboxes are unselected, then the parent checkbox should get unchecked automatically.
If single child checkboxes are selected, then the parent checkbox should get selected automatically.
...this is how it should look like : -[this is how it should look like
this is my code. But it doesn't seems to satisfy 2nd condition. I think my logic is right but somewhere there is syntax problem. Please explain the changes you suggest or make. Thanks a ton in advance.
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
<!--$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});--->
<script>
$(document).ready(function(){
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
//$("input").click(function() {
//$(this).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
//});
$('.selecter').find('input').each(function(index, input) {
$("input").on("change", function(){
var checkbox = $(this);
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
}else{
var checkbox = $(this).parents("li").siblings("li").find("input");
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}
else{
$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
}
}
});
});
});
</script>
<!--else{
// var checkbox = $(this).parents("li").siblings("li").find("input");
// var is_checked = $(checkbox).is(':checked');
// if(is_checked) {
// $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}else{
// $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
/// }
// }}
// });
// });--->
</body>
</html>
I'd add a class to the group and to the child checkboxes for easier selection.
Your parent selector function is good, though I wrote it as below. The child selector function should update based on if any boxes are ticked or not; you can use the .length property to get the number of checked child boxes.
Jsfiddle
$(document).ready(function() {
//check/uncheck any siblings
$('.selecter input.parchek').click(function() {
$(this).closest("div.checkgroup").find(".childchek").prop("checked", this.checked);
});
//check/uncheck parent
$('.selecter input.childchek').click(function() {
var numChecked = $(this).closest("div.checkgroup").find(".childchek:checked").length;
$(this).closest("div.checkgroup").find(".parchek").prop("checked", (numChecked > 0));
});
});
You had two errors:
This was not returning the correct valuevar is_checked = $(checkbox).is(':checked');, instead you could have used the already defined checkbox element checkbox.is(':checked');
Instead of using .removeAttr() in $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked'); you chould have used .prop('checked', false);
Corrected code below:
$(document).ready(function() {
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
$('.selecter').find('input').each(function(index, input) {
$(this).on("change", function() {
var checkbox = $(this);
var is_checked = checkbox.is(':checked');
if (is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
} else {
let checkboxes = $(this).parents("ul").find("input");
if (allCheckBoxesUnChecked(checkboxes)) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
}
}
});
});
// helper function that checks if all checkboxes are unchecked
function allCheckBoxesUnChecked(elems) {
let allUnchecked = true;
$.each(elems, function(ind, item) {
if (item.checked) {
allUnchecked = false;
return;
}
});
return allUnchecked;
}
});
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
</body>
</html>

Change btn color when clicking menu checkbox option

I am trying to have a button change color when a user clicks one of the options from a menu listing. Is this possible?
For btn_clear, I would like the background-color to change automatically immediately to BLUE upon click of one of the menu options, and for btn_apply the same but color change to RED.
So for example, for category "Products" a user clicks "Alpha" and then the button color changes take effect automatically immediately.
Please see my FIDDLE... FIDDLE
(SA snippet doesnt seem to want to work... sorry).
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$("checkbox").on("click", function(e) {
e.preventDefault();
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>
Yes, it is possible http://www.bootply.com/rb3Uyw68Zg
but you have a few issues with your code, I added some "console.log" the see what was going on there
first you were missing a "." in your selectors, to change
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
into
if ( i === 1 ) {
$('.btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('.btn_apply').css('background', 'red');
}
also
var i = $("li").index( $(this).parent() );
is always resulting -1, so you never get into those ifs, you'll have to fix this line for your background color changes to get called.
this is the code after my changes http://www.bootply.com/rb3Uyw68Zg
EDIT
to restrict the handling of clicks per menu, you can use the descendant selector, so you should change:
$(".checkbox").on("click", function(e) {
into
$(".products .checkbox").on("click", function(e) {
that means, you will only handle clicks to checkboxes that are children of ".products" (you also have to add products class to your dropdown)
here's an updated example: http://www.bootply.com/QoIe6kIt2e
This will change the colors of both of the buttons when one option is selected:
$(".checkbox").on("click", function(e) {
$('.btn_clear').css('background-color', 'blue');
$('.btn_apply').css('background-color', 'red');
});
Snippet:http://www.bootply.com/0CQWCAtU2s

CSS vendor prefixes for HTML Form

I am developing a form for the 5 main browsers and want to know a little more about CSS vendor prefixes. The form looks different in firefox, i would usually move the div with top and left CSS but just want to tweak firefox.
From what i have read -moz-margin-start: 10em; seems to be a way of moving the div but doesn't work. How do I move the div in only firefox using css?
I have a list of prefixes here http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and use https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-margin-start as well.
p.s. i read that using Grunt stops the need for using CSS Vendor prefixes, is it worth setting up?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/src/typography.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--<link rel="stylesheet" type="text/css" href="blueprint/blueprint/ie.css" />-->
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
</head>
<body>
<div class="container showgrid">
<h2><center>Research Request Form</center></h2>
<div>
<input type="text" class="span-4" id="listcode">
</div>
<div>
<input type="text" class="span-4" id="sourceCode">
</div>
<div>
<input type="text" class="span-7" id="division">
</div>
<div class="span-24" id="wrap2">
<input type="text" class="span-23" id="projectName">
</div>
<div class="span-4">
<div class="span-4" id="interestCodes">
<p>
<input class="span-4" id="interestCodes" style="" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes" style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
<p style=""> Interest Codes</p>
</p>
</div>
<div>
<input class="span-18" id="listCodeAndName"style="" name="Text1" value="List code and Name:">
</div>
<div id="detailWrap">
<div id="details">
<p>Marketing Manager: </p>
<p>Marketing Director: </p>
<p>Date Submitted: </p>
<p>Ideal Deadline: </p>
<p>Quantity Submitted: </p>
<p><input type="submit" name="submit" value="Send" /></p>
</div>
</div>
</body>
</html>
body {
background-color: #99FF99;
font-family: verdana, sans-serif;
}
#listcode {
height: 50px;
margin-left: 22px;
}
.container {
border:2px solid black;
}
#sourceCode {
height: 50px;
margin-left: 58px;
}
#division {
height: 50px;
float: right;
margin-right:18px;
}
#wrap2 {
display: block;
clear: both;
}
#projectName {
height: 50px;
margin: 20px 20px 20px 20px;
}
#interestCodes {
margin-left: 10px;
}
#listCodeAndName{
-moz-margin-end:10em;
margin-left: 230px;
width: 688px;
height: 160px;
position: fixed;
top: 224px;
left: 146px;
}
If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:
body {
margin: 0;
}
Or you better start using CSS reset, normalize.css for example.
I hope it helps, and I dont went wrong way.

aligning radio buttons within a div

This is my first attempt at using javscript with html/css. I have a button that when clicked shows a question, and three radio buttons. Everything so far so good, but I would like the radio buttons to be aligned with their actual button on the left (not the text). The content div is centered, so it seems like it is just centering the radio buttons to the page, but not relative to one another. I think if you take a look at my link you will understand:
Link to example page
Any ideas on how I can get the affect I am looking for here? Admittedly this is pretty clunky but baby steps :)
Here is my html:
<!-- Here is the main content -->
<div class="content">
<h1>Quiz With Javascript</h1>
<p>This is a simple quiz leveraging javascript.</p>
<div class="btn-group">
<input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" />
</div>
<div id="question1">
<h3>Where Does Phil Work?</h3>
<div>
<form>
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</form>
</div>
<script src="js/quiz.js"></script>
<script type="text/javascript">
function showDiv() {
document.getElementById('question1').style.display = "block";
}
</script>
</div>
Here is a snippet from my CSS:
body {
margin: 50px 0px;
padding: 0px;
background-color: #7FFFD4;
border-radius: 25px;
}
.content {
text-align: center;
}
input[type='radio']{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
form {
padding-left: 559px;
text-align: left;
}
Try this:
<form style="">
<div class="centerDiv">
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</div>
</form>
and the CSS:
.centerDiv {
display: inline-block;
margin: auto;
text-align: left;
}

Categories