JavaScript - Problem With Settimeout() Makes Everything Else Dissapear
I have 2 news tickers that I want to show one after the other. They are both widgets (javascript) that I grabbed from the stated website. However to get one to run after the other I felt like I needed a setTimeout(). So I made one of them delayed (ticker8) but instead of JUST appearing after 5000 ms, it appears and EVERYTHING ELSE DISAPPEARS. I know that it's something silly I just can't figure out what it is. The HTML code is below.
[CODE] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script LANGUAGE='JavaScript' type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_EconomicStats_US.js'></script> </head> <body> <div id="ticker6"> <script LANGUAGE='JavaScript' type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_TBills.js'></script> <script LANGUAGE='JavaScript' type='text/javascript'> document.writeln(EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7')); </script> </div> <div id="ticker8"> <script type="text/javascript"> setTimeout("ticker8()", 5000); function ticker8() { <!--START theFinancials.com Content--> <!--copyright theFinancials.com - All Rights Reserved--> document.writeln(EXk_EconomicStats_US('0199604514','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'3737 37')); <!--END theFinancials.com Content--> } </script> </div> </body> </html> [CODE] Would really appreciate some help with this one. Many thanks in advance Similar Tutorialshi, i'm making a page with an image on it. when that image is clicked i want it to make one div visible, and also run the javascript function to make a second div visible after 2 seconds. Everything seems to work correctly except that the javascript runs on page load instead of waiting for when the image is clicked. any help much appreciated. thanks! Here's the javascript: <code <script type="text/javascript"> function showIt() { document.getElementById("show_1").style.visibility = "visible"; } setTimeout("showIt()", 2000); </script> </head> </code> Here's the html: <code> <div id="flyer1">content <div id="show_1" style="visibility:hidden">content </div> </div> <div id="image"> <a href="javascript:void(0)" onclick="MM_showHideLayers('flyer1', '','show')"; "showIt()">image</a> </div> </code> I'm working on a disjointed rollover, with several links changing an image in another location. There is a default image that appears when the page opens and whenever you roll off any of the links. Initially, the problem was that mousing from one link to the next caused a quick flash of the default image because there is a little space between these links. To address that, I added a time out to keep the default image from appearing immediately on onmouseout. Now, when I mouse from one link to the next I get a smooth transition, but then the delayed onmouseout function kicks in while still hovering over a link. How can I make hovering over a new link override this delayed onmouseout? Here's the script: Code: <script type="text/javascript"> window.onload = preloader() function preloader(){ var pic1 = new Image(); pic1.src = "images/cover1.jpg"; var pic2 = new Image(); pic1.src = "images/cover2.jpg"; var pic3 = new Image(); pic1.src = "images/cover3.jpg"; var pic4 = new Image(); pic1.src = "images/cover4.jpg"; } function bookInfoSwap(imgSrc,ID,bInfo) { document.getElementById("covers").src = imgSrc; document.getElementById("courseID").innerHTML = ID; document.getElementById("bookInfo").innerHTML = bInfo; } function swapDelay() { setTimeout("bookInfoRevert()",3000); } function bookInfoRevert() { document.getElementById("covers").src = "images/covers.gif"; document.getElementById("courseID").innerHTML = " "; document.getElementById("bookInfo").innerHTML = " "; } </script> ...and a couple of the links: Code: <a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover6.jpg','Self Study Course ID: <br />cos68804','Billstein, <em>A Problem Solving approach to Mathematics for Elementary School Teachers, 9/e and Custom Edition</em>');" onmouseout="swapDelay();" class="courseTab">Math 10/11</a> <a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover4.jpg','Self Study Course ID: <br />cos59796','Sullivan, <em>Statistics: Informed Decisions Using Data, 3/e</em>');" onmouseout="swapDelay();" class="courseTab">Math 21</a> Thanks. Hello all. I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas? here is the HTML: Code: <div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div> <div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div> <div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div> <div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div> here is the JavaScript: Code: function blackit(elemID) { document.getElementById(elemID).style.backgroundColor="#000"; } function fadeit(elemID) { setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000); } there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second. thanks Hello, I have two frames, one to the left, one to the right. The left one contains a form, which I'm using to take in user input, and at the same time to refresh the frame on the right. The left frame's code is: Code: <html> <head> <script type="text/javascript"> function reload_right_frame() { parent.right_frame.location.reload(); } </script> </head> <form method="post"> <input type="submit" value="Enter" onClick="reload_right_frame();"> <input type='text' name='userinput'> </form> <?php echo "You entered: " . $_POST['userinput']; ?> </html> This succeeds in spewing out what the user entered, and simultaneously refreshing the right-hand frame. However, I want there to be a delay in refreshing the right-hand frame, so I changed the left-frame coding as follows: Code: <html> <head> <script type="text/javascript"> function delayed_reload() { var t=setTimeout("reloadframe()",3000); } function reload_right_frame() { parent.right_frame.location.reload(); } </script> </head> <form method="post"> <input type="submit" value="Enter" onClick="delayed_reload();"> <input type='text' name='userinput'> </form> <?php echo "You entered: " . $_POST['userinput']; ?> </html> This is where it stops working. The right-hand frame is not reloaded at all. I want it to reload after 3 seconds. The user input text is spewed out, though. If I change the input type from "submit" to "button", however, the delayed reload of the right-hand frame works fine, but then the user input text fails to show. How can I make both form and delayed reload both work? I'm probably missing something obvious. Thanks in advance for any help! Hello everybody I need your help in this problem At first, this is the code used HTML Code PHP Code: <input type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div><br /> <input type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div> JavaScript Code PHP Code: function fadeIn(elem){ element = elem.nextSibling; elemOpacity = element.style.opacity; element.innerHTML = elemOpacity; if (elemOpacity < 1.0) element.style.opacity = parseFloat(elemOpacity) + 0.1; timeIn = setTimeout(fadeIn, 100); } I have used the opacity property to make fading element like fadeIn() function in jquery , and i have used onfocus event to execute the code . Problem exists in setTimeout function, this function Does not work But the code works without this function What is the cause of the problem , Please help me im using a mootools popup box to play a youtube video its using javascript to control the "close" button.. and the close button uses this function Code: clickClose: function(){ $(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){ }).start(this.opacity,0); this.box.setStyle('display','none'); this.isVisible = false; }, seeing as ow i have a playing video in the box...that simply wasnt enough..because the video would continue playing after the box is closed... (you would ehar audio) so i modified the code by adding Code: this.box.setStyle('display','none'); this did the TRICK!!! ....in firefox.....sadly Internet Explorer is refusing to destroy that video upon click.... are there any ideas as to how i can destroy that video across all browsers when that button is clicked....i say "destroy" because im mad! lol but i simply want the video to dissapear...off the screen and off the site with no mysterious audio afterwards. Hi - if you click on any of these radio boxes an effect happens whereby content is pushed down. Can you tell me what causes this? http://www.emailcraft.com/order-now.html The reason I ask is because I am after this effect and am looking for someone to code it for me - but am not sure how to describe it - thanks a lot wait... why am i here???
I have created a popup for music on a site and works fine in firefox. when I pull the site up in IE8 it makes a noise and thats it. the site: http://www.brumarestate.com/ Code: var gmyWin=null; function popmusic(winURL, winName, winFeatures, winObj) { var theWin; // this will hold our opened window // first check to see if the window already exists if (winObj != null) { // the window has already been created, but did the user close it? // if so, then reopen it. Otherwise make it the active window. if (!winObj.closed) { winObj.focus(); } // otherwise fall through to the code below to re-open the window } // if we get here, then the window hasn't been created yet, or it // was closed by the user. theWin = window.open(winURL, winName, "resizable=0,location=0,status=0,scrollbars=0,width=190,height=25"); return theWin; } and of course onload in body tags <body onLoad="return popmusic('music/music.html')"> any idea's, thanks in advance Hi trying to load a random swf files using setTimeout please help Code: </head><script type="text/javascript"> var numberOfSongs = 3 var sound = new Array(numberOfSongs+1) sound[1]= "number/1.mp3" sound[2]= "number/2.mp3" sound[3]= "number/3.mp3" function randomNumber(){ var randomLooper = -1 while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1)) } return randomLooper } var randomsub = randomNumber() var soundFile = sound[randomsub] document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=false>') setTimeout(randomNumber,4000); </script> <body onload="randomNumber()"> Hello guys I need to get something fun! with setTimeout function! I am n00b! so be patent please. I need when <body onload="Myfunc();"> fires, that function should show "Please wait...!" or "Loading...". for , say 5 seconds!. then it disappear. I used setTimeout with that but it didn't do what I wanted! here is my code: PHP Code: function Myfunc(){ document.getElementById("ss2").innerHTML = "Loading..."; setTimeout("Myfunc();", 5000); } // where id="ss2" is the place to display the string "loading..." ! and a one more question ! can I do something like a while loop! where it holds *i* value as seconds! and for every second it passes it should print out a string I make it up ! let say loop for 3 seconds ! So, when seconds = 0 then display "string of second 0" and stick it in there, then go to the next second when it is exactly = 1 then display "new line with string of second 1" and stick it in there, then do to the last second when it is exactly = 2 then display " new line with string of second 2" and stick it in there, exit the loop! is there anyway to do that? please note that I am a n00bie ! help is much appreciated ! Okay, for some reason the setTimeout isn't working for me, and I have no idea why. I've tried everything and Googled even more. If anyone has any ideas, I'll be grateful Code: function display(min,sec) { if (sec <= 0) { sec=60; min-=1; } if (min <= -1) { sec=0; min=0; tEnd(); } else { sec = sec-1; } if (sec<=9) { sec = "0" +sec; } document.form.time.value=min+":"+sec; SM = window.setTimeout("display("+min+","+sec+")",1000); } function tEnd() { window.clearTimeout(SM); alert('Your time is up!'); } Thanks in advance. Hello - I've got this lovely little animation that slides some div fields to the right a short distance. Everything works except the setTimeout (located in the SlideIn function). It simply 'jumps' without taking any time at all. I've tried a bunch of stuff: changed the amount of time from 100 to 10000 changed it from var t = setTimeout("SlideIn()", 1000) SlideIn with/without the brackets, with/without the quotation marks. SlideIn() SlideIn(i) SlideIn(label_id_fixed) SlideIn(label_id_no) Just about at the end of my rope, and so many different combinations I'm forgetting which ones I've tried and which I haven't. I know it is looping through because it gets to the end position and allows the other JavaScript functions to work ok. So it is not getting 'stuck' or anything like that. Here is the complete code (there is a style sheet located separately). Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="class.css" /> </head> <script type="text/javascript"> //<![CDATA[ window.onload=starter; function starter(){ collapseMenu(); SetUpAnimation(); } function SetUpAnimation(){ if (document.querySelectorAll) { labels = document.querySelectorAll('div.label'); } else if (document.getElementsByClassName) { labels = document.getElementsByClassName('label'); } //loops through the labels if (labels){ for (var i=1; i <= labels.length; i++) {SlideIn(i); } } } function SlideIn(label_id_no){ var label_id_fixed = label_id_no; var endPos = 150; var currentPos = 0; for (currentPos = 1; currentPos < 60; currentPos++){ var label_id_name = "label" + label_id_fixed; document.getElementById(label_id_name).style.left = currentPos + "px"; setTimeout("SlideIn", 1000); } } function collapseMenu(){ var elems = null; var labels = null; if (document.querySelectorAll) { elems = document.querySelectorAll('div.elements'); labels = document.querySelectorAll('div.label'); } else if (document.getElementsByClassName) { elems = document.getElementsByClassName('elements'); labels = document.getElementsByClassName('label'); } if (elems){ for (var i=0; i < elems.length; i++) { elems[i].style.display="none"; } for (var i=0; i < labels.length; i++) { labels[i].onclick=showBlock; } } } function showBlock(evnt){ var theEvent = evnt ? evnt : window.event; var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement; var itemId = "elements" + theSrc.id.substr(5,1); var item = document.getElementById(itemId); if (item.style.display=='none'){ item.style.display='block'; }else{ item.style.display='none'; } } //]]> </script> </head> <body> <div class="label" id="label1">this is a label</div> <div class="elements" id="elements1"> <p>painting</p><br /> <p>photography</p><br /> </div> <div class="label" id="label2">this is another label</div> <div class="elements" id="elements2"> <p>sculpture</p><br /> <p>ceramics</p><br /> </div> </body> </html> Is there another JS function that I can use to force a time delay without having the code continue to run? I'm using the setTimeout() function but the call to this function doesn't stop the code flow. I need to stop the code flow while waiting. I guess I need a Sleep() type of JS function. What I'm trying to do is display some blank text on the screen using a for loop (I'm using <BR> to give the appearance of "opening up" a vertical window section in the browser) and I need this 'text' to complete before allowing the following code in the function to execute. The following code will display a Table with rows of data. I'm trying to use a timing function to give a visual impression of a window opening up just before the data displays. Thanks... Hello I am just learning, what am I doing wrong here , I'm trying to display an image after 3 seconds after the page opens with js from an external file listed below: Code: <html> <title>Insert Page</title> <body> var call; call=("<?php echo $image1;?>"); function myfunction() { setTimeout =(call, 3000); } document.write(myfunction); </body> </html> Hi all, I am trying to do a simple "animation" of the background color of a button. I want it to do 10 different colors in the course of 1 second. I have a loop like this (pseudo code): Code: var e = "the button element"; var c = 10; while (c--) { setTimeout(function(){ e.style.backgroundColor=(random color); }, (c * 100)); } I expect that 10 instances of "setTimeout" would be created, each one timing out 0.1 seconds later than the previous one, giving me an "animation" of 10 different colors over the course of 1 second. Strangely, it doesn't work. All it does is WAIT one second, then set the background to the LAST color. What am I doing wrong? I can't see it. Thanks! -- Roger Edit: I also tried to do the loop forward instead... no difference. Hi all, I've noticed that setTimeout seems to return a simple integer as it's "id" which can be used to clear the timeout ahead of time. So, in order to have multiple setTimeouts called (which requires the previous one to be cleared before the next one is called), I simply did this: Code: clearTimeout(setTimeout(function() { /* some code */ }, 1000) -1); Note the "-1"... each time this code is called, it starts a new setTimeout and clears "instance-1" which is supposed to be the previous instance. The idea is that this block can be called hundreds of times, and when the calling finally stops, the inner code is executed 1 second later. This SEEMS to be working (yes, even in MSIE!). Question is, am I fooling myself? Is this wrong? If so, what's the right way to do it? Thanks... -- Roger (btw, the actual use of this is dynamic resizing of a DIV by dragging the corner with the mouse.... I want the actual PX size to display live while resizing, then after resizing stops, the size display goes away 1 second later... in case you were wondering). Code: function funt() { var link = document.getElementsByClassName("class")[0]; if(link != null) { var i = 0; if(check != link.childNodes[i]) { link.childNodes[i].click(); check = link.childNodes[i]; } else { window.location = "website" } } else { if(document.getElementById('enbut').value != "some value") { document.getElementById('id').click(); } window.location = "website" } t=setTimeout("funt()",3000); } with this i'm trying to get it to loop every 3 seconds using the settimeout function at the end of the loop. each time i run this it just runs once and exits. anyone know what i'm doing wrong? I'm trying to set a timer when someone moves off of an image. When I try my event without the timer there are no problems but it throws syntax or object expected errors (if I play with the quotes some) when I add in the timer. This is inline code on the image. onMouseout="newsTimer = setTimeout("Effect.toggle('news', 'slide')", 500)"; It is likely something simple I am overlooking but I cannot find any answers after a long search. Thank you for any and all help. So I have a very simple block of code: Code: function successfulReg() { alert(1); // $.colorbox({ html: '<p>Registration successful!</p>' }); } if ($('#regSuc').size()) setTimeout('successfulReg', 1000); If the regSuc item exists (1 second after the page loads), I want to bring up a lightbox. As I couldn't get this to work, I tried to get an alert to show up. This did not work either. I changed the setTimeout to Code: if ($('#regSuc').size()) setTimeout('alert(1), 1000); Which did work. And I tried successfulReg and succesfulReg(), neither of which worked. Am I missing some basic element to getting a timeout to work? |