|
JavaScript - Please Help With Reset A Timeout Function
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>
Similar TutorialsHi, 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 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 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 have a number picker that works fine BUT when I reset the fields to enter another number, the start button will not work. I had to make it so the page reloads in order for the start button to work. This not only makes the site look worse than it already does but it's annoying to wait for the page to reload. I'd like to get all these bugs worked out and work on the site appearance after. Am I stuck with this reload thing or does someone know how I can fix it? Here's a link....http://www.psychiclotto.org/ Hi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++)
{
for($i = 1; $i <= 45; $i++)
{
if ($_SESSION['classification'][$o] == $i)
{
$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
$result2=mysql_query($sql2);
// If successfully queried
if($result2)
{
while ($row2 = mysql_fetch_assoc($result2))
{
$ClassDesc2 = $row2['ClassDesc'];
}
}
//echo $ClassDesc2;
?>
<tr>
<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
<td bgcolor="FAFAF6">
<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
<input type="button" value="Reset" onclick="window.reset();" name="reset">
</td>
</tr>
<?
}
}
}
i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! 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>
I 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 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. 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? 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>
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. 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 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();}
}
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 want to rest IE seting like font size and zoom when user enter my site how can i do that
<script type="text/javascript"> function resetForm() { //noofrow = document.getElementById("NoOfRow").value; //form = document.getElementByID('form1'); //noofrow.reset(); d1=document.getElementById("textfield").value; d1=""; d1.reset(); return false; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label> <input type="text" name="textfield" id="textfield" /> </label> </p> <p> <label> <input type="text" name="textfield2" id="textfield2" /> </label> </p> <p> <label> <input type="text" name="textfield3" id="textfield3" /> </label> </p> <p> <label> <input type="Submit" name="button" id="button" value="Submit" onclick="resetForm()" /> </label> </p> <p> </p> </form> how do i reset first input box ..............other data should be remain as follows................ plz help me to do this Hello, The following web page is an essay, but there is JavaScript code in the head area: http://www.pinyinology.com/content/content3c.html You can see the 'Press F5 to reset' command, and please try it to see what happens. What I like is to create another command 'Click here to reset'. Therefore, there will be two commands for the reset task. Then it becomes: Click here or press F5 to reset. The press F5 stuff in the code is as follows; Code: //Typewriting code
message='<span id="inTxt">wen<sup>2</sup></span>';
pos=0;
maxlength=message.length+1;
function writemsg()
{
if (pos<maxlength)
{
txt=message.substring(pos,0);
document.getElementById('edit').innerHTML=txt;
pos++;
timer=setTimeout('writemsg()', 20);
}
}
//Typewriting code2 own addition
message2='<span id="inTxt2">wen<sup>2</sup>闻. ven<sup>2</sup>:文纹. win<sup>2</sup>:蚊. vin<sup>2</sup>:雯.';
pos=0;
maxlength=message2.length+1;
function writemsg2()
{
if (pos<maxlength)
{
txt=message2.substring(pos,0);
document.getElementById('listing').innerHTML=txt;
pos++;
timer=setTimeout('writemsg2()', 20);
}
}
Below is the complete code. It may help. Code: function KeyDown()
{
var key=window.event.keyCode;
if (key==8)
{
window.event.returnValue=false;
var r=document.selection.createRange();
r.collapse(false);
r.move("character",-1);
r.collapse(false);
var p=r.parentElement();
if (p.nodeName.toLowerCase()=="sup"){
p.outerHTML="";
return;
}
window.event.returnValue=true;
}
}
function KeyPress()
{
var key=window.event.keyCode;
window.event.returnValue=false;
if (key>=48 && key<=57)
{
var r=document.selection.createRange();
r.collapse(false);
var d=r.duplicate();
d.moveStart("character",-1);
var c=d.text;
var p=d.parentElement();
var b=/[A-Za-z]/.test(c);
//b=b || p.nodeName.toLowerCase()=="sup";
if (b)
{
d.collapse(false);
var s=String.fromCharCode(key);
s=(p.nodeName.toLowerCase()=="sup")? s:"<SUP>"+s+"</SUP>";
d.pasteHTML(s);
d.collapse(false);
d.select();
return;
}
}
if (!(key in {37:1,38:1,39:1,40:1}))
{
var r=document.selection.createRange();
r.collapse(false);
p=r.parentElement();
if (p.nodeName.toLowerCase()=="sup")
{
var s=p.outerHTML;
p.removeNode(true);
r.pasteHTML(s);
r.collapse(false);
r.select();
}
}
window.event.returnValue=true;
}
//Below for status line
myMsg = " Happy Chinese typing !"
var i = 0;
function scrollMsg()
{
window.status = myMsg.substring(i,myMsg.length) + myMsg.substring(0,i);
if (i < myMsg.length)
{
i++
}
else
{
i = 0
}
setTimeout("scrollMsg()",120)
}
function stoptimer()
{
clearTimeout(timer);
}
//Following function is for the appreciation window
function newWindow() {
catWindow = window.open('appr2.html', 'catwin','width=395,height=235, scrollbars=yes');
catWindow.focus();
}
//Typewriting code
message='<span id="inTxt">wen<sup>2</sup></span>';
pos=0;
maxlength=message.length+1;
function writemsg()
{
if (pos<maxlength)
{
txt=message.substring(pos,0);
document.getElementById('edit').innerHTML=txt;
pos++;
timer=setTimeout('writemsg()', 20);
}
}
//Typewriting code2 own addition
message2='<span id="inTxt2">wen<sup>2</sup>闻. ven<sup>2</sup>:文纹. win<sup>2</sup>:蚊. vin<sup>2</sup>:雯.';
pos=0;
maxlength=message2.length+1;
function writemsg2()
{
if (pos<maxlength)
{
txt=message2.substring(pos,0);
document.getElementById('listing').innerHTML=txt;
pos++;
timer=setTimeout('writemsg2()', 20);
}
}
function stoptimer()
{
clearTimeout(timer);
}
Thanks in advance for your help. I am makeing a dice game and this is how i generate the numbers
Code: var randomnumber1=Math.floor(Math.random()*13) But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of. Hi i have very little javascript experience and need some help, i have made a rest button to reset select forms to there top value using this function ResetForm(){ document.getElementById('canvas').value = 6 ; document.getElementById('acrlyic').value = 10 ; } is there a way to make so instead of having "value = 6;" it would just reset to the option with the smallest value? it will be used on multiple pages were the same name select will have different values on the options |
|||||||