JavaScript - Help With Timeout Syntax
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 Similar Tutorialsis 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> 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> 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? 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. 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 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 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 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. 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. I'm a PHP guy and haven't used jQuery much. I have a script I found in a book and I am trying to get working and am having trouble. It's a drop down list. I am using it in place of an HTML select box, so I want to pass the value selected from the list along with the form in a hidden field. My question is how do I extract the value out of the JS function and get it into the hidden field? Code: $(document).ready(function() { createDropDown(); $(".dropdown dt a").click(function(event) { event.preventDefault(); var dropID = $(this).closest("dl").attr("id"); $("#" + dropID).find("ul").toggle(); }); $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); $(".dropdown dd ul a").click(function() { var dl = $(this).closest("dl"); var dropID = dl.attr("id"); var text = $(this).html(); var source = dl.prev(); $("#" + dropID + " dt a").html(text); $("#" + dropID + " dd ul").hide(); source.val($(this).find("span.value").html()) }); }); function createDropDown() { var selects = $("select.dropdown_value"); var idCounter = 1; selects.each(function() { var dropID = "dropdown_" + idCounter; var source = $(this); var selected = source.find("option[selected]"); var options = $("option", source); source.after('<dl id="' + dropID + '" class="dropdown"></dl>'); $("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>'); $("#" + dropID).append('<dd><ul></ul></dd>'); options.each(function() { $("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'); }); idCounter++; }); } Can someone point where i'm going wrong? I want to evaluate the values of 'miles' to be >=0 and 'putime' to between 0 and 24 only. Code: <script type = "text/javascript"> function TaxiFare() { // calculates taxi fare based upon miles travelled // and the hour of the day in military time (0-23). var baseFare = 2.50; var costPerMile = 2.00; var nightSurcharge = 0.50; // 8pm to 6am, every night var milesTravelled = Number(document.getElementById("miles").value); var pickupTime = Number(document.getElementById("putime").value); var cost = baseFare + (costPerMile * milesTravelled); // add the nightSurcharge to the cost if it is after // 10pm or before 6am if (pickupTime >= 22 || pickupTime < 6) { cost += nightSurcharge; } if((document.getElementById('miles').value>=0)&&(document.getElementById('putime').value>=0||<=24) { alert("Your taxi fare is $" + cost.toFixed(2)); } else{return 0;} } </script> I have a webpage that has "classes" that are dynamically populated. if a class is empty, or not populated, can I use JavaScript to hide the "class"? If so How? Sorry for such a noob question. Thanks in advance for any help i get this error when ever i try to process the form: There was a SyntaxError: Unexpected token < error due to an parsererror condition. Javacsipt/jquery: $(document).ready(function(){ $("#slide").click(function(){ $("#inner-wrapper").slideToggle(); }); $('form #response').hide(); $('#submit').click(function(e){ e.preventDefault(); var valid = ''; var required = ' is required'; var name = $('form #name').val(); var email = $('form #email').val(); var fname = $('form #fname').val(); var femail = $('form #femail').val(); var message = $('form #message').val(); var honeypot = $('form #honeypot').val(); var humancheck = $('form #humancheck').val(); //Error checking if (name == '' || name.length <=2) { valid = '<p>Your name' + required + '</p>'; } if (!email.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/)) { valid += '<p>Your email' + required + '</p>'; } if (fname == '' || fname.length <=2) { valid += '<p>Your friend\'s name' + required + '</p>'; } if (!femail.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/)) { valid += '<p>Your friend\'s email' + required + '</p>'; } if (message == '' || message.length <=5) { valid += '<p>A message' + required + '</p>'; } if (honeypot != 'http://') { valid += '<p><center>Spambots are not allowed.</center></p>'; } if (humancheck != '') { valid += '<p><center>A human user' + required + '</center></p>'; } if (valid != '') { $('form #response').removeClass().addClass('error') .html('<strong>Please correct the errors below.</strong>' + valid).fadeIn('2000'); }else { $('form #response').removeClass().addClass('processing').html('<center>Working...</center>').fadeIn('2000'); var formData = $('form').serialize(); submitForm(formData); } }); }); function submitForm(formData) { $.ajax({ type: 'POST', url: 'emailfriend.php', data: formData, dataType: 'json', cache: false, timeout: 7000, success: function(data) { $('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success') .html(data.msg).fadeIn('fast'); if ($('form #response').hasClass('success')) { setTimeout("$('form #response').fadeOut('slow')", 5000); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { $('form #response').removeClass().addClass('error') .html('<p>There was a <strong>' + errorThrown + '</strong> error due to an <strong>' + textStatus + '</strong> condition.</p>').fadeIn('fast'); }, complete: function(XMLHttpRequest, status) { $('form')[0].reset(); } }); }; php file PHP Code: <?php error_reporting(E_ALL ^ E_NOTICE); sleep(3); $name = stripslashes($_POST[name]); $email = stripslashes($_POST[email]); $fname = stripslashes($_POST[fname]); $femail = stripslashes($_POST[femail]); $message = stripslashes($_POST[message]); $honeypot = $_POST[honeypot]; $humancheck = $_POST[humancheck]; if ($honeypot == 'http://' && empty($humancheck)) { $error_msg = ''; $reg_exp = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/"; if (!preg_match($reg_exp, $email)) { $error_msg .= "<p>A valid email is required</p>"; } if (!preg_match($reg_exp, $femail)) { $error_msg .= "<p>A valid email is required</p>"; } if (empty($name)) { $error_msg .= "<p/>Please provide your name</p>"; } if (empty($fname)) { $error_msg .= "<p/>Please provide your name</p>"; } if (empty($message)) { $error_msg .= "<p>A message is required.</p>"; } if (!empty($error_msg)) { $return['error'] = true; $return['msg'] = "<h3>Oops! Looks like you missed a few fields.</h3>".$error_msg; echo json_encode($return); exit(); }else { $return['error'] = false; $ref=@$HTTP_REFERER; /////Message at the top of the page showing the url//// $header_message = "Hi $fname \n Your friend $name requested you to visit this page at \n $ref \n"; /// Body message prepared with the message entered by the user //// $body_message =$header_message."\n".$message."\n"; // IP address of visitor is added to message, you can remove it if not required.// $body_message .="\n Sent from http://www.separatethescams.com"; //// Mail posting part starts here ///////// $headers=""; //$headers = "Content-Type: text/html; charset=iso-8859-1\n".$headers; // Un comment the above line to send mail in html format $headers4=$email; // Change this to change from address $headers.="Reply-to: $headers4\n"; $headers .= "From: $headers4\n"; $headers .= "Errors-to: $headers4\n"; $subject="$name visit this site!"; mail($femail,$subject,$body_message,$headers); $return['msg'] = " <b><p><center>Thanks for spreading the word! :) " . "<font color='red'>" .$name . "</font>" . " </p>" . "</b>" . "</center>"; echo json_encode($return); } }else { $return['error'] = true; $return['msg'] = "<h3><center>0ops there was a problem submitting the data. Please try again!</center></h3>"; echo json_encode($return); } ?> html file <html> <head> <link rel="stylesheet" href="ajaxform/form.css" type="text/css" media="screen"/> </head> <body> <div id="wrapper"> <h3 id="slide">Email This Page To a Friend</h3> <hr></hr> <div id="inner-wrapper"> <form id="my_form" action="ajaxform/emailfriend.php" method="post"> <div id="response"><!--This will hold error message and response from server. --></div> <div class="inputs"> <p> <label>Name   ; </label> <input name="name" type="text" placeholder="Your Name" class="required" id="name" size="30" /> </p> </div> <div class="inputs"> <p> <label>Email &nbs p; </label> <input name="email" type="text" placeholder="Your Email" class="required" id="email" size="30" /> </p> </div> <div class="inputs"> <p> <label>Friend's Name </label> <input name="fname" type="text" placeholder="Friend's Name" class="required" id="fname" size="30" /> </p> </div> <div class="inputs"> <p> <label>Friend's Email </label> <input name="femail" type="text" placeholder="Friend's Email" class="required" id="femail" size="30" /> </p> </div> <div class="inputs"> <p> <label id="msg">Message </label> <textarea name="message" cols="24" rows="5"type="text" placeholder="Message To Friend" class="required" id="message"></textarea> </p> </div> <div class="button"> <input name="submit" type="submit" id="submit" value="EMAIL PAGE" /> </div> <div class="inputs"> <input type="hidden" name="honeypot" id="honeypot" value="http://" /> <input type="hidden" name="humancheck" id="humancheck" class="clear" value="" /> </div> </form> </div> <!-- inner-wrapper end --> </div> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="ajaxform/ajax_submit.js"></script> </body> </html> Code: <html> <head> <style> .errorWrapper {padding:0; margin:0; list-style-type:none; position:relative;} .errorBox {padding:5px; position:absolute; left:100px; top:100px; background-color:#BADA55; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:2px 2px 2px #808080; -moz-box-shadow:2px 2px 2px #808080; -webkit-box-shadow:2px 2px 2px #808080;} li.errorBox {display:none;} </style> <script type="text/javascript" src="test.js"></script> </head> <body> <a href="#" onClick="show('test')">test</a> <ul class="errorWrapper"> <li id="test" class="errorBox">This should remain hidden until the link is clicked. Lorem ispum dolor sit amet. Placetne tibi? Mihi placet.</li> </ul> </body> <!-- Contents of test.js --> <!-- function show(boxName) {alert(boxName); document.getElementByID(boxName).style.display="block";} --> </html> wtf is wrong with this? I'm brand spanking new to js, so I don't even know how to begin to troubleshoot this. As far as syntax goes I haven't seen any glaring errors, which leads me to believe I'm trying to do something illegal? The alert box shows up, and the boxName variable contains the correct contents (the ID of the element I want to show), so I dunno what the problem is... Quick reproduction of the problem above. I keep getting myself into trouble because I tend to use my Java reference when coding Javascript, and of course Javascript doesn't support all Java functions. I've just discovered that apparently Javascript doesn't support the trim() function. But curiously, if I code it as: mystring.trim() then Firefox will handle it without any errors. (I haven't actually checked to see if whitespace is removed from around the string.) But when I code it like this: trim(mystring) then firefox gives an error. I've also found a couple of situations where I've made syntax errors, and Firefox gives no error message. This makes debugging tricky, since the only resource I have available is Firefox's Error Console. Safari has no error reporting whatsoever, AFAIK. MSIE seems to find some errors that Firefox misses, but I don't have MSIE on my main computer, so it's a nuisance to use. As a hobbyist, I have no budget to buy Javascript development tools. Is there something free available that does a better job of finding errors? |