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.
Related
I am building a interstitial page, using <div> and JavaScript, really simple script but neat.
Everything is working, but I also would like to close the div's after a few seconds (like 10 seconds, for example). Here what I have so far:
I have two div's, 1 and 2.
I have the CSS setup for div 1 like: display: none; (div 1 have the content for the splash screen)
Div 2 is the layer that will cover the page and leave only div 1 visible.
To load the div's I have a onload function like this:
onload="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block'"
To hide the divs I have an onclick function like this:
How can I execute the onclick function with a timer, and how can I do it? It also has to be in JavaScript.
I believe you are looking for the setTimeout function.
To make your code a little neater, define a separate function for onclick in a <script> block:
function myClick() {
setTimeout(
function() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}, 5000);
}
then call your function from onclick
onclick="myClick();"
setTimeout will help you to execute any JavaScript code based on the time you set.
Syntax
setTimeout(code, millisec, lang)
Usage,
setTimeout("function1()", 1000);
For more details, see http://www.w3schools.com/jsref/met_win_settimeout.asp
onclick = "setTimeout(function() { document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'}, 1000)"
Change 1000 to the number of milliseconds you want to delay.
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);
I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred
Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!
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/
I am building a interstitial page, using <div> and JavaScript, really simple script but neat.
Everything is working, but I also would like to close the div's after a few seconds (like 10 seconds, for example). Here what I have so far:
I have two div's, 1 and 2.
I have the CSS setup for div 1 like: display: none; (div 1 have the content for the splash screen)
Div 2 is the layer that will cover the page and leave only div 1 visible.
To load the div's I have a onload function like this:
onload="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block'"
To hide the divs I have an onclick function like this:
How can I execute the onclick function with a timer, and how can I do it? It also has to be in JavaScript.
I believe you are looking for the setTimeout function.
To make your code a little neater, define a separate function for onclick in a <script> block:
function myClick() {
setTimeout(
function() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}, 5000);
}
then call your function from onclick
onclick="myClick();"
setTimeout will help you to execute any JavaScript code based on the time you set.
Syntax
setTimeout(code, millisec, lang)
Usage,
setTimeout("function1()", 1000);
For more details, see http://www.w3schools.com/jsref/met_win_settimeout.asp
onclick = "setTimeout(function() { document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'}, 1000)"
Change 1000 to the number of milliseconds you want to delay.