My HTML-
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?</input>
Then when I run this jQuery $('#skipOnClick').fadeOut();, only the checkbox fades and not the text with it. Is there a way that both the checkbox and text can fade or am I going to have to use another HTML element to put the text in and fade both the checkbox and element?
The input element cannot have a text within it, so you need to wrap the text and input in another element like a label then hide it like
<label for="skipOnClick" id="lblSkipOnClick">
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?
</label>
then
$('#lblSkipOnClick').fadeOut();
I experimented a bit before I posted the question and found that by placing all the HTML inside of a div tag then using $('#skipHolder').fadeOut(); fixed the problem.
The HTML-
<div id="skipHolder">
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?</input>
</div>
You cannot have a text content inside the checkpox <input>tag. Rather, put a label for it and then fade both of them:
HTML
<input id="skipOnClick" type="checkbox"></input>
<label for="skipOnClick">- Skip song when notification is clicked?</label>
Javascript
$('#skipOnClick').fadeOut();
$('#skipOnClick').next("label").fadeOut();
just put your checkbox inside li
HTML
<input id="skipOnClick" type="checkbox"/><span>- Skip song when notification is clicked?</span>
JQUERY
$('#skipOnClick').change(function(){
$('#skipOnClick').fadeOut();
$('#skipOnClick').next('span').fadeOut();
});
DEMO
Related
I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>
I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/
I'm dealing with this case where I have a label tag wraps around the radio input button, something like:
<label>
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
The label tag is the one that gets formatted for view while the radio button is hidden. When ng-model == value, a certain radio button gets checked automatically and this is happening in my app, no problem at all.
The problem is, I want to format the label tag when this happens. Normally the label is formatted by an onclick event, but this is not an event so I'm not sure how I would solve this in JavaScript. CSS styling is not an option because it can't select parent element.
use ng-class
<label ng-class="{'class-name':question.value==option.value">
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
in CSS
.class-name{
color:green;
}
code: http://jsfiddle.net/HB8h9/7/
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a true or false question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
//different file below used as main page
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});
trying to create a quiz using div elements from different file containing select option tags. Need to create a function which will load all the "appropriate div tags" according to the selected option and display the dropdown options again after each option has been selected. I'm not sure when to implement submit button either after each question type is loaded or somewhere between 5 - 10 questions. the submit button will "store" the questions selected into a quiz which will later be used for another user to answer.
I hope this makes sense, I'm not too familiar with jquery and any help would be highly appreciated.
Any other techniques which would be better suited are also welcomed.
thanks.
You must set an id to select element and hadle onChange event over this.
Somehting like:
$(document).ready(function(){
$('#selectionId').onChange(function(){
/*load new options into select element*/
$(this).append('option data-tab="tab-6">New option text</option>');
/*displaying desired div. Using HTML5 data attributes as in the fiddle*/
var selected=$(this).attr('data-tab');
if (selected==='tab-1'){
/*load or display tab-1 class div*/
}else...
});
});
You can have various html files with only the corresponding tab to load or in the same file you are defined the select element you can have the tab class divs with visibility attribute set to 'none' and show the targeted div after user selects an option.
Personally, I preferred the last one option.
I hope this fixes your problem
http://jsfiddle.net/r9sv8/
Use the .change() to listen to the options selected and display the div respect to it.
$('.tabs').change(function(){
$('.tabQues').hide('500'); // Hides all the divs
var changeVal = $(this).val(); //Takes the value of the <option>
if(changeVal=="selectOne"){
$('.'+changeVal).show('500'); //show the div you want
}else if(changeVal=="multiple"){
$('.'+changeVal).show('500');
}else if(changeVal=="trueFalse"){
$('.'+changeVal).show('500');
}else if(changeVal=="short"){
$('.'+changeVal).show('500');
}else if(changeVal=="program"){
$('.'+changeVal).show('500');
}else{
$('.tabQues').hide();
}
I am trying to the select the next closest div to the input tag changed. When I run this nothing happens. I have tried the closest tag and the next tag.
$("input[id='declined']").change(function(){
$(this).next('div.textarea_container').fadeIn();
});
Html:
<div id="gcheckbox">
<input type="radio" id="name10" class="guidelines" name="Confirmed diagnosis of melanoma" value="Accepted">
<input type="radio" class="guidelines no_margin" name="Confirmed diagnosis of melanoma" id="declined" value="Declined">
<label>Confirmed diagnosis of melanoma</label>
<div class="textarea_container">
<textarea placeholder="reason" id="notearea0"></textarea>
</div>
</div>
I have now made a sample file.
http://jsfiddle.net/dMmuW/
jQuery's next function only works for the adjacent sibling element, use nextAll to get all sibling elements after the selected one and filter to the one you want.
$('#declined').change(function () {
$(this).nextAll('div.textarea_container').fadeIn();
});
I have one asp:Textbox and one asp:label control in my aspx page. I want to set focus for label when clicking the button using javascript. Can anyone tell me how to do this?
Many thanks...
You need to access the element via an id or a class an call focus():
document.getElementById('myTextBox').focus();
As Pointy pointed out: When you mean by clicking on a label to select the textbox, you just need to set the for attribute on the label to the ID of the textbox.
<label for="myTextBox">Label Text</label>
The for attribute does it for you out of the box
<label for="{the id you want}"> </label>
MDN
Because it's asp.net application you need to use the ClientID:
<label for='<%= myTextBox.ClientID %>'> </label>
use `.focus()` it will do the focus part