Develop Reference

angularjs show div if clicked inside a input field and hide if clicked outside

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide.
Here is my attempt:
JSFIDDLE LINK
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
<div class="details" ng-class="{ 'hidden': ! showHelp }">
<p>
The help text here!
</p>
</div>
</div>
</div>
the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field.
Please help me with this.

Use ng-focus instead of ng-click
Plunker Example
<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>

below code should help you.
<style>
.hidden{
-webkit-transition: width 2s; transition: width 2s;
display:none !important;;
}
.details{
display:block;
}
</style>
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">
<div class="details" ng-class="{'hidden':!showHelp}">
<p>
The help text here!
</p>
</div>
</div>
</div>

Custom keyboard tab order in html4

I want to manage keyboard tab order functionality, I am using a template for header, footer and sidebar where many anchor element & input element exists. In template content we can not put and tabindex attribute which is not in my control.
Middle part of template is my work area, where I created a form and some element
<fieldset id="myWorkArea">
<div class="fieldrow">
<label for="input1">Class</label>
<input id="input1"/>
<a id="help1" href="#">what's this?</a>
</div>
<div class="fieldrow">
<label for="input2">Class</label>
<input id="input2"/>
<a id="help2" href="#">what's this?</a>
</div>
</fieldset>
In above code I want to cursor tabbing in below id order.
#help1 > #input1
#help2 > #input2
Is any approach to control keyboard tabbing order in only #myWorkArea fieldset elements as we can not put tabindex for all element in page?

