I want to produce a manual tooltip based upon some user input. The easiest way was to hide all tooltips and then show the relevent ones.
I've reduced my code down to the bare essentials, and my tooltip keeps disappearing after the second "show".
I'm using bootstrap 3.3.4 and jquery 2.1.3
Is there a problem with doing a show immediatly after a hide or am I missing something in my code?
<input id="check" type="checkbox">
<script>
var toolTipData = {
placement: 'right',
title: 'Checkmark checked',
trigger: "manual"
};
$('#check').tooltip(toolTipData);
$(document).on('change', '#check', function () {
$('#check').tooltip("hide");
if (document.getElementById("check").checked) {
$('#check').tooltip("show");
}
});
</script>
Here's a jsfiddle: https://jsfiddle.net/bbrally/4b9g0abh/
You're experiencing a race condition between when the "hide" event happens and when the "show" event happens. Per the documentation the "hide/show" events actually return to the caller before the "hidden/shown" events fire.
http://getbootstrap.com/javascript/#tooltips
Scroll down to the "Methods" section under tooltips
...Returns to the caller before the tooltip has actually been hidden...
...Returns to the caller before the tooltip has actually been shown...
I'm not suggesting the code below is a solution (though, it might be good enough?), but an explanation as to what you're running into. Specifically the timeout value of 250ms will slow it down enough such that it works as you're intending.
var toolTipData = {
placement: 'right',
title: 'Checkmark checked',
trigger: "manual"
};
$('#check').tooltip(toolTipData);
$(document).on('change', '#check', function () {
$('#check').tooltip("hide");
if (document.getElementById("check").checked) {
setTimeout(function() {
$('#check').tooltip("show");
}, 250);
}
});
Hope this helps.
$(document).on('change', '#check', function () {
if (document.getElementById("check").checked) {
$('#check').tooltip("show");
}
else{
$('#check').tooltip("hide");
}
});
It was trying to hide, even though it shouldn't, separate both cases.
Related
I am using jscroll as an infinite scroll pager.
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
padding: 20,
nextSelector: 'div.next a',
contentSelector: '.latest-container',
autoTrigger: true,
autoTriggerUntil: 1
});
This is a pretty neat plugin and it uses the must-have for my project autoTriggerUntil.
Using that method you can limit the times that the content loads automatic and show the pagination's "next" button.
What I am trying to achieve is this.
Load the first set of posts (actually the 2nd page) with infinite. (DONE)
After the 2nd page, show a "Load All" button. (DONE)
Both 1 and 2 work but what I am trying to do is this: After clicking the "Load All" on page 2, I want to destroy the limiter and get back to an infinite view until the end.
I basically need to reinitialize this somehow. I have been messing with intervals and other bad practices the last couple of hours with no results.
After digging I came out with this solution:-
first, you need to add a callback function like this:-
$('.frontpage').jscroll({
//your existing settings ,
callback: function() {
if ($('div.next a').is(":visible")) {
$('.frontpage').jscroll.destroy();
$('div.next a').off('click');
}
}
});
Second Add onclick attribute to the load All a tag (only in the page where the load all a tag is visible)
onclick="loadAllClick(event);"
and the handler function should be like this:-
<script>
var loadAllClick = function(e) {
e.preventDefault();
$('.frontpage').jscroll( //your settings
);
}
</script>
and Here is a fully working plunker sample
Hope this answers your question
You can use the $(el).off() method and the plugin's callback option.
Tested on the plugin page http://jscroll.com/.
It can look something like this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j('div.next a'); //Your 'next' selector
el.off()
el.on('click',function(e){
e.preventDefault(); // we don't want the browser to go to redirect
// Add your code to show the rest of the comments here.
});
}
And then call bind the same way but add callback:
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
...
callback:scrollerCallback,
autoTriggerUntil: 1
});
In your CallBack function, try using this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j(document).find('div.next a');
el.on('click',function(e){
e.preventDefault();
console.log("This call gets executed!");
$j('.frontpage').jscroll({
autoTrigger: false,
autoTriggerUntil: false
});
});
}
What happens when you do this? I guess you have to modify the library itself for this to work, but I am not quite sure yet ...
I am trying to use Bootstrap popovers for error showing. The code works well only after first click on the button. During next clicks popover is showing but disappear immediately.
Added simple helper for popover re-usage:
var popoverHelper = function (selector) {
var $element = $(selector);
$element.popover({
placement: "bottom",
trigger: 'manual'
});
return {
showPopover: function (text) {
$element.attr('data-content', text);
$element.popover('show');
},
hidePopover: function () {
$element.popover('hide');
},
destroyPopover: function () {
$element.popover('destroy');
}
};
};
Using helper:
var pHelper = popoverHelper('#postInput');
$('#postButton').click(function (e) {
e.preventDefault();
// hide open popover if open
pHelper.hidePopover();
...
// some functionality
...
// show popover if some errors
pHelper.showPopover('error occurs!!');
});
jQuery used - 2.1.1, Twitter Bootstrap - 3.1.1.
Full sample at jsfiddle.
Small note: If I call popover destroy and if I do popover re-init on show, all works well.
But I think it is not optimal.
Jsfiddle sample.
Check this Demo Fiddle
A better solution would be to hide popover on user action on the error field.
$('input').focus(function(){
pHelper.hidePopover();
});
I have a page loading content with the waypoints infinite scroller plugin.
On the success of the AJAX call and after DOM elements are added, a callback runs to re-initilize javascript functionality, like carousels, buttons and other animation.
On the first AJAX call, buttons tasked with toggling work properly. On the next AJAX call, the new DOM items work, but the previous buttons now execute toggles twice when clicked. On the third call, original items now run three times, the second items twice and the new ones once, so on and so fourth, continuing to compound as AJAX content is called.
How can I isolate the callback to not affect the previously loaded content, or, is there a way to set a global state for the JS, so that I don't need the callback each time?
Some pseudo code:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});
Edit: Thanks everybody. All the answers lead me to differing but appropriate solutions. The selected was picked as it's a great collection of all the suggested issues and worth the read.
Check out this answer. I think it is the same situation you are having and has a solution:
Best way to remove an event handler in jQuery?
You are attaching a new click handler each time that block of code gets executed. The result is multiple click handlers being bound to your button. Use jQuery's unbind: http://api.jquery.com/unbind/ to remove any click handler(s) before adding a new one:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
// Un-bind click handler(s)
$('.button').unbind('click');
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});
Try bind only once click event to button. Of course you can use on instead of live.
$('.button').live('click', function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
}
});
$('.button').click(function(){
You add an event handler to every button that has the class button. When the second button is added then you add it to every ... which means button 1 and button 2. And so on.
Try
$('.button').last().click(function(){
I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!
HTML
<div class='image_layout'>
<a href='#'><img src=' a.jpg '/></a>
<br><p class='credits'>hahahah
<br>Agency: Agency1
<br>Picture ID: 5 </p>
</div>
jQuery
$('#image_layout').on('hover', 'img', function() {
$(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
$(this).parent().next().next().fadeOut('fast');
})
You can pass two functions to jQuery hover - one for mousein, one for mouseout. You can make this change as long as you don't have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:
$('#image_layout img').hover(
function () {
$(this).closest('.someClass').fadeIn('fast');
},
function () {
$(this).closest('.someClass').fadeOut('fast');
}
);
$('.image_layout').on('hover', 'img', function (e) {
if(e.type == 'mouseover') {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
} else {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
}
})
You could also have done:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});
If you're sure that nothing other than hovering the image will cause the element to fade, you could simply write:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});
Look into Douglas Crockford's JS Style Guide. He'd make your code look something like (with improvements):
var obj = $('#image_layout img');
obj.mouseover( function(){
$(this).parent([selector]).next([selector]).fadeIn('fast');
});
obj.mouseout( function(){
$(this).parent([selector]).next([selector]).fadeOut('fast');
});
You don't need the on, just call the function directly.
I would use .eq as opposed to two next statements, additionally, hover takes two functions, the first being for the mouseenter event, and the second for mouseout
$('#image_layout').hover('hover', 'img', function () {
$(this).parent().eq(2).fadeIn('fast');
}, function () {
$(this).parent().eq(2).fadeOut('fast');
})
References
Take a look at eq here
Read over hover here
I have a a div in a page that slides up on hover, and then back down on hover out. If you were then to hover in and out on the item, then all the actions will be queued and thus triggered, causing the object to keep sliding up and down even though you are no longer interacting with it.
You can see this in action on the site I am developing here. Simply hover over the large image in the center to see the information div to appear.
Ideally what should happen is that while an animation is taking place no further actions should be queued.
Here is my current code:
$(document).ready(function(){
$(".view-front-page-hero").hover(
function() {
$hero_hover = true;
$('.view-front-page-hero .views-field-title').slideDown('slow', function() {
// Animation complete.
});
},
function() {
$hero_hover = false;
$('.view-front-page-hero .views-field-title').slideUp('slow', function() {
// Animation complete.
});
}
);
});
Create a global variable. When the animation starts. Clear it when it completes. Set a condition to exit the function if this variable is set before calling the animation.
This is probably not the best solution, but if you run stop(true, true) before the animation, it should work.
Live demo: http://jsfiddle.net/TetVm/
$(document).ready(function(){
var continue=true;
$(".view-front-page-hero").hover(
function() {
if(continue){
$('.view-front-page-hero .views-field-title').slideDown('slow', function() {
continue=false;
});
}
},
function() {
if(continue!){
$('.view-front-page-hero .views-field-title').slideUp('slow', function() {
continue=true;
});
}
}
);
});
//this will make your code work correctly...