I have this piece of code:
(...)
if (data.hasSentMessages === true){
$("#sentMessages")
.parent()
.removeClass("ui-state-disabled");
} else {
$("#sentMessages")
.parent()
.addClass("ui-state-disabled");
}
And then, if element has disabled class, I want to show why is element disabled in jQuery-UI Tooltip. But unfortunately it shows after second mouseover event.
When I read this: Tooltip not showing on first mouseover I create something like this:
$("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))});
if($("#sentMessages").data("tooltip") === false){
$("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))}).triggerHandler("mouseover");
}
This condition, if widget is not initialized, should manually triggered mouseover event but unfortunately still it isn't working.
I will be very happy if somebody wants to help me - thank you in advance.
There is a simplified Fiddle: jsFiddle that shows a problem, there you can see that second tooltip is good but first is like ,,standard" browser tooltip.
In your fiddle, the initialisation of the tooltip happens within the mouseover callback function. This will mean that the tooltip is not created until after the first mouseover event.
Secondarily the mouseover event is built into the way that the jQueryUI tooltip functions. As such, you can remove the mouseover code.
Thirdly, you had mentioned that the tooltip should only display when the parent element has the class ui-state-disabled.
See the result on JSFiddle.
// construct a tooltip for each sentMessages then listen for the
// tooltipopen event an evaluate if it should show the tooltip
// or not
$("#sentMessages").tooltip().on('tooltipopen', function(){
if ($(this).parent().hasClass('ui-state-disabled')){
$(this).tooltip("enable");
} else {
$(this).tooltip("disabled");
}
});
// comment out this line to replicate a non error state
$("#sentMessages").parent().addClass("ui-state-disabled");
I hope this helps.
based on your example fiddle: add e.stopImmediatePropagation() to the mouseover event, see updated fiddle:
Related
I'm developing a calendar using Fullcalendar (docs)
When an empty time slot is selected i want to show a context menu, like this:
(don't mind the styling)
select: function(start, end, jsEvent){
$("#calendarContextMenu").css({
display: "block",
left: jsEvent.pageX + 4,
top: jsEvent.pageY - 16
});
}
And hide it when anything else is clicked:
$(document).click(function(){
$("#calendarContextMenu").hide();
});
jsFiddle
This works well, but when an allday time slot is selected the context menu doesn't show up. I noticed this happens because $(document).click() is fired directly after fullcalendar's select callback. What can i do to fix it? It seems like there's some sort of event bubbling going on. Ofcourse, alternate solutions are always welcome.
Note: There is a div .fc-content-skeleton which is causing the problem i think.
I updated your codes and added the eventClick listener. Kindly check here: http://jsfiddle.net/e6v3mkjo/4/
Update 1:
Changed eventClick to dayClick
http://jsfiddle.net/e6v3mkjo/5/
Kindly check their docs as well: http://fullcalendar.io/docs/
Update 2:
Haha, I realized I didn't understand the question well. The solution to your real problem is just simple: remove the document click handler and then add the unselect handler.
unselect: function() {
$("#calendarContextMenu").hide();
}
Try:
$(document).click(function(){
console.log('hide');
$("#calendarContextMenu").show();
});
Creating an accordion style menu. On click the accordion div opens and animates great. That all works just fine. However after expanded the hidden div I want the title div to shrink slightly and then as the accordion div is collapsed have it revert to the original size.
I have a JSFiddle setup. Essentially need to correct the second click to revert the div height back to original. The first click is functioning correctly and adding the class and animating the height change. However the second click isn't recognized.
What simple thing am I overlooking?
$(function() {
$(".click").on('click', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(".click.expanded").on('click', function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});
The issue is that your click item doesn't have the expanded class at start, so your binding isn't working.
You should being doing something like:
$(document).on('click','.click.expanded',function(){//event work});
To address the comments, yes you need to handle the original event, you can do this using the .not selector so that the first event doesn't fire.
$(document).on('click','.click:not(.expanded)', function()
In the end, your code could look something like this:
$(function() {
$(document).on('click','.click:not(.expanded)', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(document).on('click',".click.expanded", function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});
Obligatory Fiddle
This question Event binding on dynamically created elements?, even though about dynamic elements, addresses your problem.
As #JasonWilczak has stated the problem you have is that you don't have any elements on load which will have the expanded class, and therefore they won't be assigned this click event handler.
However you will still have a problem if you use event delegation as the original click event handler will still be fired also.
A cleaner solution would be to only have one click event handler, and detect the expanded class within the callback.
Dependant on the expanded class being present run different logic conditionally.
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
}
else {
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
}
});
I've updated your jsFiddle to demonstrate this:
http://jsfiddle.net/ecLxkgj9/4/
Here is the updated fiddle
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
}
else {
$(".animate").animate({height: '100px',},"slow");
}
$(this).toggleClass("expanded");
});
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.
I'm having a problem with an image viewer I'm creating. Like the image below, the 'window' is where the image is shown and 'paging' is where the user can change the image. I've used this Jquery script to make the 'paging' fade in whenever the window is hovered over - It's hidden to start with. Although when the user hovers onto 'paging', it flickers. (Like shows then hides, etc.)
I suppose it's because the mouse isn't hovering over the 'window' anymore. Can anyone suggest how I can make 'paging' remain showing? Thanks for the help! :)
$(".window").hover(function() {
$(".paging").fadeIn('fast');
}, function() {
$(".paging").fadeOut('fast');
});
You can use .stop() here and include both in your .hover() selector, like this:
$(".window, .paging").hover(function() {
$(".paging").stop(true, true).fadeIn('fast');
}, function() {
$(".paging").stop(true, true).fadeOut('fast');
});
This way, when you leave to enter the child or back to the parent it stops the fade out and brings it right back, resulting in no visible action to the user.
You could try using mouseover and mouseout instead. I'm not sure that mouseout would react the same way hover does.
In fact, when you pass your mouse over the paging there is a magical thing that happens which is called "event bubbling": the "hover" event is passed to the container which is the parent of the "hovered" object, and so on until the "document" object.
So to solve your problem, you need to stop bubling, you can do it with "return false":
$(".paging").hover(function() {
return false;
}, function() {
return false;
});
(It's possible that in recent version of jquery you can replace the argument function(){return false;} by just false.)
Tipsy jquery plugin is installed in my app
This is in my load function
$(function() {
tipsy();
});
Below code is in a js file
var htm = '<div id="new_div" onmouseover="tipsy(this);">' ;
function tipsy(tip)
{
if ( '' != sumtitle )
{
tip.title = tip.innerHTML;
}
else if(tip)
{
tip.title = tip.innerHTML;
}
$(tip).tipsy({gravity: 'w'});
}
How is that the normal title shows up first and then the jquery tip later.
This is a known bug and will be fixed in the next version. For now please use the "Download Source" link on this commit:
http://github.com/jaz303/tipsy/commit/88923af6ee0e18ac252dfc3034661674b7670a97
The tipsy plugin seems to remove the title attribute and assign its value to a custom attribute called original-title to avoid the default browser tooltip from showing. Maybe in your case, this happens too late: The mouse hovers over the element, this initiates the native browser tooltip. Then, tipsy() is executed on the element and switches the attribute name, but that is too late because the timeout for the native tooltip has already started.
You should probably prevent the default action of the event, for example:
$('#new_div').bind('mousover', function (e) {
tipsy(this);
e.preventDefault();
});
EDIT: As this does not seem to have the desired effect, please call tipsy($('#new_div')) right after the div is created and remove the mouseover handler. What you have been doing might be a bit problematic anyway: The tipsy plugin probably uses the mouseover event, and you call .tipsy( { gravity: 'w' } ) in an onmouseover event handler. Repeatedly, if you mouseout and then mousover again. That's a lot of unnecessary event assignments.
You're doing it wrong.
Try this:
$('#new_div').tipsy();
jQuery is designed for using the selectors in JS code. No onsomething events in HTML, please.
Another way is, instead of using the 'title' attribute, use 'original-title' attribute.