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;
}
Related
The submit button is refreshing the page, which leads to showing elements, I don't want to be shown.
I tried having a preventDefault() function but then it wouldn't submit the form.
I tried it without but if I do so, the form would submit but the elements are still shown.
$(".signupbtn").click(function(e){
console.log("Sign up clicked");
document.getElementsByClassName("huhu")[0].style.display = "none";
document.getElementsByClassName("afterForm")[0].style.display = "block";
e.preventDefault();
console.log("Succes")
});
<!-- the output from the form -->
<div class="afterForm" >
<h3 id="output"/>
</div>
<!-- the submiting -->
<form class="modal-content" id="myForm" onsubmit="readForm()">
<div class="container">
<h1 >Order</h1>
<p>Please fill in this form to receive your meal. Required fields: *</p>
<hr>
<label for="email"><b>Email*</b></label>
<input type="text" placeholder="zyxzyx#domain.com" name="email" value="" required>
<label for="adr1"><b>Adress* (Housenumber, Street, City)</b></label>
<input type="text" placeholder="555, Zxy blvd, San zxy" name="adr1" value="" required>
<label for="adr2"><b>Adress* (ZIP, State)</b></label>
<input type="text" placeholder="00000, ZY" name="adr2" value="" required>
<p>By pressing "Order" you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn" >Order</button>
</div>
</div>
</form>
<!-- the ordering -->
<div class="huhu">
<h1 class="ord">Select your order:</h1>
<input onclick="firstIcon()" id="fIcon" type="image" src="https://dl.dropboxusercontent.com/s/kw6l23hm37kzqq8/sushi.png" />
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;vertical-align:middle" class="button">
<span>Next Step </span>
</button>
</div>
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.signupbtn {
float: left;
width: 50%;
}
I except the class "huhu" to vanish and the class "afterForm" to show after the order button is clicked. If don't fill in the form, click Order and then cancel, the elements hide but don't show.
Is there an other solution than preventDefault() or is the solution easier than I thought?
I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>
Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.
we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.
please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery code :-
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}
Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
You can find working jsfiddle here without so much changes to your code
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
Multiple checkbox toggle with image and textarea
Here is updated jquery function:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.
Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
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
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);
});