I have a user search bar that creates a div containing the relevant users and it disappears when you focus out. However I don't want to focus out if I click on the user list div. Is this possible to achieve?
application.js:
$(function() {
$("#user_header_search_form input").focusout(function() {
$('#header_user_list').html('');
});
});
$('#header_user_list').html(''); I don't want to run this link if the user clicks '#header_user_list'
An alternativa approach may be:
$(document).click(function(event){
var clicked = $(event.target);
//if the clicked element is not son of the input or the list, clear the list.
if(clicked.closest("#user_header_search_form input,#header_user_list").size() == 0)
$('#header_user_list').html('');
});
Another option is setting a delay before clearing the list. This will work if the user must pick only one item from the list:
$("#user_header_search_form input").focusout(function() {
setTimeout(function(){
$('#header_user_list').html('');
},50);
});
Hope it helps!
Related
For this question there are some other related questions which explains the possibility of the re enabling of input field or button using disabled attribute.
But my requirement is for re-enablebing the div click functionality after some action. Currently I'm using .off() for disabling the click function of a div after first click.
But I'm not able to re-enable it back.
Code where div is disabled
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var accessBtn = $('#skitt-listening-box');
$("#skitt-listening-box").click(function(){
$(this).off('click'); // code to disble div from click
//some functionality
});
});
Code where div is enabled:
if(IsEmail($(".voice_email").val())) {
//some functionality
//Should re-enable the div to click here
});
If I were you i try adding css classes to describe state.
In your way:
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var $accessBtn = $('#skitt-listening-box');
$accessBtn.click(function(){
if($(this).hasClass('click-available'){
//do action
$(this).removeClass('click-available');
}
});
});
And to enable click:
if(IsEmail($(".voice_email").val())) {
$accessBtn.addClass('click-available');
});
You can use this code:
function addClickFunctionality() {
$("#skitt-listening-box").on('click', function(){
$(this).off('click'); // code to disable div from click
// some functionality
});
}
$(document).ready(function() {
// Will ask for city through voice when user click on the instruction box.
addClickFunctionality();
});
// re-enable click handle in some action
if(IsEmail($(".voice_email").val())) {
// some functionality
addClickFunctionality();
});
I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button
Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;
I am working on an application using html and jquery. It has 4 buttons that are used to perform various tasks when i click them. what i want now is to show user the state of the button when mouse hover over it. For example for an ON/OFF button if mouse hover over the button it shows user that button is currently OFF or ON.
one way to do this is to use an alert() but with that each time i go to button it will show an alert which i dont want i just want a simple text etc to be displayed on top of the button when mouse hover over it.
anyone can help me how can i do it ?
Change the text of the button on button hover by using jQuery .hover():
$('button').hover(function(){
$(this).text('ON');
},function(){
$(this).text('OFF');
});
Demo Fiddle
Presuming you already know how to get the state of the button, let's assume you assign that state to a variable named... well, state. :)
Then it's pretty straightforward from there:
$("button").hover(function() { // You may choose a different selector for your buttons
var curButton = this,
$curButton = $(this);
curButton.oldHTML = $curButton.html(); // Cache old button label
$curButton.html(state); // Change button label to reflect state
}, function() {
var curButton = this,
$curButton = $(this);
$curButton.html(curButton.oldHTML); // Restore old HTML
});
I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.
There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});
I am trying to add some content into a textarea after the user has clicked on the "Add" button but nothing is happening. Is there anything I am missing?
Below is the jquery code which adds the selected content:
$(".add").on("click", function(event) {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
});
$(".plusrow").on("click", function(event) {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
Below is the textarea:
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
});
EDIT:
You can use the application to see for yourself. Below is how to use app:
When you open the app click on the "Green Plus" button. A modal window will appear.
In the search box enter in "AAA", then click "Search".
Results of your search is displayed. Here is where the problem is. What I want is that when the user clicks on an "Add" button to add a "Question", it should close the modal window and add the "Question" into the top textarea, but it is not doing this.
Textareas unlike inputs don't use the value attribute to store there data, which is probably why attr('value', 'bla') is failing.
I believe the .val() method will automatically take this in to account and thus work anyway.
Try somthing like:
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]").val($this.val());