I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.
The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.
The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.
My HTML:
<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">
My jQuery:
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body:not(.text-hidden)").click(function(){
//alert('The body click is working!!!');
$('.form-text.text-hidden').removeClass('hover');
});
Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.
I've got a fiddle here
Try
jQuery(function(){
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body").click(function(e){
//alert('The body click is working!!!');
if($(e.target).closest('.text-hidden').length == 0)
$('.form-text.text-hidden').removeClass('hover');
});
})
Demo: Fiddle
The problem is that when you click the input, the body's click event still arises.
There's a simple solution. Just stop the event's propagation when the input's being clicked.
jsFiddle Demo
$(".form-text.text-hidden").click(function(e) {
e.stopPropagation();
});
P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.
Related
I'm not sure if this is a clicking issue, or specific to the jQuery fade functions.
I have the HTML structure like this: label > input(hidden) + div + label text
Example:
<label data-name="primary-residence" data-value="Yes">
<input type="hidden" id="primary-residence" name="Primary Residence" value="" />
<div class="big-check-box"></div>
Primary Residence
</label>
And the jQuery is as follows:
$('label').on('click', function(){
var name = $(this).data('name');
var value = $(this).data('value');
if($(this).find('.big-check-box').hasClass('checked')){
$(this).find('.big-check-box').removeClass('checked');
$('#'+name).val('');
$('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
}else{
$('#'+name).val(value);
$(this).find('.big-check-box').addClass('checked');
$('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
}
});
I have a big-box that acts as a checkbox and has data attributes that then populate a hidden field to be collected on form submission. It also applies a class to the checkbox and fades in two new input fields.
Everything works fine in Chrome and FF, but in IE, the class doesn't get applied to the box and the new input fields fade in, then immediately fade out once the fade in animation is complete. Unless they are clicked twice, then it seems to work, but that isn't very intuitive or user friendly.
Here's a fiddle to a working example: jsFiddle
Anyone know why this is happening?
I figured it out.
For some reason I needed to add preventDefault() for the IE fix. Not exactly why it works, but here's reference: <label> - HTML | MDN
Here's the updated lines:
$('label').on('click', function(e){
e.preventDefault();
.....
});
Hope this can help someone else in the future.
I have a simple problem:
I have a form:
<form>
<textarea type="text" name="comment_text" class="comment-input"></textarea>
<div class="remaining"></div>
<input type="submit" class="button comment-button" />
</form>
Now when the textarea (.comment-text) is focused I want the submit button (.comment-button) to be displayed using jQuery.
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$('.comment-button').fadeIn(800);
});
});
This works fine. The problem is that I have the form in a foreach loop and when I focus one textarea all the buttons get selected. So I was trying to do it with the 'this' keyword something like this:
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).find('.comment-button').fadeIn(800);
});
});
But that did not work. After trying things out for way too long now, I just decided that I do not speak sufficient jQuery to master this simple task and turned to somebody in the know for help!
Thank you in advance!
That is because the button is a sibling element of the textarea
$(this).siblings('.comment-button').fadeIn(800);
find will try to find a child element in the textarea so it will never find your button:
you can use siblings
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).siblings('.comment-button').fadeIn(800);
});
});
Sibling is the solution for this problem , but no more will works if you wrap the submit button in any wrapper(div or span) .
This will work safer -
$(this).closest("form").find('.comment-button').fadeIn(800);
There are others ways to get the correct element other than these 3 answers,
$(this).parent().find('.comment-button').fadeIn(800);
or
$(this).next().next().fadeIn(800);
or
$(this).nextUntil('.comment-button').next().fadeIn(800);
It would be nice to be able to fade or hide a form's input label when a user hovers over the label. In my particular case, I've 'absolutely' positioned the labels on top of the input box, so when a user mouses over the label OR clicks into the input box, I would like the label to disappear (so their type isn't showing beneath the label text).
I was able to use CSS to hide the label on click of the text input, but have not found a way to make the label 'display:none' when hovered (or mouse overed) or something similar.
Here's what I had in mind for the jQuery, but have not been able to get the hover to work:
<script>
$('#userNameLabel').on('hover', function() {
$(this).css('display','none');
});
</script>
HTML:
<input type="text" id="userName" name="userName" onclick="$('#userNameLabel').css('display','none');"></input>
<label id="userNameLabel" for="userName">Username</label>
Edit: Adjusted markup to be valid, but issue remains.
Use .mouseenter. It works just fine. DEMO
$('#userNameLabel').mouseenter(function() {
$(this).css('display','none');
});
Or if you want to use .on. DEMO
$('#userNameLabel').on('mouseenter', function() {
$(this).css('display','none');
});
Here's how the .hover() function works:
$('#userNameLabel, #userName').hover(
function() { $('#userNameLabel').hide(); },
function() { $('#userNameLabel').show(); }
);
Use this for IE10+, Chrome, FF:
<input type="text" name="fname" placeholder="First name">
I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:
$(document).ready(function() {
$('#button').click(function() {
var toAdd=$('input[name=checkListItem]').val();
$('#item').append.('.list');
});
$(document).on('click','item',function() {
$(this).remove();
});
});
Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!
I forked your fiddle, with corrected code: http://jsfiddle.net/XEDHJ/2/
Here's where you were having trouble:
$('.list').on('click','input',function() {
$(this).parent().remove();
});
Using on was the right idea, it's perfect for this situation. The way you use on is that you have a parent node, in this case a div with a class of list, and a number of matched child nodes, in this case any element that is an input underneath your parent node. Child nodes are denoted by the selector in the second argument. This will match any input node under your div even if they are created after the page is rendered.
Because I wrapped your input in a <div> tag, we actually want to remove that parent <div>. So we call $(this).parent().remove().
I left my original example below but this should be sufficient to get you going.
It looks like something like this is what you're looking for:
Fiddle
http://jsfiddle.net/Khesy/
JavaScript
$(document).ready(function() {
$('#button').click(function() {
$('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
});
$('#item').on('click','input',function() {
$(this).parent().remove();
});
});
HTML
<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>
I am in the middle of this site here http://offline.raileisure.com/
the booking section on the right hand side, I need to be able to disable the book now button until the date,duration and adult and children numbers are set..
I can't work out how to do it..
Any ideas ??
Thanks
Lee
You can bind to the change handler on all your form elements... for example:
$(':input').change(function() {
var complete;
// check if your form is complete here
// assumes the id of the button is 'bookNowButton'
if (!complete) $('#bookNowButton').attr('disabled', true);
else $('#bookNowButton').removeAttr('disabled');
});
To simplify the enable/disable functionality I'd also perhaps suggest changing your "Book Now" button to an <input type="image" /> instead.