The title basically says it. It does not matter what I put in the offset param, it only fires when the element hits the top of the window.
$('.waypoint').waypoint({
handler: function(direction) {
console.log('hit');
}
}, {offset: '100%'});
I have also tried setting context manually, but the results are the same.
Try putting the offset as other key of the same JSON which contains handler
$('.waypoint').waypoint({
handler: function(direction) {
console.log('hit');
},
offset: '100%'});
I have seen this other way in the official documentation:
$('.waypoint').waypoint(function(direction) {
console.log('hit');
}, {
offset: '100%'
})
Related
I have a page with a jQuery UI tooltip that is initially opened and its closing on mouseout event is disabled.
Now, I want the tooltip to close after a user clicks on it itself, not on the element for which the tooltip is shown (as many other answers here).
As one of the possible solutions, I thought I can add a click handler to the tooltip's div and close it from there. But I can't find a standard way to obtain the tooltip's div with the Tooltip widget API or attach the handler in some other way.
Am I on the right track with the approach above? Or how to achieve what I am after in a different way?
JSFiddle illustrating what I have for the moment.
I've found a relatively simple solution without hacking the Tooltip API via attaching a click handler in the tooltip's open event and closing the tooltip there:
$('.first')
.tooltip({
content: 'Click to close',
position: { my: 'left center', at: 'right center' },
items: '*'
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.click(function () {
$element.tooltip('close');
});
},
})
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
JSFiddle
Try this:
$(document).ready(function(){
$('.first')
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' })
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
})
// when the tooltip opens (you could also use 'tooltipcreate'), grab some properties and bind a 'click' event handler
.on('tooltipopen', function(e) {
var self = this, // this refers to the element that the tooltip is attached to
$tooltip = $('#' + this.getAttribute('aria-describedby')); // we can get a reference to the tooltip via the `aria-describedby` attribute
// bind a click handler to close the tooltip
$tooltip.on('click', function() {
$(self).tooltip('close');
});
});
});
Updated JSFiddle
jQuery UI Tooltip API
Try this:
$(document).ready(function(){
$('.first').on('mouseout focusout', function(event) {
event.stopImmediatePropagation()
})
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' }).tooltip('open');
$( "body" ).delegate( ".ui-tooltip", "click", function() {
$('.first').tooltip('close');
});
});
See fiddle here
Based on Alexes answer if you wanted to close only on hitting "X":
$(".t1").tooltip({
content: "<div><div class='tit'>Some super titlet</div> <div class='x'>x</div><div class='con'>Some content super super long</div></h1>",
disabled: true,
width:550,
tooltipClass: "myClass",
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.each(function () {
$("div.x",this).click(function () {
$element.tooltip('close');
});
});
},
}).on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$(".tooltip").click(function() {
$(this)
.tooltip("open")
});
See it here: http://jsfiddle.net/analienx/h639vzaw/73/
I've this code
function DrawTipsProgress(postid, ajaxurl) {
var data = {
action: 'ajax_action',
post_id: postid
}
jQuery('#dashicon-' + postid).on("click", function () {
jQuery.post(ajaxurl, data, function(response) {
jQuery('#dashicon-' + postid).tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
content: response
});
jQuery('#dashicon-' + postid).tooltip('open');
});
});
}
On first click, it work as aspected.
If later I try to hover again the button without click it the tooltip popup again, and the click just do the ajax call but doesn't open the tooltip.
The tooltip is triggered on hover. In your code, it is not being bound to the element until the 'click' event occurs, so it's not really the click causing it to display... it's the hover following the click. I believe what you need to do is use enable and disable. Here is an example fiddle.
http://jsfiddle.net/ecropolis/bh4ctmuj/
Anchor text
$('a').tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
disabled: true,
close: function( event, ui ) {
$(this).tooltip('disable');
/* instead of $(this) you could also use $(event.target) */
}
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
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) {
}
});
});
This works - JSFiddle
$("#FullCalendar").fullCalendar({
timezone: false,
defaultView: "agendaWeek",
eventLimit: true,
events: [{
title: 'event1',
start: moment().startOf('day').add(8,'hours')
}],
eventAfterRender: function(event, element) {
var $viewport = $(".fc-time-grid-container.fc-scroller");
var qapi = $(element).qtip({
content: "woo",
hide: {
event: false
}
}).qtip('api');
$viewport.on("scroll", function () {
qapi.reposition();
});
qapi.show();
event.qapi = qapi;
},
eventDestroy: function( event, element, view ) {
event.qapi.destroy();
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
Agenda view so the calendar can't show the whole day and needs a scrolling div
qTip on a fullcalendar event
Scroll event listener to call qApi.reposition so the qtip remains pointed at the event.
The problem is that it isn't hidden when you scroll down far enough:
I found several places that say the solution is to set position.container as the scrolling div which should take care of this problem (and maybe the need for a scroll event listener too). But position.container only seems to break things for me.
None of these work: (JSFiddle)
position: {
//container: element.parent()
//container: element
container: $viewport
}
I've also tried using position.viewport and position.target.
You can check if the element is visible after scrolling, and show/hide the qtip accordingly.
$viewport.on("scroll", function () {
if(isScrolledIntoView(element[0])) {
qapi.show();
qapi.reposition();
}
else {
qapi.hide();
}
});
Check this Fiddle
Edit: A nice way to check element visibility can be found here
ive found a script which hope to modify
wish to make the Click FIRST and Click SECOND appear on page load
but still hide when click to other elements within the sets,
need help
$(document).ready(function () {
$('.set').each(function () {
$('a[title]', this).qtip({
position: {
at: 'bottom center',
my: 'top center'
},
show: 'click',
hide: {
event: 'click',
target: $('a[title]', this)
}
});
});
});
http://jsfiddle.net/ADER8/132/
Thanks!
You can simplify your config, you don't need to use an .each to set up qtip, it will use the title of the context anchor. Also, in you fiddle you linked to the nightly build of qtip, which seems very unstable and api shortcuts methods do not seem to be working. After linking to the stable release it is working with the following code:
// Create the tooltips only when document ready
$(document).ready(function () {
// First tooltip config
$('.set a[title]').qtip({
position: {
at: 'bottom center',
my: 'top center'
},
show: 'click',
hide: 'click'
})
.click(function() {
// Hide all tooltips in set except the one that was just clicked
$(this).closest('.set').find('a[title]').not(this).qtip('hide');
});
// Show the first tooltip of each set
$('.set').find('a[title]:first').qtip('show');
});
jsFiddle Demo