Bootstrap tooltip lazy load with delay and show - javascript

I am currently using the following code to initialize a lazy initialization version of Bootstrap tooltip. After the first hover everything works fine in regards to the delay, but on the initial hover it shows right away. I know this is because of the $(this).tooltip('show'); method, but I dont know how to use the delay and show at the same time. I have to use the $(this).tooltip('show'); because once hovered the element doesnt show the tooltip unless I move out and back in.
$(element).on('hover', '.item', function () {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
$(this).tooltip('show');
}
}
});
Updated Answer
$(element).on('mouseenter', '.item', function (e) {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this)
.addClass('tooltip-init')
.tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
.trigger(e.type);
}
});

try use trigger
try the following code
$(this).tooltip({
title: matchup.Title,
html: true,
trigger: 'hover',
delay: delay: { show: 2000, hide: 3000 }
}).trigger('hover');

I found Holmes answer using delay to work, but not reliably. When moving through a series of items, the hover seemed to stop showing. With the help of another stackoverflow answer leading to this jsfiddle by Sherbrow, I simplified the code and got it working in this jsfiddle. Simplified code below:
var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
var show = function(n) {
enterTimeout = setTimeout(function(n) {
var isHovered = n.is(":hover");
if (isHovered) n.tooltip('show');
enterTimeout = false;
}, 750);
};
if(enterTimeout) clearTimeout(enterTimeout);
show( $(this) );
});
$('[rel="tooltip"]').on('mouseout click',function() {
$(this).tooltip('hide');
});

Related

How to Trigger Animations on Scroll with Waypoints.js

I've been trying to figure out how to trigger animations on scroll, and I can't quite get it. Basically, I want to have a class that I can add to my titles that will trigger an animation any time the element with the class is scrolled into view.
I tried using the jQuery Inview plugin, but I couldn't get it to do what I wanted. Then I switched to Waypoints.js and I kind of have it working, but it's not perfect. Right now, the elements animate when I scroll to them for the first time but they do nothing when I scroll up and back down the page. The animations only fire once.
Below is my current code. If anyone can help me figure out a way to get the animations triggering every time the user scrolls past them—and also a way to condense the code so that it fires based on class and not ID—that would be really excellent. (Right now, I have separate function for each element.)
PS: I'm using animate.css, wow.js, textillate.js for the animations.
HTML
<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1>
jQuery
$(function () {
var l1 = $("#l1");
var waypoint = new Waypoint({
element: document.getElementById('l1'),
handler: function() {
l1.textillate({ in: { effect: 'flipInY' } });
},
offset: 'bottom-in-view',
});
});
Thanks for your help!
EDIT: I have found a partial solution that triggers the animations every time you scroll past them. However, I can only seem to get it to work with ids. I'd rather be able to target a class than have to write a separate function for each new title. Any ideas on how to modify the following code so that it works for a class of .lettering?
// Animate #l1
$(function () {
var animatel1 = $('#l1').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
var l1 = $("#l1");
var inview = new Waypoint.Inview({
element: $('#l1'),
enter: function(direction) {
},
entered: function(direction) {
animatel1.textillate('in')
},
exit: function(direction) {
animatel1.textillate('out')
},
exited: function(direction) {
}
})
});
Having it work with a class is a matter of looping through your array of elements. I see you're using jQuery, so it can help you with a bit of the boilerplate:
$(function () {
$('.your-class').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
$('.your-class').each(function() {
new Waypoint.Inview({
element: this,
entered: function(direction) {
$(this.element).textillate('in')
},
exit: function(direction) {
$(this.element).textillate('out')
}
});
});
});
This is what worked for me. Needed to wrap everything in an .each() function. Replace lettering with your class name and you should be good to go.
$('.lettering').each(function() {
var animatelettering = $('.lettering').each(function(){
$(this).textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
});
new Waypoint.Inview({
element: this,
enter: function(direction) {
},
entered: function(direction) {
animatelettering.textillate('in')
},
exit: function(direction) {
animatelettering.textillate('out')
},
exited: function(direction) {
}
});
});

Start scrolling on mouseover jquery jcarousel

I need to start scroll when user hover. I take a function reference from the question this and this. I notice that even the callback function is not working with initCallback option. Am I missing something or I forgot something to put in the code. Here is example of code fiddle
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.startAuto();
}, function() {
carousel.stopAuto();
});
};
You should use jcarouselAutoscroll plugin for that
Check this updated fiddle
INIT CODE
A(".example").jcarousel({
auto: 1,
wrap: "last"
}).jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: false
});
Code for hovering
$(".example li").hover(function () {
$(".example").jcarouselAutoscroll('start');
},function () {
$(".example").jcarouselAutoscroll('stop');
})

Can I use jQuery $(document).on('each', '.showComments', function(e) {})

I am using jquery UI dialog to show comments or other text depending upon what is clicked.
Here is my JSfiddle link Dialog Demo
I have used the code
$('.showComments').each(function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$('.showContractChanges').each(function () {
var panel = $(this).parent().siblings('.divContractChangeDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$(".divCommentDetail, .divContractChangeDetail").dialog({
autoOpen: false,
modal: true,
open: function () {
$(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
},
show: {
effect: 'blind',
duration: 1000
},
hide: {
effect: 'explode',
duration: 1000
}
});
and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.
$(document).on('each', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
but this doesn't work at all. Am i doing something wrong.
Thanks for the help.
If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.
You should use on like that :
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});

jQuery - Activating one toggle button disables the other

I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).
I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.
Any help would be massively appreciated!
You can check my example: Toggle Buttons show and hide
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
JS using jQuery:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});

Problems with jQuery event chain in Safari

I'm building a simple photolog using jQuery, jflickrfeed and jQuery.Masonry - but I'm having some trouble getting the event chain right in Safari.
Here's some example code:
$(document).ready(function() {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
}, function(data) {
console.log("1st");
});
});
$(window).load(function() {
console.log("2nd");
$('#container').masonry({
singleMode: true
});
});
So, jflickrfeed pulls a photo from my flickr feed, wraps it in the template code and appends it inside #container, and repeats this until the limit is reached. After all photos are inserted, Masonry kicks in and arranges the divs.
This works beautifully in Chrome and Firefox, but not in Safari - where the .load event fires before all photos are finished loaded, thus breaking the layout.
I've updated the example to better show illustrate what I mean.
In Chrome/Firefox the console output is "1st, 2nd" while in Safari it is "2nd, 1st"
Any tips?
You can pass the load callback as the second parameter to "jflickrfeed" call and this will ensure that the "masonry" will be invoked only when the images from Flickr have been loaded.
here is a possible sample:
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
},
function () {
$('#container').masonry({
singleMode: true
});
});
Hope it helps.
I'm not sure how useful this will be, or if if will make any difference at all. But for a guess, if the issue is that #container is not available when $(window).load fires, you could try setting up a timer to repeatedly check for its existence, and when it is detected, set up masonry, then kill the timer:
$(window).load(function () {
var i = setInterval(function() {
if($("#container").length) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}},
20);
});
Solved it myself by adding a counter:
var counter = 0;
$(document).ready(function () {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>',
itemCallback: function () {
counter++;
}
});
});
$(window).load(function () {
var i = setInterval(function () {
if (counter = 20) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}
}, 20);
});
Ugly, but it works..

Categories