#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.
Related
I used this snap of code to create a dropdown menu that includes textboxes: https://stackoverflow.com/a/27547021
Now, i would like to move the position of this dropdown menu to align with a certain piece of tekst. Ideally, I would like it to be at the right side of the 'Tekstpiece'. I tried to adjust the CSS, as can be seen here: https://www.w3schools.com/code/tryit.asp?filename=GDUL1WPE82S0
However, the contents of the dropdown box do not move along with the box itsself. Furthermore, hardcoding the position is likely not the best option.
Any thoughts on how this can be pulled off?
Change your html to this:
<!DOCTYPE html>
<html>
<h3>Tekstpiece</h3>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
</form>
</html>
Assuming that you want the dropdown checkboxes want to be "lined up" with the select box.
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.
Using Bootstrap (3.3.6) collapse, with the collapsible DIVs located between form inputs\labels. When the DIVs expand\hide, there's a sort of snap\jitter.
The code for the problem: https://jsfiddle.net/ybto1zvk/
I've seen similar post talk about jitter when one of the DIVs has padding, but as you can see, there's no styling except what bootstrap is applying...
Have tried with Chrome and Firefox, no difference.
HTML
<form role="form">
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio1"> One (click me)
</label>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Sub 1
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio2"> Two
</label>
</div>
<div class="collapse" id="collapse-2">
<div class="well">
Sub 2
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio3"> Three
</label>
</div>
<div class="collapse" id="collapse-3">
<div class="well">
Sub 3
</div>
</div>
</form>
javascript
$('#radio1').click(function() {
$('#collapse-1').collapse('toggle');
$('#collapse-2').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio2').click(function() {
$('#collapse-2').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio3').click(function() {
$('#collapse-3').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-2').collapse('hide');
});
This is being caused by the bottom margin property (set by bootstrap) on the well. Try adding:
.well{margin:0}
To your css, this should solve the problem.
This issue is because of collapsing margin. As per Mozilla Documentation:
Parent and first/last child: If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
In your case margin-bottom of .well inside .collapse is creating this issue. You can solve this issue by many ways. But two ways are
Add overflow: hidden on parent
Remove margin-bottom from .well
Here is Working Fiddle
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 have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});