JavaScript - A Question Of Timing
Is there a way to have functions execute sequentially, rather than additively, using setTimeout? The problem here is varying browser speeds.
Say we have some functions and they're set to fire after certain intervals, to create a rhythm. If you set them this way: Code: fn1(); setTimeout('fn2()',3000); setTimeout('fn3()',5000); and fn2() takes approx 1600ms to complete, there should be a 400ms pause before fn3(). But no two browsers are the same: the rhythm is at the mercy of browser speed. In some browsers, fn3() will fire before fn2 is finished. It sounds finicky, but it's like looking at a cut in a film: it's either smooth and not noticed, or it jars. Is there a way to execute which says: "do fn1(); when it's finished, wait 3 seconds and do fn2(); when it's finished, wait 400ms and do fn3()" ? cheers. Similar TutorialsHi, i'm not a Javascript programmer but have adapted this slideshow from an open source online and i need some help in adding some touches and finishing it off. www.sixtydegreedays.com I want to add timings to the main images so they scroll through at a set interval, as well as being able to be clicked through as they are now, can someone help with this? Also, i cannot figure out where the first image (horsebox) goes once i have clicked through the other links - if i click back to horsebox, the image disappears! These are the two most important things, but it would also be helpful if someone could help me pre-load the images to cut down on load time. Hopefully these are quick fixes and someone can take the time to help. Cheers Hi, I have a javascript function that is formatting data before it is being passed along to an Ajax call. The same function is formatting data for two variables but it seems as though the first call to the is being preempted by the same function call for the second variable's data formatting. On top of that the function does not seem to finish execution by the time it reaches the Ajax call so none of the data seems to be passed along. Here's a condensed version at what I'm dealing with: Code: var data_group1 = FormatData('type_1'); var data_group2 = FormatData('type_2'); Ajax(data_group1, data_group2); How can I ensure that the first call to FormatData is finished before the next call to it begins. Additional how can I prevent the Ajax function from executing until the first two lines have executed. Thanks a ton. Hello everyone, I tried to create javascript float menu and this my code: 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>Untitled Document</title> </head> <body> <div id="static" style="width:150px; height:150px; position: absolute; border:1px solid yellow; right: 5px;">HELLO</div> <script type="text/javascript"> setInterval("document.getElementById('static').style.top=document.body.scrollTop+25+'px' ",1000).setTimeout(100); </script> <br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br />' text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> text-here text-here text-here text-here text-here<br /><br /><br /> </body> </html> but the results it's not good like: http://www.jtricks.com/javascript/na.../floating.html what's the lack or mistake of my script? please help me thank you Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance! <script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', timeout: 3000, after: function() { $('#caption').html(this.alt); } }); }); </script> Hello guys, I'm new to Javascript and my question involves text appearing upon a button click or after a set time. I have the following code: Code: <script type="text/javascript"> function timedMsg() { document.write("Timed Messege."); } And the button: Code: <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()" /> </form>[ I guess document.write is not the correct command to use in such situations, since it just replaces the whole page. Which command should I use so that the wanted text appears within the page, without reloading or replacing it? Thanks in advance. I could not find a proper command in my search. Could someone please take a look at my code? It's a simple quiz with one multiple choice question and one fill in the blank. When the user clicks on 'submit' I tried to show some kind of response with correct/incorrect images next to the question. It works with the multiple choice question, but not with the fill in the blank. How can I get the fill in the blank question to work. It always shows the answer as being wrong. Thank you. Quote: answer_list = [ ['False'], ['body','hips','knees'] // Note: No comma after final entry ]; response = []; function setAnswer(question, answer) { response[question] = answer; } function CheckAnswers() { var correct = 0; var flag, resp, answ; for (var i = 0; i < answer_list.length; i++) { flag = false; for(var j=0; j<answer_list[i].length; j++){ resp = response[i].toLowerCase(); answ = answer_list[i][j].toLowerCase(); ################################################################################################# if (response[0] == answer_list[0]) { flag = true; document.myquiz.a1c.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1c.style.backgroundImage = "url('incorrect.gif')"; document.myquiz.a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet."; } if (response[1] == answer_list[1]) { flag = true; document.myquiz.a1d.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1d.style.backgroundImage = "url('incorrect.gif')"; } ################################################################################################### } if (flag) { correct++; } } document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!"); } </SCRIPT> </HEAD> <FORM name="myquiz"> <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B> <label><INPUT TYPE=radio NAME=question0 VALUE="True" onClick="setAnswer(0,this.value)">True</label> <label><INPUT TYPE=radio NAME=question0 VALUE="False" onClick="setAnswer(0,this.value)">False</label> <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea> <B>2. When taking a supine length measurement, straighten the infant's <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, and <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">.</B> <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea> <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()> </FORM> </div> </FONT> </BODY> </HTML> You are given a mathematical expression containing integers and the basic operations: *,+,-, /. Find the number of unique results that can be obtained by parenthesizing the expression differently. i.e., by changing the order of evaluation of the operations. Note that all operations are integer operations. For example, if the input is 2 ∗ 3 + 6/2, your output should be 4. Plzz help me with this qs......... I'm not sure if this is the correct forum or not, but here goes. I want to make a very simple XUL document. Just a simple basic window to be opened up, but, i want the XUL to Load and Render an HTML File. I'm not sure about what function(s) to call to achieve this, can anyone give me any ideas to go on? here's what i have so far use my JavaScript Function called LoadFromDisk(FileName), if the file is there or the load is sucessfull, it can be stored as a variable. And then i have a single Division in the XUL document called RenderWindow. From there i set the innerHTML of the RenderWindow to the data that was loaded from the disk. Is this the right way? thanks I was asked to redo a menu for this site: http://www.listlabs.com/index.php It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item. Now to my question... I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state. Any help would be great! Thanks. Hi all I am doing an assigment and have gotten to the end and cannot get the unordered list to work. If I try having my </script> tag below the </ul> it does not display anything If i have it above it will only display the varible names or what ever I type between the <li> </li> tag and not the varible assigment. num1,2,3,4 being the varible name. ie. </script> <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed and does not display </ul> </head> </html> The following does not display any thing <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed </ul> </script> </head> </html> I need to get the <li></li> to display not what I type in there but the assigment of the varible name I put in there.,or the output the varible calculation produces. Hope that was easy to understand lol Any advise would be awesome, cheers Shayne Darcy. Ok i have been working on this for a while now. I have to have 3 fish swim across the screen in both direction. I have tried a few things but nothing is working. Can someone please explain to me what I am doing wrong. here is my code for you guys to look at it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fish tank</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> // <![CDATA[ var fishPos = new Array(3); fishPos[0] = "fish1.gif"; fishPos[1] = "fish2.gif"; fishPos[2] = "fish3.gif"; var fillPosition = 10; for(var i = 0; i < 50; ++i) { horizontal[i] = fillPosition; fillPosition += 10; } function fishSwim(fishNumber) { document.getElementById("fishPos").style.left = horizontal + "px"; ++fishPos[fishNumber]; if (fishPos[fishNumber] == 49) fishPos[fishNumber] = 0; } function startSwimming() { setInterval(fish1Swim, 100); } // ]]> </script> </head> <body onload="startSwimming();"> <p><span id="fish1" style= "position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p> <p><span id="fish2" style= "position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p> <p><span id="fish3" style= "position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p> </body> </html> I am really not understanding and in my book it only give me a page to read about the animation. I am still new to it. Thanks for looking hello all ive been asked to create a javascript slideshow.... and i don't really understand it that much i know a little javscript but not much........ is thier any helpful sites that i can use to teach you step by step to make a javascript slide show???? also if don't want loads of code to be used, i want the code to be clean insted of loads and loads of code what is just unessary. i will be linking the javascript file to the html file so i need to keep the code to a min LOL CHEERS Hello, i haven't understood how to find the id from buttons, links, button images to auto click yet for example, i want to CLICK HERE how can i do that? how i find the id (I Own firefox with firebug and know basic html) it will be something like javascript:document.GetElementById('id').click(); right? but just want to know how to find or create ids on sites for auto click thanks Ok, i am new to JavaScript and i am self teaching myself as i type this. Now here is my question: Is there a way using JavaScript or another web programming language to see where users came from before visiting your site. If it was a specific page I created could you have JavaScript functions that would change components on the website. (see example for better detail) Here is an example: My website home page, lets call it "HomePage" has an image called "LogoA" on the top of the page. Now if a user visited a specific page I created with in my website, we can call it "LandingPageA", and on LandingPageA they clicked a link that sent the user to my HomePage, could there be a command in JavaScript or another programming language that would say, Ok if user came from LandingPageA then load LogoA on HomePage. If user came from LandingPageB then load LogoB on HomePage if user came from LandingPageC then load LogoC on HomePage? If it is a confusing question i apologize. I can clarify if you needed it. I appreciate any help or info to lead me to a solution. Thanks -B This is what I am aiming for. I want to be able to click on a word that would then write text in a specified area. This is what I came up with but it writes it at the top of the page and only for a moment then disappears.... These are my clickable words Code: <a href="#textarea" onClick="MathHomework('W2')">Week 2</a> <a href="#textarea" onClick="MathHomework('W3')">Week 3</a> the anchor named 'textarea' is where I want the output to be written which is placed on my html page. This is my newbie script Code: <script type="text/javascript"> function MathHomework(week) { if (week == "W2") document.write("<p>Review Chapter Twelve</p>"); else if (week == "W3") document.write("<p>Final Chapter Review Test</p>"); } </script> <a name="textarea"> (text area for javascript output)</a> so is my onclick syntax wrong maybe? and yes I have read rule#5 and I am trying to understand my mistakes. Thank you in advance I have been searching through the forums and have not been able to find exactly what I am looking for. I built my web site a while back using Flash. Right now I am trying to convert it to a non-Flash site. I am trying to duplicate my slideshow, with a caption, and forward/back button in javascript. If anyone can offer advice on how to do this I would greatly appreciate it. my current flash site: http://moparch.com/moparch/architecture/msbe/msbe.html Thanks in advance. P.S. I am brand new to javascript. My experience is limited to the few online tutorials that I have worked through. I was planning on using Dreamweaver (which I am already familiar with) to assemble the final site once I get the necessary javascript figured out. Is there a way to store user input or a way to send user input to an email or log file, so that it is stored.. Or would I have to use something else to do this, like php..?? Dont really know much about php, so was wanting to know if i could use javascript doing this??? Here is my code... Code: <LINK href="color.css" rel="stylesheet" type="text/css"> <script type= "text/javascript"> <-- <-![CDATA[ function validatForm() { if (document.forms[0].userName.value == "" ) { alert("Name field cannot be empty."); return false; } //end if if (document.forms[0].userAge.value < 18) alert("You must be 18 or older to join."); return false; } //end if if (document.forms[0].userEmail.value == "" ) { alert("Email field cannot be empty."); return false; } //end if if (document.forms[0].userPassword.value == "" ) { alert("Password field cannot be empty."); return false; } //end if alert("Thank you for filing out the register"); return true; }// end function validatForm // ]]> --> </script> Code: <form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();"> <table> <tr> <td> <label for="userName">Name:</label> </td> <td> <input type="text" name="userName" id="userName"/> </td> </tr> <tr> <td> <label for="userAge">Age:</label> </td> <td> <input type="text" name="userAge" id="userAge"/> </td> </tr> <tr> <td> <label for="userEmail">Email:</label> </td> <td> <input type="text" name="userEmail" id="userEmail"/> </td> </tr> <tr> <td> <label for="userPassword">Password:</label> </td> <td> <input type="text" name="userPassword" id="userPassword"/> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="Send information" /> </td> </tr> </table> </form> Hi Everyone I'm learning Javascript with varying degree's of success but am very much in the early phase. My question/problem is this: [ICODE]<!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>Untitled Document</title> </head> <body> <script language="javascript" type="text/javascript"> var degFahren = new Array(212, "string data", -459.67); var degCent = new Array(); var loopCounter; for(loopcounter =0; loopCounter <= 2; loopCounter++){ if(isNaN(degFahren[loopCounter])){ alert("Data " + degFahren[loopCounter] + " at array index " + loopCounter + " is invalid"); continue; } degcent[loopCounter] = 5/9 * (degFahren[loopCounter] -32); } for (loopCounter =2; loopCounter >=0; loopCounter --){ document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit"); document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br />"); } </script> </body> </html> /ICODE] The following code does not return any errors in my browser but I'm confused since I'm sure I should be seeing an alert box telling me that there is invalid data entered bu this doesn't happen, also as far as I can make out I should only be receiving an error for the 2nd loop but there seem to be an error message returned for all 3 loops?? This is all possibly correct but I'm learning from a book and I have no-one to ask these mundane questions to. Any help would be greatly received. Sara So erm. Hello there. I fail at javascript, and yet, I'm trying it. Anyways, I'm working on this thing. It's an extension for google chrome very similar to firefox plugins and so on. I'm making an extension so that, when installed, it changes the look of facebook completely. I have successfully changed the colors. However, I am having some trouble getting my javascript to change images. If anybody out there has some insight on what I'm doing wrong, I am glad to accept any kind of help that anyone is willing to give me, lol. What I've done so far: I have to change the facebook logo (what I'm trying to do now) and then change the links, and very few more things, and I'm done. Problem: I can't figure out how to change the image. I can change the background color, as you saw earlier. I just need a code to change the image. The CSS behind it is: Code: #pageLogo a{background:#3b5998 url(/rsrc.php/z8S5R/hash/ez3x5cuc.png) no-repeat -21px 0;display:block;position:absolute;height:31px;left:-6px;width:103px;top:10px} and the HTML implementing it is: Code: <h1 id="pageLogo"><a href="http://www.facebook.com/?ref=logo" title="Home" accesskey="1"></a></h1> and my structure of javascript is: Code: for(i=0;i<=document.getElementsByTagName("div").length;i++) { if(document.getElementsByTagName("div")[i].id != null) { if((document.getElementsByTagName("div")[i].id=="blueBar")) { document.getElementsByTagName("div")[i].style.backgroundColor='#B22222'; } if(( document.getElementsByTagName("div")[i].id == "headNavOut")) { document.getElementsByTagName("div")[i].style.backgroundColor='#8B0000'; } } } }); I appreciate any help anyone's willing to give. The following code works as required - Code: if (result.marc.f695.subfields['a'] != "Electronic journals" && result.marc.f695.subfields['a'] != "electronic journals") { return; } However, this isn't the most efficient way to code it, especially as I want to add further possibilities, most beginning with "[Ee]lectronic. I know I need to use regexes, and think the code I need to use is something like /[Ee]lectronic/, but I use JavaScript so rarely that I'm not sure how to build this into the above expression. Can anybody help? |