Delay before showing the tooltip - javascript

I use simpletip jquery plugin and I want to make some changes in it. I want the tooltip to appear after some time (milliseconds) when hovering the link. Unfortunately I'm not familiar with jquery enough. Can anyone point out how this can be done?
http://craigsworks.com/projects/simpletip/
Thanks in advance

Simply use the hoverIntent plugin

It looks like you can define a custom effect for showing the tooltip.
In your configuration, define showEffect: 'custom', and showCustom property. It should look something like this:
showEffect: 'custom',
showCustom: function(tip, duration) {
tip.delay(550).fadeIn(duration);
}
In this case, the fadeIn will be delayed for 550 milliseconds. duration is the showTime specified in your configuration, or, if omitted 150 milliseconds.

you could use the onBeforeShow callback event in the simpletip plugin, and just use a delay in that so it delays before it returns and continues to show the tip.

Related

how to set display time of ToastMessage?

setTimeout(function () { showToastMessage("Guest added successfully test2").fadeOut(4000);});
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me
You can customise the JQuery toaster as you want, it to be.
Not just the time but the look and feel as well, by passing toaster settings as below
$.toaster({ settings : {...} });
For example to set the timeout property you can pass below argument,
$.toaster({ settings : {'timeout': 5000} });
This setting just need to be done only once.You can change the settings at any moment.
Or you can clear all custom changes and revert to the default settings as below
$.toaster.reset();
For other settings options you can visit this link.
I don't know how work showToastMessage function, but it's looks like this function return jQuery object, so you can use .delay method
showToastMessage("Guest added successfully test2")
.delay(5000)
.fadeOut(4000);
or without jQuery magic you can save jQuery toast object and call fadeOut after timeout
var $toast = showToastMessage("Guest added successfully test2");
setTimeout(function(){
$toast.fadeOut(4000);
}, 5000);

Snap to anchor point animation

I'm using a great plugin that snaps to an anchor point when scrolling within the specified proximity. However, I would like to add animation to this effect but can't seem to get it to work.
Here is the best code I could come up with:
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 200,
}, 300,"easeInOutExpo");
});
</script>
How can I make this work?
Looking at the code, it looks like it will attempt to animate the snap as long as you instantiate the plug-in using an element rather than the document itself:
$(scrollingEl).animate({scrollTop: (matchingEl.offsetTop + settings.offset)}, 200);
Therefore, I would suggest instantiating it with a reference to your page's top-level element instead.
The duration and easing are hardcoded as you can see from the above, but it will be easy enough to amend the plug-in code to allow you to dynamically set these properties via the plug-in settings if you need to.

Jquery onclick popup tooltip

I need the javascript code for tooltip to appear onclick for 10 seconds
Mostly Without using html code, or any plugins
$('a.pet_type_link').click(function() {
//I need tooltip to appear for 10seconds
});
I am using coffescript and haml code.
Check this example it is sounds similar to your query
http://jqueryui.com/tooltip/#custom-animation
timeout = setTimeout(function () {
$("#tooltip").hide('fast');//change these options
}, 500);
Are you looking for Tooltip timeout ??
Change the time delay in timeout function as per your requirement.

Drop down menu disappearing before I can get to the links

How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/

jQuery Galleria plug-in: Make auto-play?

I am using this jQuery plugin
It is very nice, but I can't seem to figure out how to get it to auto-play. (automatically transition to the next image at an interval)
Has anyone else gotten this to do that?
$('#galleria').galleria({
extend: function() {
this.play(4000); // will advance every 4th second
}
});
Actually the new version of galleria has an option for autoplay. looks like this:
(where .test is the name of the div layer containing your images)
<script>
// Load theme
Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
$('.test').galleria({
autoplay: 1000
});
</script>
In my experience, it doesn't have that option. You'd have to hack it to add that.
You might want to consider using another slider plugin: Easy Slider, Galleriffic, Pikachoose

Categories