I want to trigger a function if either the currently active element $(this) or another predefined element (e.g.: div#tooltip) blurs. However so far I've not found out how to do this. I've tried:
$(this).add('div#tooltip').live('blur', function(){
$('div#tooltip').hide();
});
Imagine that $(this) would be an input field, for example, and the predefined second element would be a tooltip div and that I would want the tooltip to hide if one of those blurs.
EDIT:
The div#tooltip contains an anchor, which should not make the div#tooltip hide if it's being clicked.
EDIT 2:
Okay, here is a more accurate explanation of my problem. I've got the $.fn.tooltip function which I apply to various text-inputs which have variable class names and id's. Therefore, this input can only be referred to as $(this) within the function.
Secondly I have the tooltip div, which is created by the function. This div goes by the ID #tooltip. This tooltip / div can contain some other elements such as anchors.
The tooltip is shown automatically when the input-field (this) is clicked. Once it's closed it won't be shown again, even if the input-field will be focused again.
What I'm trying to do is:
The tooltip must be removed when the text-input loses it's focus
EXCEPT if the cursor is within the tooltip / div or if an element within this div is being clicked.
Anyone?
Like this: http://jsfiddle.net/uu3zX/7/
HTML:
<input type="text" class="with-tooltip">
<span class="tooltip">?<a style="display:none" href="#">The tip</a></span>
JavaScript:
$('.with-tooltip').on('focus', function(){
$(this).next().children().show();
});
$('.with-tooltip').on('blur', function(){
$(this).next().children().hide();
});
$('.tooltip').hover(
function(){
$(this).children().show();
},
function(){
$(this).children().hide();
}
);
UPDATE
Added alternative solution to fit OP requriment to use this
Borrowing from IntoTheVoid's fiddle: You should wrap the input and the tooltip in a container div (or some other container element) to do this in one line:
$('.tooltip, input').on('mouseout', function(){
$(this).parent().children('.tooltip').hide();
}).on('focus mouseover', function(){
$(this).parent().children('.tooltip').show();
});
http://jsfiddle.net/mblase75/uu3zX/5/
Related
Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.
I have the following:
<div class="tab-pane" id="message">
<textarea rows="4" cols="50" id="send_message" placeholder="Enter text ..."> </textarea>
OK
Cancel
I want to bind the click method to the 'div' element , and when one of the child 'a' elements is clicked do separate things. I am trying to distinguish between them using the button text, but the following is not working:
$(function(){
$('#message').click(function(){
if($(this + ">a").is(":contains(OK)")) {
console.log("OK!!");
How can I fix this?
Okay there are two ways of doing this:
.find(selector)
if(this).find("a").is(":contains(OK)")) {
console.log("OK!!");
OR
$(selector,context)
if("a",this).is(":contains(OK)")) {
console.log("OK!!");
In javascript, this is essentially the context of the current function. In jQuery event callbacks, this is set to be the source element of the event - not the selector string, which is what you are treating it as.
Instead, you want to do a test like: if($("a", this).is(":contains(OK)")) {
This works because the second parameter to the jQuery selector is the context to search in, so you are only searching for the a tags under the source element of the click.
Binding the click element to the Div, then checking the text string of the A tags will make both events happen on every click. You want to bind 2 separate click events on each A tag. Add an ID to each A tag, then try this code
$('#okLinkID').click(function(){
console.log("OK!!");
});
$('#cancelLinkID').click(function(){
console.log("Cancel!!");
});
//Attaches only one listener to the #message div and listens for any 'a' element within it to be clicked.
$('a','#message').on('click',function(){
var $this = $(this),
btnText = $this.text();
console.log(btnText);
});
http://jsfiddle.net/YA7Ds/
I have three columns within my webpage. On each column there are a group of three squares, the square represent a unique colour. So when the user clicks on red in column 1 the text within column 1 goes red, if blue it will go blue. If the user clicks on green within column 2 the text within column 2 will go green.
I am new to jQuery so I am not sure if I have done this right and would like to know if this is the best way of doing it.
What I want to know is there anyway of changing this so there is only one style called picker for all in each column. Also can I change the jQuery so it's not 3 seperate functions, is there a more cleaner way of doing this?
Thanks.
Yes! CSS selectors are all reusable! you shouldn't created multiple class' with the exact same attributes and values!
all the css classes you need .col, .wrapper, .picker
and then working with jQuery instead of using a div id when you want to use the code in mulitple places, work out where the element is relative to the element that fired the event or $(this)
check out the fiddle
http://jsfiddle.net/WJ5DZ/1/
You may try this way:
$(function () {
$('.picker').css('background-color', function () { //Setup the background color for each picker square.
return $(this).data('color'); //get its color from data attribute
}).click(function () { //Chain it through for the click event
$(this).closest('.content').css({ //get the parent content element where color needs to be applied
color: $(this).data('color') //set the color as that of the clicked picker.
});
});
});
Demo
In the markup provide a class called say content to identify its own parent content.
<div class='col2 content' id="test1"> <!-- You don't need id if you are using this for selcting.
Remove all the picker1, 2 css rules and have just the picker.
Using closest will ensure that even if you plan to add a wrapper to your picker still your actuall content div will be selected.
.closest()
.css(prop,func)
yes there is.. change all you class(picker1,picker2) to picker and remove the id (test,test1..)
try this
$('.picker').each(function(){
var myColor = $(this).data('color');
$(this).css({background: myColor })
});
$('.picker').click(function(){
var myColor = $(this).data('color');
$(this).parent().css({color: myColor});
});
NOTE: you don't need click event inside each loop
fiddle here
When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?
This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.
I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.
I'm trying to change the alt of the image, I'm clicking by
selecting the image's class (add_answer)
Note: .add_answer shows up multiple times inside different containing div's
jQuery(function(){ // Add Answer
jQuery(".add_answer").click(function(){
var count = $(this).attr("alt");
count++;
$('.a_type_'+count+'').show();
$(this).parents("div:first").$('.add_answer').attr("alt", count);
});
});
This line doesn't seem to be working, how do I select this add_answer class by way of it's parent div
$(this).parents("div:first").$('.add_answer').attr("alt", count);
Anyone else have an idea?
I'm trying having trouble decreasing the alt value on the .add_answer image when .destroy_answer is clicked
jQuery(function(){ // Hide Answer
jQuery(".destroy_answer").click(function(){
$(this).parents("div:first").hide();
var count = $('.add_answer').attr("alt");
count--;
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
});
});
Problem line:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
you can use the parent div as the scope:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
This should work:
$(this).parent("div").find(".add_answer").attr("alt", count);
You code is almost correct. Required change is to use .find instead of .$ after .parents method. Use of .parent instead of .parents should be avoided, this way your code will be more unobtrusive (precisely - this way img can be non-direct child of the div).
$(this).parents('div:eq(0)').find('.add_answer')
You can manipulate :eq(0) to select eg third parent div using :eq(2).