|
JavaScript - Creating A Delay Function
Hi,there,
my following script generates random numbers and if random number==1 the background color of textbox="red"; so far it works fine.. What I m tring to do is to tell my script to write amessage in the same textbox after 5 seconds so ı need a delay function.. thanks for help PHP Code: <body bgcolor="pink"> <script> stopx=setInterval("gox()",500); function gox() { var box1=document.getElementById("box1"); var box2=document.getElementById("box2"); box1.value=Math.floor(Math.random()*5); if(box1.value==1) box2.style.backgroundColor="red"; ////////////// // I need a delay function here; // ////////// //???// if(delay==5) box2.value=" 5 seconds passed ,now I will give another message"; } </script> <input type="text" id="box1" style="position:absolute;top:50px;left:20px;width:40px;height:20px;"> <input type="text" id="box2" style="position:absolute;top:50px;left:200px;width:200px;height:50px;"> <input type="button" value="try again" onclick="location.reload()" style="position:absolute;top:250px;left:20px;width:60px;height:50px;"> Similar TutorialsHello how can I add a time delay to a function, so that the called function will execute only after a certain length of time. For example if I want a div to go 'hidden', 3 seconds after hovering off of a second div? Here is the script code I'm wanting to add the delay to: Code: <script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
and Code: <div id="div1" onmouseover="show('div2'); fade_in('div2', 2);" onmouseout="fade_out('div2', 2); hide('div2');">
The reason I need this delay is so the fadeout function (which also executes after hovering off the second div completely finishes the fadeout before the hidden function executes. hi i am using jquery for ajax request response. Is there any javascript functions which can cause some time delay like Code: ajaxStart(function() {
showAnimation();
delay(5000s):
});
I want to be able to display the whole contents of a text file containing 4 paragraphs of text, on a static web page, as soon as a video finishes playing on the page. The video is to be set to autorun as soon as the page loads in the browser. The text file mentioned above, is to remain hidden when the page initially loads and the video is playing. Please I need your advice about what JavaScript code to use to achieve this effect, and where to place the code in the HTML code of the web page. I am new to website design and the use of JavaScript code. I have seen examples of code used for the timed delay of the display of an image file, after a video has finished playing. I do not know how to apply this to the display of a text file. I do not want to convert the whole text file into an image file, as I feel this would negatively affect the search engine optimisation of the page, if there is no text content on the page. Thank you. Hi everyone I need some help creating a function which does the same thing for the chosen elements. I have #design1 #design1servicetext and #design1servicebutton. Code: //Service hover//
$('#design1').mouseenter(function (){
$('#design1servicetext').css('background-position', '0 -91px')
$('#design1servicebutton').css('background-position', '0 -33px')
})
.mouseleave(function (){
$('#design1servicetext').css('background-position', '0 0px')
$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//
How can I create a function, in which I have to choose 3 divs to do the animation? A function like Code: animatebg('#design1','#design1servicetext','#design1servicebutton');
Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance! I am trying to create a function that takes a users input in the form xx/xx/xxxx. Then I need to figure out a way to compare to a new date and give which day of the year it is when using: alert("This is the" +foo+ "day of the year."). Im alittle confused on how to take the users input and compare it somehow to give me the day of the year.
Hi there! I'm trying to retrieve the integer value in the string: #10 So I'm using the JS Split function Code: <script type="text/javascript">
var str="#10";
document.write(str.split("#"));
</script>
Is the code I'm using, but I keep getting a comma before my result.. in this case, my result is ",10" What should I do? Thanks! Kind Regards Matthew P.S. I know that it's an array, but is there still anyway for me to get rid of the comma? Hi I am creating an animation based on Sam Dunn's tutorial 'Animate Curtains Opening with jQuery' ( http://buildinternet.com/2009/07/ani...g-with-jquery/ ). What i need to do is create a 2 second delay in the curtains opening in order to give enough time for an iframe, thats behind the curtains, to load it's content. Here is Sam's script : ----------------------------------------------------------------- <!-- Animate a Curtain Opening with jQuery index.html By Sam Dunn 2009 Build Internet! www.buildinternet.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Animate a Curtain Opening with jQuery | Build Internet</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script> <style type="text/css"> *{ margin:0; padding:0; } body { text-align: center; background: #4f3722 url('images/darkcurtain.jpg') repeat-x; } img{ border: none; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 150px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; } </style> </head> <body> <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> <img class="logo" src="images/buildinter.png"/> <a class="rope" href="#"> <img src="images/rope.png"/> </a> </body> </html> ----------------------------------------------------------------- Any help will be greatly appreciated. Thanks. Jet. Hi all. The below script is from suckerfish. Can anyone help me include a 'one sec delay' to keep the menu open onmouseout. First menu often closes too fast before I get a chance to move onto submenu. I've tried everything with setTimeout BUT I just can't get it right. Nothing I do works. Can somebody PLEASE show me so I can kick myself. LT Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Hello All, This is my first post here, so hopefully I don't make to big an *** out of myself. Anyway, I am working on a small 2D game in javascript, and have character movement bound to the onkeydown event. The problem is, that there is a momentary delay between pressing the key, and then it realizing you are still holding it down. So it's Move->stop->Move smoothly You can see what I'm talking about here http://www.digitalswordsmen.com/at/townmap.cfm I know that the delay is happening at the operating system level (you see the same kind of delay if you open up notepad and hold down a letter key, first letter appears instantly, then a short delay before continuing). I was wondering if anyone has a possible solution though, or someway I could smooth out that delay. Also, the walking animations only seem to work in firefox. I guess IE doesn't play animated gifs while the onkeydown even is being fired. Not sure if there is a fix for that, other than animating the individual frames with JS, but that would be pretty laggy I think. Anyway, any input is appreciated. You can see all the code by of course just viewing source, its still fairly simple at this point. Thanks in advance. I'm trying to delay this line by 1 second, but can't seem to figure out the syntax. Code: window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>; this is the entire function Code: $('#cancel').click(function() {
$.ajax({
type: "POST",
url: "scripts/greenlight.php?vid_id="+<?php echo $vid_id ?>,
data: "vote=2",
success: function(){
}});
document.getElementById("greenlight").src="img/greenlight_btns/greenlight_btn.png";
document.getElementById("cancel").src="img/greenlight_btns/cancel_btnOver.png";
//window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>
window.setTimeout(function()
{
window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>;
}, 500);
}); // end click
I have a script to call upon a random link every time the page is visited. What I can't figure out is how to delay this loading by 1 or two seconds.. it changes the page as soon as the page is loaded. How would I go about delaying this code for a second or two? +rep to anybody that helps me solve this, thanks. Code: <script>
var randomlinks=new Array()
randomlinks[0]="http://www.google.com"
randomlinks[1]="http://www.yahoo.com"
randomlinks[2]="http://www.bing.com"
function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->
</script>
I would like an image to be the button for a form to be submitted, but a sound is to play onclick for 3 seconds before the submit happens. It sounds easy, with a setTimeout delay, but I can't get it to wait: Code: <script type="text/javascript">
function delay(){
mySoundObj1.TGotoAndPlay('/piano','start');
setTimeout('delay2()',3000) // piano sound lasts for 3 seconds
}
</script>
<script type="text/javascript">
function delay2(){
// nothing here I guess...
}
</script>
<FORM METHOD="POST" ACTION="do something">
<INPUT type="image" onsubmit="delay();return true;" src="image/image.gif" width="60" height="60" type="submit">
</form>
Can anyone do this? I mean maybe it is not possible? Hello, I am making a coupon for my mobile website that has to have a response within 60 seconds or so (I would like to be able to play with the time too). This code works but I need to delay the countdown running for a for say 15 seconds after tthe page loads so the people who see the page can read it. Also I would like to know if there is a way I can redirect the page if they do not respond within the countdown time that would go back to the mobile site home page. Also If they leave the coupon page and then go back to the coupon page could I make it so the countdown would still be running as if they never left. I am including the code for the coupon. Almost forgot, can the countdown numbers be red and underlined? Thanks in advance P.S. I don't know much javascript (enough to get in trouble) I searched all over for a solution (till my eyes felt like hemeroids) without bugging you about it. <body> <table cellpadding="3" cellspacing="0" style="width: 320px; height: 480px;"> <!-- MSTableType="layout" --> <tr> <td style="height: 480px; width: 320px;" valign="top" class="style1"> <strong class="style3"><span class="style2">Free Gift ! Plus A $25.00 Discount Off Any Repair $100 Or More!!<br /> </span></strong><br /> That's Right, Get a Free Gift With Your 1st Visit! Plus just for trying us out we'll give YOU $25 off if you spend $100 or more! <br /> <br /> The only catch is you need to respond by calling us within 60 seconds!<br /> <br /> <script type = "text/javascript"> /*author Philip M. 2010*/ function setTimeout("countdown", 20000); var timeInSecs; var ticker; function startTimer(secs){ timeInSecs = parseInt(secs)-1; ticker = setInterval("tick()",1000); // every second } function tick() { var secs = timeInSecs; if (secs>0) { timeInSecs--; } else { clearInterval(ticker); // stop counting at zero // startTimer(60); // remove forward slashes in front of startTimer to repeat if required } document.getElementById("countdown").innerHTML = secs; } startTimer(60); // 60 seconds </script> <span>Remember the Clock is Ticking!</span><br /><span id="countdown" style="font-weight: bold;">You Have <span class="style2"> <u><red>60</red></u></span> Seconds Left.</span> </td> </tr> </table> </body> </html> Pretty simple, I just want to display a <div> after say 20 seconds or any predefined value. Ideally with jQuery
Hello I have a question, I bet it's easy for you guys. I have a page "v.php" which's got an iframe that shows different pages for 3 seconds after they have loaded. There is a page "w.php" that needs to be shown in the iframe but it needs to be shown for 10 seconds after it's loaded. How can I make so "w.php" freezes the timer for at least 10 seconds and then let it start? I hope you guys can understand. Thanks! Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly. <script> $('#ad_1 > img').each(function(i,e){ rotate($(this),600,4000,i); }); function rotate(elem1,speed,timeout,i){ elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){ var other; if(elem1.parent().attr('id') == 'ad_1') other = $('#ad_2').children('img').eq(i); else if(elem1.parent().attr('id') == 'ad_2') other = $('#ad_3').children('img').eq(i); else if(elem1.parent().attr('id') == 'ad_3') other = $('#ad_1').children('img').eq(i); other.animate({'marginLeft':'0px','width':'35px'},speed, function(){ var f = function() { rotate(other,speed,timeout,i) }; setTimeout(f,timeout); }); }); } }); </script> Hi. I hope someone can help. I am using a 'suckertree horizontal menu'. I am trying to alter the javascript to provide a delay with mouseout (to hide the UL). I am having issues! Here is the original code: Code: ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
Here is the code I am working with: Code: ultags[t].parentNode.onmouseout=function(){
setTimeout("this.getElementsByTagName(\"" + ul + "\")[0].style.visibility=\"" + hidden + "\"", 1500);
}
Any help greatfully recieved! I'm creating a new thread just for the sake of getting help from other people and getting help fast. Not sure if other people are or will be facing similar problems as I am but I will post this on the forum for other people's sake... I want to make my drop down box similar to the one seen at http://www.gamewearteamsports.com/ The menu links act as normal links but will drop down to a div box when a person hovers over the link. The box will appear when the person hovers it but SHOULD disappear once the person does not hover over the box anymore. So if the person hovers over another link, the box should disappear. I added a delay timeout to one of my div boxes and the box stays alive for a couple of seconds but then closes back up again even though I'm still hovering over it. Any ideas? My js: Code: <script type="text/javascript">
function drop(which)
{
document.getElementById("drop" + which).style.display = "block";
}
function undrop(which)
{
document.getElementById("drop" + which).style.display = "none";
}
</script>
My menu links code: Code: <ul id="head1" style="width:940px;">
<li><a href="#" onmouseover="drop(1)">Basketball</a></li>
<li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
<li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
<li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
<li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
<li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
<li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
The code I have for the first link: Code: <div id="drop1" onmouseout="setTimeout('undrop(\'1\')', 3000);" style="z-index:3000;">
There's a table with content in it inside the div. There's a </ul> tag that closes out the menu links. |
|||||||