|
JavaScript - Help With Timeout
is there a way to make it so when the user clicked the start game button that the button would appear for a few seconds then disappear and when the start game button was clicked again another one would appear again?
There will be buttons inside of the divs i just havnt programed them in yet Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random Sounds 2</title>
<style type="text/css">
.article_example_div { display:none; width:300px; height:300px;}
</style>
<script type="text/javascript" language="JavaScript"><!--
NumberOfDivsToRandomDisplay = 5;
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
//code to prevent same div from showing twice in a row.
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + "=" + r;
}
//end of code to prevent same div from showing twice in a row.
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
document.getElementById("randomdiv"+r).style.display="block";
}
</script>
</head>
<body>
<input type="button" value="Start game" onclick="DisplayRandomDiv()"></button>
<div id="randomdiv1" class="article_example_div">
Div 1
</div>
<div id="randomdiv2" class="article_example_div">
Div 2
</div>
<div id="randomdiv3" class="article_example_div">
Div 3
</div>
<div id="randomdiv4" class="article_example_div">
Div 4
</div>
<div id="randomdiv5" class="article_example_div">
Div 5
</div>
</body>
</html>
Similar TutorialsI found a simple script from the net that redirects the user to another page after timeout. I want to redirect the user to an anchor (an anchor called #done) in the SAME page, but i couldn't do it. Here's the code. Any help will be appreciated. Thank you. Code: <form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>
<script>
<!--
/*
*/
//change below target URL to your own
var targetURL="http://myurl.com"
// tried #done/samepage.htm as also samepage.htm/#done
//change the second to start counting down from
var countdownfrom=6
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>
Hi all, I have some card/images and would like to have the first one displayed.Which i can do. Then when I mouse click on the card/image it goes to another image for say 2 secs, then with out clicking goes back to the orignal card. I have played with the syntax for ages and also looked on the net and cannot get it right. This is what I have so far. Code: <html> <head> <script> var back = new Image(); back.src = "back.gif";// preloads the image. var ace = new Image(); ace.src = "0.gif"; //Preload the Image var two = new Image(); two.src = "1.gif";// preloads the image. var three = new Image(); three.src = "2.gif";// preloads the image. var four = new Image(); four.src = "3.gif";// preloads the image. var five = new Image(); five.src = "4.gif";// preloads the image. </script> </head> <body> <img name="img0"> <img name="img1"> // what is this for? <script> document.images['img0'].src = back.src;//displays image /*How do I have one card diplayed then mouseclick on that one card and another card will display for 2 secs then the card will go back to original card. */ </script> </body> </html> Any ideas ? Thanks heaps Shayne I would like to know (maybe I know the answer already), but can a function be paused, like halfway the function pause the function for lets say for 5 seconds, then continue. Thanks Code: function ChangeElementSize(objName,ToWidth,ToHeight,Speed)
{
objId=document.getElementById(objName);
CurWidth=parseInt(objId.style.width);
CurHeight=parseInt(objId.style.height);
if(CurWidth!=ToWidth) {objId.style.width=GetValueChange(CurWidth,ToWidth)+"px";}
if(CurHeight!=ToHeight) {objId.style.height=GetValueChange(CurHeight,ToHeight)+"px";}
if(CurWidth!=ToWidth || CurHeight!=ToHeight)
{
TimeoutCmd="ChangeElementSize(\""+objName+"\","+ToWidth+","+ToHeight+","+Speed+");";
setTimeout(TimeoutCmd,Speed);
}
}
function GetValueChange(CurrentValue,ToValue)
{
ValueDiff=ToValue-CurrentValue;
if(Math.abs(ValueDiff)!=1)
{CurrentValue=CurrentValue+Math.round(ValueDiff/2);}
else
{CurrentValue=CurrentValue+ValueDiff;}
return CurrentValue;
}
<div id="ChangeSizeDiv" style="position:absolute;left:0px;top:0px;width:200px;height:40px;border:5px solid green;overflow:hidden" onmouseover='ChangeElementSize("ChangeSizeDiv",500,500,40);' onclick='ChangeElementSize("ChangeSizeDiv",200,40,40);'>
Hover to resize me ...
</div>
This is working, but with a snag ... If you run it, and hover over the div, the box grows. If you click it, it shrinks. Good, but if you hover and click fast enough it puts the box in a timeout(x2) loop. One timeout is shrinking the box, while the other is making it larger, thus competing, and neither can do its job. How can I fix this? If possible, I'd like to be able to terminate any current timeout processes, then start the new one, but I haven't figured out how to pass the timeout ID back so that it can be cancelled. I have this code that when you click a button it will shuffle items in an array then you have 10 seconds to read it then the array items disappear. But I need to figure out how to make it so that you can do something like click another button that will allow you to click the twister drill button again and it will shuffle it heres the code any help would be appreciated Code: <script type="text/javascript">
function myFunction()
{
var myarray=["red","blue", "yellow", "orange"]
myarray.sort(function() {return 0.5 - Math.random()})
var x=document.getElementById("demo");
x.innerHTML=myarray;
}
</script>
<script type="text/javascript">
{
var t=setTimeout("alertMsg()",10000);
}
function alertMsg()
{
document.getElementById("demo").style.display="none";
}
</script>
<button onclick="myFunction()">Twister Drill</button>
<font size="5">
<p id="demo"></p>
</font>
I am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot. Below is the working code:JS and Html. Code: <SCRIPT type=text/javascript>
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="block"){
myLayer.style.display="none";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="block";
}
}
</SCRIPT>
Code: <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;" href="#"><SPAN>Raticide</SPAN></A>
<UL style="DISPLAY: none" id=v-menu class=v-menu>
<LI><A href="aaa.html">PRODIORAT</A></LI>
<LI><A href="aaa.html"> PROBRODIRAT</A></LI></UL>
If you go to: http://ocmd.freehostia.com/tbb/ You'll see that when the user presses enter, it goes to another page. Currently, in the scripts part of my page is this: Code: function checkKey()
{
if (window.event.keyCode == 13)
{
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'horse.ogg');
audioElement.play();
window.location = "google.html";
return false;
}
}
Notice how I'm trying to play an audio file? Well, I need for the window.location to go after the audio file plays, or alternatively for it to be played after xx milliseconds. Thank-you. Hi, I've created a function that calls to get data from my MySQL database. If there is no data in my MySQL database, I want the page to just keep refreshing and then if it finds the data, I want it to echo it to the page. I'll post my code below and it'll give you an idea of what's going on. <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $.ajax({ url: 'retrieve.php', data: "", dataType: 'json', success: function(data) { var videoid = data[0]; if (videoid == false) { setTimeout("location.reload(true);",1000); } else { $('#youtube').html("<iframe width='400' height='225' src='http://www.youtube.com/embed/"+videoid+"?rel=0&autohide=1&showinfo=0' frameborder='0' allowfullscreen></iframe>"); } } }); </script> </head> <body onload="$.ajax();"> <div class="container"> <div id="youtube"> <!----- checkServer() output appears here !-----> </div> </div> </body> So as you can see the idea is that if there is a video id present in the database, it echoes the embed code for the YouTube video. If the database is empty, it just keeps refreshing the page. However this not what's happening. At the moment it just keeps echoing an empty YouTube video onto the page. I think it has something to do with my if and else syntax? Thanks for any help you can give. Also I apologize in advance if this a retarded way of doing things. I just need a basic proof concept before I make this code work any better. I asked a question a while ago about this box that changes content but i didn't say i wanted it to start automatically. Code: <script type="text/javascript">
// The stuff the box will say
var content = [
"<a href='www.url.com'> link 1 </a>",
"<a href='www.url2.com'> link 2 </a>",
"insert html content"
];
var msgPtr = 0;
var stopAction = null;
function change() {
var newMsg = content[msgPtr];
document.getElementById('change').innerHTML = ''+msgPtr+'<p>'+newMsg;
msgPtr++; msgPtr = (msgPtr % content.length);
}
function startFunction() { change(); stopAction = setInterval(change, 5000); }
function stopFunction() { clearInterval(stopAction); }
</script>
</head>
<body>
<button onclick="startFunction()">Start</button>
<button
onclick="stopFunction()">Stop</button>
<div id="change"
style="border: 5px solid rgb(136, 136, 136); width: 200px; height: 100px; background-color: rgb(221, 221, 221); color: white;"></div>
</body>
Could someone make this so that it starts automatically when the page loads? Like with a time out? Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. I use the Mouse Gesture Redox addon for Firefox 3.4 which allows javascript to be added for a gesture. I have found code which will perform different commands for the same gesture when a particular key is pressed. I would like the code to be disabled after each key press or a timeout (if a key is not pressed) until the same gesture is performed again. My attempts at coding to produce this effect have not worked. Can this be achieved? porman9 Code: document.onkeypress=detectKey;
function detectKey(e)
{
if(e.which==97){BrowserOpenAddonsMgr();}
else
if(e.which==100){gBrowser.loadOneTab(currURL, null, null, null, false, false);document.body.focus();}
else
if(e.which==110){mgB_OpenTab();}
else
if(e.which==109){mgW_MinWin();}
else
if(e.which==114){mgW_Restart();}
else
if(e.which==117){mgB_UndoCloseTab();}
}
Forgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time. I'm running a sales video and I do not want the download button to appear until the end. Hope this makes sense?? 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. I am trying to work out how to use Google Chrome DevTools to simulate a timeout on a JavaScript file on my site. I can use the 'Toggle Device Mode' to introduce throttling but that doesn't target a specific script. Is there a way to do this with DevTools? I am using Chrome 38. |
|||||||