I have the below form and am using css to display display span when radio button is clicked using the code
<style>
.glyphicon{
display: none;
}
input[type="radio"]:checked + span{
display: block;
}
</style>
<form>
<div class="form-group" id="myform">
<label for="usr">Q1:Are these dates in chronological order?1492,1941,1586 </label>
</div>
<div class="radio">
<label><input type="radio" id="opt0" name="optradio0">yes<span id="sp0" class="glyphicon glyphicon-remove"></span></label>
</div>
<div class="radio">
<label><input type="radio" id="opt1" name="optradio0">no<span id="sp1" class="glyphicon glyphicon-ok"></span></label>
</div>
<br/>
</form>
However there is a problem that the glyphicons are visible when the page is loaded. See link below
http://upscfever.com/upsc-fever/en/apti/en-apti1-chp6a.html
However when i remove the code given below the page works fine. So how can i keep the below code and still achieve the purpose.
<script>
$(document).ready(function(){
$("#header").load("http://upscfever.com/upsc-fever/header.html");
$("#footer").load("http://upscfever.com/upsc-fever/footer.html");
});
</script>
You can inspect the glyphicon in the dev console. Find out it's identifier, and then in your css, set it's initial display to none.
Don't forget to be as specific as possible to future proof it.
Related
I have added radio button in a table using bootstrap 4. Whenever I click on any of the radio button it moves slightly to the left. I have added a GIF below
The code of one row from the table is given below.
<table>
<tr class="" data-id='1'>
<td>1</td>
<td>Md. Khairul Basar</td>
<td class="form-inline table_attendance">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio" style=" position: relative;"id="exampleRadios1" value="present">
<span class="form-check-sign"></span>
Present
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input pull-right" type="radio"
name="exampleRadio" style=" position: relative;"id="exampleRadios2"
value="absent">
<span class="form-check-sign"></span>
Absent
</label>
</div>
</td>
</tr>
<table>
If you could help me with the code then it would be great.
It seems to me that it does not move, it just simply gets bigger border and visually it looks like it moved. I guess you could solve your problem by adding to your css for the input with type checkbox this css line - box-sizing: border-box;
$('input[type="radio"]').css("box-sizing","border-box");
At first, you don't need position: relative if you don't use any top/bottom/left/right or position in child element.
The problem is due to your custom add CSS, I assume.
Try using box-sizing: border-box; It will force the element to be in original size, even if you use additional padding or border.
For clarification: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
#input{
display: inline-block;
}
<div>
<div>
<input type="radio">
<label>Item 1</label>
</div>
<div class="inputClass">
<div id="input">Some text</div>
<div id="input"><input type="text"></div>
</div>
<div>
<input type="radio">
<label>Item 2</label>
</div>
</div>
In the above HTML snippet, is there any way I can restrict tabbing to the input inside .inputClass?
Please note that in the actual code I have no way of knowing if .inputClass will hold an input box or not. It could be a button, dropdowns etc or any other tabbable element. So I can't apply tabindex=-1 to the element(s).
Also, please note I don't want a jQuery solution.
I have created a series of radio buttons using boostrap version 3.3.7. I have also added a functionality such that when I click on one of those buttons the color of the radio button has to permanently change to blue. it all works fine when I load jQuery plugin with version bootstrap as shown below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But this will cause an error to toggle button which I have implemented and it is supposed to work as a dropdown list. If I Reverse the order in which jquery and bootstrap have been loaded then the dropdown will work all good causing an error with radio buttons. I would like to mention that radio button and toggle button are different features which I am working on. This has become a tricky problem to solve. Could I know which version of jquery would work for both the features which can be compatible with Bootstrap version 3.3.7 Please find the code below.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">
<i class="glyphicon glyphicon-dashboard"></i>
Dashboard
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" name="MontageSwap" id="MontageSwap"
onchange="montageSwap(this.value);">
<i class="glyphicon glyphicon-duplicate"></i>
Montage
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Car</li>
<li>Bus</li>
<li>Bicycle</li>
</ul>
</li>
<style>
.btn-default {
color: #D8D8D8;
background-color: #D8D8D8;
border-color: #D8D8D8;
}
.btn-default:hover {
background-color: #5F5A66;
}
.btn-default.active {
background-color: #4A90E2;
}
</style>
<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" autocomplete="off"
onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click", function () {
$(this).addClass('active');
});
</script>
How radio buttons are supposed to work
How they are actually working for me
There is nothing wrong with the compatibility of bootstrap and jquery. When you are using a radio button, there can only be one active button. And since you added blue color only to those with active class, upon clicking another button, the active class gets transferred to the newly clicked button.
The only reason why the radio button gets fixed when you switch the position of the jquery and bootstrap is because bootstrap is not working anymore and causes bugs. The best way you can achieve the behavior that you want is by using checkbox instead of radio.
But if you want to insist on using radio button, you need to make another class for your color. Here's what I did, from your css code:
.btn-default.active {
background-color: #4A90E2;
}
I changed it to:
.btn-default.color {
background-color: #4A90E2;
}
and added:
.btn-default.focus{
background-color: #4A90E2 !important;
}
to override the focus class when you click on the element.
for the script, i changed the active to color
$('.btn.btn-default').on("click", function () {
$(this).addClass('color');
});
To get rid of the small square below the bar that you created, I added this:
input[type=radio]{
margin-top:-6px;
}
You may visit the JSBin sample here
As you can see there, both the functions are working fine. :)
I have been searching for an answer all day but can't seem to find anything that would help my specific problem so here goes.
In a question form, I want to show hidden divs based on radio button selections, using the jQuery click() function. But after a second click() event is triggered, the div that was shown in the previous selection is forgotten, and returned to hidden status.
Here is an example code:
jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){
if(jQuery(this).attr("value")=="answer1"){
jQuery(".hide").hide();
jQuery(".answer1").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer2"){
jQuery(".hide").hide();
jQuery(".answer2").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer3"){
jQuery(".hide").hide();
jQuery(".answer1and2").show();
jQuery(".answer3").show();
}
});
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<h1>Question 1</h1>
<input type="radio" name="question1" value="answer1">
Answer 1
<input type="radio" name="question1" value="answer2">
Answer 2
<div class="answer1 hide">
<p>Answer 1 is Apple</p>
</div>
<div class="answer2 hide">
<p>Answer 2 is Mango</p>
</div>
<div class="answer1and2 hide">
<h1>Question 2</h1>
<input type="radio" name="question2" value="answer3">
Any answer
<input type="radio" name="question2" value="answer3">
Any answer
</div>
<div class="answer3 hide">
<p>Did you choose Apple or Mango?</p>
</div>
How can I retain just one of the answers that was shown after the first selection?
JSFiddle code here
If you don't want shown divs to be hidden again, then just remove "hide" class from items you get "shown"
Here is JSFiddle
And here is one example row of how to do that:
jQuery(".answer1").show().removeClass('hide');
Just remove every
jQuery(".hide").hide();
(now with fiddle)
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/