Even if you have no access to the template, you can still add the tabindex attribute programmatically.
Here you have a snippet:
var tabindex = 1;
$('#myWorkArea .fieldrow').each( function() {
$('a', this).attr('tabindex', tabindex++);
$('input', this).attr('tabindex', tabindex++);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="myWorkArea">
<div class="fieldrow">
<label for="input1">Class</label>
<input id="input1"/>
<a id="help1" href="#">what's this?</a>
</div>
<div class="fieldrow">
<label for="input2">Class</label>
<input id="input2"/>
<a id="help2" href="#">what's this?</a>
</div>
</fieldset>
Hope it helps!

You can add the tab index programmatically using javascript as David mentioned in his answer.
Or If you want you can control the taborder functionality by binding your own event to only these elements like below code.
Working FIDDLE
$(function(){
var inputs = $('a#help1, a#help2,input#input1, input#input2');
$(inputs).bind('keydown', function (e) {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
//check keycode for tabbing
if (e.keyCode == 9) {
switch($(this).attr("id")){
case "help1":
next=$('#input1');
break;
case "help2":
next=$('#input2');
break;
case "input1":
next=$('#help2');
break;
case "input2":
next=$('#help1');
break;
}
next.focus();
e.preventDefault();
return false;
}
});
});

How to change div contents with javascript

This seems simple but I don't know what I'm doing really. I have 2 radio buttons and depending on which one is selected the contents of a div will change. Right now I have 2 divs inside a parent div but it would just hide one div and show the other. This wouldn't be bad if they didn't take up space even when they're invisible.
HTML:
<div>
<form role="form">
<div>
<div class="radio" id="radioSelection" onchange="chooseDiv()">
<label>
<input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1
</label>
<label>
<input type="radio" name="optradio" id="selectionDiv2" />Choose Div2
</label>
</div>
</div>
</form>
</div>
<div id="parentDiv">
<div id="div1">You're Awesome!</div>
<div id="div2">Everybody loves you!</div>
</div>
JavaScript:
function chooseDiv() {
if (document.getElementById("selectionDiv1").checked) {
document.getElementById("div2").style.visibility = "hidden";
document.getElementById("div1").style.visibility = "visible";
} else {
document.getElementById("div2").style.visibility = "visible";
document.getElementById("div1").style.visibility = "hidden";
}
}
So I'd like to have it so only one div is visible at a time depending on which radio button is checked, and don't have them take up space when they're not in the div. Thanks!

If you want those divs to stop taking space, you have to use display:none instead of visibility:hidden, change your function to
function chooseDiv() {
if (document.getElementById("selectionDiv1").checked) {
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block";
} else {
document.getElementById("div2").style.display = "block";
document.getElementById("div1").style.display = "none";
}
}
Working plnkr: http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview

visibility property will always use the space whenever it is hidden.
Better approach would be to use display property.
Something like this:
document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible

You are using visibility: hidden to hide the divs, which hides them but let them take space in the browser, try instead the display property, instead of using hidden use none, and instead of using visible use block.

You have to understand first the difference between the display and visibility properties.
display - none - when you do display none that means whole element from DOM will hide with its physical existence in DOM.So, there will be no space allocation for that element in DOM.
Visibility - hidden - In this case , you are hiding only that element but physically that element is present in that space.So, space will be allocate that element.
for more details please follow this

Using just one div and change content
DEMO
HTML
<body onload='chooseDiv();'>
<div>
<form role="form">
<div>
<div class="radio" id="radioSelection" onchange="chooseDiv()">
<label>
<input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1
</label>
<label>
<input type="radio" name="optradio" id="selectionDiv2" />Choose Div2
</label>
</div>
</div>
</form>
</div>
<div id="parentDiv">
<div id="div1"></div>
</div>
<div style='display:none'>
<div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=hiFacebook'/></div>
<div id='c2'><span>TEST 2</span><img src='http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div>
</div>
</body>
JS
function chooseDiv() {
var div = document.getElementById("div1");
var msg = document.getElementById("c1").innerHTML;
if (!document.getElementById("selectionDiv1").checked) {
msg = document.getElementById("c2").innerHTML;
}
div.innerHTML = msg;
}

Disable all input elements in a div, and enable them one-by-one

This is my HTML code. I am using Jasny bootstrap for image upload, and Bootstrap-Switch do get the iOS style switch box.
By default, I want to:
Disable every element in Div #one except the very first switch box. (It is in the indeterminate state to start with)
When the user flicks that first element to either on or off, the next input field becomes enabled.
And so on.
Basically, I want the user to have to fill out the form in order.
Not all of the fields are check boxes. As you can see from this example, there is an image upload form which I want to work in the same way - disabled until the field before it has been completed, and then enabled. And once the image has been uploaded, then enable the next input field, and so on.
Is there any jQuery magic I can use to easily do this?
<div id="one">
<!-- Bootstrap switch box -->
<div class="s-part-question">
<label>X</label>
<div>
<input name="X1" type="checkbox" class="s-switch-indeterminate s-t-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
<!-- Bootstrap switch box -->
<div class="s-part-question">
<label>Y</label>
<div>
<input name="Y1" type="checkbox" class="s-switch-indeterminate s-t-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
<!-- Image upload -->
<div class="fileinput fileinput-new s-part-photo" data-provides="fileinput">
<div class="s-part-photo-explain">Add image</div>
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileinput-new">New</span>
<span class="fileinput-exists">Change</span>
<input class="s-t-input" type="file" name="imageY1">
</span>
Remove
</div>
</div>
<!-- Bootstrap switch box -->
<div class="s-part-question">
<label>Z1</label>
<div>
<input name="Z1" type="checkbox" class="s-switch-indeterminate s-t-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
</div>
$(".s-switch-indeterminate").bootstrapSwitch({
'state': null
});

I did something similar, but the way I did it was to dynamically include the HTML after every section. So I would start in the HTML with:
<div id="one">
<div id="first">
<!-- Bootstrap switch box -->
<div class="s-part-question">
<label>X</label>
<div>
<input name="X1" type="checkbox" class="s-switch-indeterminate s-t-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
</div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
etc.
where I've added a div section for each checkbox with its own unique ID (first, second, third etc).
Then when the checkbox has changed, you can check it with jQuery and insert the next sections HTML with Javascript.
$("input[name='X1']").change(function() {
document.getElementById("second").innerHTML = '<div class="s-part-question"><label>Y</label><div><input name="Y1" type="checkbox" class="s-switch-indeterminate s-t-input" data-indeterminate="true" data-on-text="Yes" data-off-text="No" /></div></div>'
}
Then have one of these for each checkbox. Also note for the dynamically generated checkbox, you will have to have to make a change to the jQuery selector to so:
$('#one').on("input[name='Y1']", "change", function() {

If I understand you correctly, you want the following:
(1) Every DIV element is disabled, except the first one.
(2) When the user checks the checkbox in the first DIV on or off (to checked or not checked), then the second checkbox becomes enabled. This second checkbox stays enabled even when the user change the first checkbox back to what it was.
(3) Then when the second checkbox is checked (or unchecked if already checked), the next input becomes enabled.
(4) And so on...
If so, the next codes should help:
$(document).ready(function(){
var nodeList = document.querySelectorAll("div#one > div");//Selects all DIRECT child elements specified by “child” of elements specified by “parent”. In this case it takes the parent DIV of the switch boxes and all its children (and inner html) "only one level down".
//http://api.jquery.com/category/selectors/
var amountInputs = new Array();
for(i=0;i<nodeList.length;i++){
//In each Bootstrap switch box
var inputFields = nodeList[i].querySelectorAll("input");
amountInputs[i] = inputFields.length;
if( i==0 ){
putOnSurveillance(inputFields);
} else{
for(j=0;j<amountInputs[i];j++){
$( inputFields[j] ).attr('disabled','disabled');
}
}
}
jObjects['amountInputs'] = amountInputs;
});
var jObjects = { /* JavaScipt Objects */
current_SwitchBox: 0,//Current switch box index number
surveillancePassed: 0
};
function enableNextSwitchBox(){
var nodeList = document.querySelectorAll("div#one > div");
if( jObjects['current_SwitchBox']!=nodeList.length ){
var inputFields = nodeList[jObjects['current_SwitchBox']].querySelectorAll("input");
for(l=0;l<inputFields.length;l++)
$( inputFields[l] ).prop("disabled", false);
putOnSurveillance(inputFields);
} else{
//No more Switch Boxes to enable!!!
}
}
function putOnSurveillance(inputs){
for(k=0;k<inputs.length;k++){
$( inputs[k] ).change( {targetInput: inputs[k]}, function(object) {
$( object.data.targetInput ).unbind('change');//You are not under "surveillance" anymore...
if( jObjects['amountInputs'][jObjects['current_SwitchBox']]==(++jObjects['surveillancePassed']) ){
++jObjects['current_SwitchBox'];
jObjects['surveillancePassed'] = 0;
enableNextSwitchBox();
}
});
}
}
Explanation:
1)Variable " nodeList " is the DIV which contains all the Bootstrap switch boxes
2)Variable " nodeList[] " -> in each nodeList[i] (i-> 0,1,2,3....) contains a Bootstrap switch box
3)Next: at each nodeList[i], we will searches for any input tags (or elements). If there is more than one input fields in that switch box, it will automatically detect them.
4)Disable all input fields, but the input fields in the "FIRST" Bootstrap switch box.
!This only works with "input" tags!
5)An amount of <input> per Bootstrap switch box will be saved as JavaScript Object for use later
6)The <input>'s of the first Switch Box (which are not disabled), are put on "surveillance". If its value is changed, that same input won't be on "surveillance" anymore, and then by using a javascript object (variable), it will check if all other <input>'s in that same Switch Box has already changed before.
If so, then all <input>'s on the next Bootstrap Switch Box becomes enabled.
7)The <input>'s on the next switch box are enabled and so on....
Bonus: This code should work with any type of input + any amount of input you have in that particular Bootstrap switch box + any amount of Bootstrap switch boxes you have!!!

