I Load this way:
$('.selector').each(function(){
$(this).qtip({
content: { url: '/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topRight',
tooltip: 'left'
}
},
show: {
// Show it on click
solo: true // And hide all other tooltips
},
style: {
name: 'light',
width: 730,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
});
And that looks like if there is a thelay cause of the effect. but qtip.php it's loaded with no delay which is what I really want (to reduce unneeded requests)
Can I delay 300ms before loading qtip.php?
You could set it to use a custom event, then trigger the event after a timeout. The hoverIntent plugin might help, if you want to wait until the mouse stops.
Using hoverIntent:
$(selector).hoverIntent(function() {
$(this).trigger('show-qtip');
}, function() {
$(this).trigger('hide-qtip');
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
},
hide: {
when: { event: 'hide-qtip' }
}
});
If you want to make hoverIntent wait longer before triggering, you can give it a configuration object with an interval property:
$(selector).hoverIntent({
over: showFunction,
out: hideFunction,
interval: 300 // Don't trigger until the mouse is still for 300ms
});
Without a plugin (I haven't tested this):
(function() { // Create a private scope
var timer = null;
var delay = 300; // Set this to however long you want to wait
$(selector).hover(function() {
var $this = $(this);
timer = setTimeout(function() {
$this.trigger('show-qtip');
}, delay);
}, function() {
if (timer) {
clearTimeout(timer);
}
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
}
});
})();
Here I just created another param and it's more simple to use, I have tested this in qtip1(not sure about qtip2)
$('.qtip').qtip({
show: {
when: 'mouseover',
//customized param, when 'mouseout' the qtip will not shown and delay will clean
cancel : 'mouseout',
delay: 500
}
});
To add this param, you need to modify the code of function assignEvents() in qtip:
function assignEvents()
{
...
function showMethod(event)
{
if(self.status.disabled === true) return;
// If set, hide tooltip when inactive for delay period
if(self.options.hide.when.event == 'inactive')
{
// Assign each reset event
$(inactiveEvents).each(function()
{
hideTarget.bind(this+'.qtip-inactive', inactiveMethod);
self.elements.content.bind(this+'.qtip-inactive', inactiveMethod);
});
// Start the inactive timer
inactiveMethod();
};
// Clear hide timers
clearTimeout(self.timers.show);
clearTimeout(self.timers.hide);
// line : 1539
// Added code
--------------------------------------------
// Cancel show timers
if(self.options.show.cancel)
{
showTarget.bind(self.options.show.cancel,function(){
clearTimeout(self.timers.show);
});
}
--------------------------------------------
// Start show timer
self.timers.show = setTimeout(function(){ self.show(event); },self.options.show.delay);
};
For qtip2 there is parameter, called show while initializing the plugin, which represents time in milliseconds by which to delay the showing of the tooltip when the show.event is triggered on the show.target.
For example:
/*This tooltip will only show after hovering the `show.target` for 2000ms (2 seconds):*/
jQuery('.selector').qtip({
content: {
text: 'I have a longer delay then default qTips'
},
show: {
delay: 2000
}
});
Related
I have a slider and i want that when the elements of the slider run out, for example, when clicking right and nothing happens because there no more elements it prints "fail". I m using this:
this might help: codepen.io/anon/pen/ZMxevp
$('#status_bar').animate({
left: "+=500px"
}, {
duration: 3000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function () {
console.log("complete")
},
fail: function () {
console.log("fail")
}
});
I am using jquery qtip2
I want its behaviour just like bootstrap tooltips where
on hover tooltip shows up , also in DOM
on mouseout tooltip hides, removed from DOM as well
Objective:
My objective is I am using lots of qtips, and they are taking unnecessary space in DOM and I want qtip2 to create dom element only when it is active.
JSFIDDLE: https://jsfiddle.net/bababalcksheep/5unavg0q/4/
Can't seem to make it work.Should it not be feature by default. Am I missing something from Docs ?
HTML:
Hover here!
JS:
$(document).ready(function() {
$('.qtiptxt').qtip({
prerender: false,
overwrite: true,
hide: {
event: 'mouseout'
},
events: {
hide: function(event, api) {
var target = api.elements.target;
var targetOptions = api.options;
// Destroy it immediately
api.destroy(true);
//re initialize using existing options
$(target).qtip(targetOptions);
}
}
});
});
It seems I did miss the docs. Here is the solution
https://jsfiddle.net/bababalcksheep/5unavg0q/7/
$(document).ready(function() {
//
// from https://github.com/qTip2/qTip2/wiki/Events-Guide#delegation-on--live--delegate
//
$('.qtiptxt').on('mouseover', function(event) {
$(this).qtip({
prerender: false,
overwrite: true,
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout'
},
events: {
hidden: function(event, api) {
// Destroy it immediately
api.destroy(true);
}
}
}, event);
});
//
//
});
In the following code I want to create the functionality of a like button when the svg symbol is clicked. I am having trouble getting the value of sPaper, sPolyFill and sPolyEmpty.
So far as is they return undefined.
I need to integrate the symbolAnim function into the like and unlike function. How can I do this?
var LikeButtonView = BaseButtonView.extend({
template: _.template($('#like-button-test').html()),
sPaper: null,
sPolyFill: null,
sPolyEmpty: null,
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.sPaper = Snap(heartIcon.get(0));
this.sPolyFill = sPaper.select('.symbol-solid');
this.sPolyEmpty = sPaper.select('.symbol-empty');
},
like: function () {
console.log("Like clicked");
if (this.butn.hasClass("isLiked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")){
this.butn.removeClass("unLiked");
this.butn.addClass("isLiked");
this.addBlur();
}
},
unlike: function () {
this.butn.removeClass('isLiked');
this.butn.addClass("unLiked");
this.addBlur();
},
symbolAnim: function(heartIcon, isLiked) {
if (isLiked === false) {
sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
} else {
sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
}
}
});
Ok so I got the object by targeting this.butn
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.svgNode = this.butn.find("svg").get(0);
this.sPaper = Snap(this.svgNode);
this.sPolyFill = this.sPaper.select('.symbol-solid');
this.sPolyEmpty = this.sPaper.select('.symbol-empty');
console.log(this.sPaper);
Now I need to implement the functionality of symbolAnim in the like and unlike funcitons
For my like button function, which is triggered in the event has as "click selector": "like", I have come up with the following. However this only works once. So when I click the button the first time it adds the class liked and removes the class unliked, which is the default for the html element. Then when it is clicked again, it removes the liked class and adds the unliked class. So far it works as desired.
The problem is when I try to click it again, to like it again, and nothing happens. It doesn't call the like function anymore and the class remains the unliked.
What is causing this problem and how can I fix it?
like: function () {
if (this.butn.hasClass("liked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")) {
this.controller();
console.log("Like clicked");
}
},
controller: function () {
this.butn.removeClass("unliked");
this.butn.addClass("liked");
this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
},
unlike: function () {
this.butn.removeClass('liked');
this.butn.addClass("unLiked");
this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
console.log("Unliked");
}
I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!
I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE
You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds
So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position