Smooth Transition on fieldset using radio button selection

I have searched all over the web, but I can't seem to find a solution that suits my needs. I'm fairly new to jquery/javascript, but I think what I'm trying to do is pretty simple.
I have 2 radio buttons that the user can select, based on the selection, additional input fields (contained in a fieldset) are displayed. This works fine, but I would like to "pretty it up" by making it appear with a smooth transition.
Currently, this is what I'm doing
HTML:
<label for='student_type'>Freshman or Transfer Student</label><br />
<input type="radio" name="student_type" value="freshman" onclick="show_hs();">Freshman
<input type="radio" name="student_type" value="transfer" onclick="show_college();">Transfer Student<br />
<fieldset id="hs_fields" style="display: none;">
<!--MY INPUTS-->
</fieldset>
<fieldset id="college_fields" style="display: none;">
<!--MY INPUTS-->
</fieldset>
JavaScript:
<script>
function show_hs()
{
document.getElementById('hs_fields').style.display = 'block';
hide_college();
}
function hide_hs()
{
document.getElementById('hs_fields').style.display = 'none';
}
function show_college()
{
document.getElementById('college_fields').style.display = 'block';
hide_hs();
}
function hide_college()
{
document.getElementById('college_fields').style.display = 'none';
}
</script>
I will be very happy to elaborate on anything that isn't clear.
Your time is much appreciated, Thanks!

Perhaps you're looking for something like jQuery UI's effects?
http://jqueryui.com/show/
Example:
$("#hs_fields").show("blind", {}, 500);