...

View Full Version : Problem with setTimeout() makes everything else dissapear



Belloshoes
08-25-2011, 08:20 PM
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

Old Pedant
08-25-2011, 08:37 PM
You can *NOT* use document.write or document.writeln *AFTER* a page has loaded. (That is, after the browser has finished rendering the page...after window.onload time, say.)

If you do so, you WIPE OUT the ENTIRE contents of the page, including even the JavaScript that did the document.write.

You need to find a completely different way to do this.

Belloshoes
08-26-2011, 01:47 PM
Thanks for the reply Old Pedant. I really appreciate it. However, I have tried it out and used document.writeln in another code and everything is stable runs normally. Even if i take the code below and run both div id=6 and div id=8 without using the setTimeout function then they both run fine and don't erase anything (but obviously they both run at the same time which isn't what I want it to do that's why I used setTimeout).

What do you think?

Philip M
08-26-2011, 03:29 PM
I think Old Pedant is right. Using setTimeout() causes the page to reload after 5 seconds, destroying the content and the script. Without setTimeout() the page finishes loading properly and both the tickers are shown. You can easily test this by observation.

Another problem is that you are using the identical id/name ticker8 for the div and the Javascript function. Make the div id Ticker8.

This may be getting closer:-


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_EconomicStats_US.js'></script>
</head>

<body>

<div id="Ticker6">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_TBills.js'></script>
<script type='text/javascript'>
var k = (EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7'));
document.write(k);
</script>
</div>

<div id="Ticker8" style="visibility:hidden">
<script type="text/javascript">
setTimeout("ticker8()", 10000);
function ticker8() {
document.getElementById("Ticker8").style.visibility="visible";
}
var k =(EXk_EconomicStats_US('0199604514','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'3737 37'));
document.write(k);
</script>
</div>
<br>

REST OF THE PAGE HERE

</body>
</html>

Old Pedant
08-26-2011, 09:06 PM
Yes. *BY DEFINITION* the result of a setTimeout runs *after* the page is loaded. Even if you use a one millisecond timeout, the code targeted by the setTimeout won't run until after the page is fully loaded. Which means that any document.write you do as a result of a setTimeout is guaranteed to wipe out the page.

Belloshoes
08-26-2011, 10:37 PM
THANK YOU! THANK YOU! Thank you very much Philip M. And you Old Pedant. Both of you have been extremely helpful.

Philip M. If it's not too much trouble, could you please talk me through (in as much detail as you can) the changes you made and how and why it NOW works with your modification. I would really appreaciate that so that I can better myself, improve and apply it to more divs.

Many Thanks guys

Old Pedant
08-26-2011, 10:54 PM
Philip's code is a bit of a cheat. I'm not 100% sure it really is doing what you want.

If that call to EXk_EconomicStats_US() is time-sensitive (that is, if it matters--to the second--when it is called) then it won't do what you want.

What he is really doing there is calling EXk_EconomicStats_US() for *BOTH* ticker6 and ticker8 WHEN THE PAGE IS LOADED. And then he just keeps ticker8 hidden until the 10 seconds have elapsed. So if was important that ticker8 not even be *initialized* until after the 10 seconds, that code won't work as you want it.

But if that's not important, then his code works fine. And could even be simplified a tiny bit (not enough to worry about).

Philip M
08-27-2011, 08:27 AM
Philip's code is a bit of a cheat. I'm not 100% sure it really is doing what you want.



Neither am I! That's why I said "This may be getting closer:-" :) However, Belloshoes seems to like it.

But why should it matter to the second when the ticker commences? They are just statistics with nothing "live" about them.

Don't see how the code can be simplified in any valuable way. If you mean
var k = (EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7'));
document.write(k);
I always do it like that so that I can insert alert(k); to observe the stuff being loaded.

Old Pedant
08-27-2011, 08:36 AM
DOH on me. I didn't read carefully enough. Thought it was calling the same function, just with different first argument. Ignore my comment re simpler code.

As for the timing stuff: If the charts are static, then why not load AND SHOW them both as the page is loaded in the first place? The purposeful 10 second delay bothered me. But you are probably right; he probably just does it for visual effect.

Philip M
08-27-2011, 08:53 AM
As for the timing stuff: If the charts are static, then why not load AND SHOW them both as the page is loaded in the first place? The purposeful 10 second delay bothered me. But you are probably right; he probably just does it for visual effect.

Well, that is what he had to start with! :) I just about see the point of the visual effect as otherwise the user is trying to read two tickers at once. Sort of.

Belloshoes
08-27-2011, 09:02 AM
Haha......arrrrrre you twwwoooo..... an item?.......seem to be having a bit of a domestic here.

Anyway yes I am very happy with it. Thank you very much guys.
@Philip M I've gone through the code and understood it now, so no explanation required.

Old Pedant
08-28-2011, 05:29 AM
Oh, Philip and I both go way back.

Oh, not together. It's just that we are both, shall we say, more advanced in years than many here?

(We also both happen to love model trains, though Philip is a master and I'm a neophyte.)

(Oh, and Philip is a physician whereas I'm just sick.)

(Did I mention he lives in the UK and I'm in the Seattle, USA, area?)

Philip M
08-28-2011, 08:09 AM
Oh, Philip and I both go way back.

Oh, not together. It's just that we are both, shall we say, more advanced in years than many here?



And sadly we are no longer young enough to know everything. :)

Old Pedant
08-28-2011, 06:55 PM
Love it! My new signature!

Philip M
08-28-2011, 07:52 PM
Actually, thanks to Oscar Wilde. :)

Do you think that we are chronologically challenged? :D:D

Old Pedant
08-28-2011, 07:53 PM
Never! Chronologically advantaged, we are!

Belloshoes
08-29-2011, 09:06 AM
Haha you guys remind me of Jack Lemmon and Walter Mattheu: everytime one says something the other either takes it apart or compliments it.

Okay Einsteins I have another problem with this code now. So now that I've established when I want each ticker to switch from not visible to visible. I now what them to appear ON TOP of each other. Ex: Ticker 1 appears, 45s later Ticker 2 appears on top of it so that now you're not seeing ticker 1 you're only seeing Ticker 2 but in the same location on the page.

Here's what I've got so far.

[CODE]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#Ticker1 {
z-index: 8;
position::absolute;
}
#Ticker2 {
z-index: 7;
position:absolute;
}
#Ticker3 {
z-index: 6;
}
#Ticker4 {
z-index: 5;
}
#Ticker5 {
z-index: 4;
}
#Ticker6 {
z-index: 3;
}
#Ticker7 {
z-index: 2;
}
#Ticker8 {
z-index: 1;
}
</style>
</head>

<body>

<div id="Ticker1">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Forex_Majors9.js'></script>

<script type='text/javascript'>
var k = (EXk_Forex_Majors9('0009801297','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>
</div>
<div id="Ticker2" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Forex_Eur_ME_Af.js'></script>

<script type='text/javascript'>
setTimeout("ticker2()", 45000);
function ticker2() {
document.getElementById("Ticker2").style.visibility="visible";
}
var k =(EXk_Forex_Eur_ME_Af('0005501279','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>

</div><div id="Ticker3" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Index_Majors.js'></script>

<script type='text/javascript'>
setTimeout("ticker3()", 125000);
function ticker3() {
document.getElementById("Ticker3").style.visibility="visible";
}
var k =(EXk_Index_Majors('0008601295','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>
</div><div id="Ticker4" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Commodity_Majors.js'></script>

<script type='text/javascript'>
setTimeout("ticker4()", 164000);
function ticker4() {
document.getElementById("Ticker4").style.visibility="visible";
}
var k =(EXk_Commodity_Majors('0006701289','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>
</div><div id="Ticker5" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_MajorST.js'></script>

<script type='text/javascript'>
setTimeout("ticker5()", 228000);
function ticker5() {
document.getElementById("Ticker5").style.visibility="visible";
}
var k =(EXk_Interest_MajorST('0050701341','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>
</div><div id="Ticker6" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_TBills.js'></script>

<script type='text/javascript'>
setTimeout("ticker6()", 256000);
function ticker6() {
document.getElementById("Ticker6").style.visibility="visible";
}
var k =(EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7'));
document.write(k);
</script>
</div><div id="Ticker7" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_RigCounts.js'></script>

<script type='text/javascript'>
setTimeout("ticker7()", 281000);
function ticker7() {
document.getElementById("Ticker7").style.visibility="visible";
}
var k =(EXk_RigCounts('0166103913','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
document.write(k);
</script>
</div><div id="Ticker8" style="visibility:hidden">
<script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_EconomicStats_US.js'></script>

<script type="text/javascript">
setTimeout("ticker8()", 320000);
function ticker8() {
document.getElementById("Ticker8").style.visibility="visible";
}
var k =(EXk_EconomicStats_US('0199604514','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'3737 37'));
document.write(k);
</script>
</div>
<br>

</body>
</html>

[CODE]



P.S. I watch Grey's Anatomy (Medical Drama set in Seattle) and I plan to visit Seattle someday.

P.P.S Hope you didn't take offense to the Lemmon and Mattheu comment

Old Pedant
08-29-2011, 09:26 AM
Trivial.

All done with CSS.



<style type="text/css">
div#AllTickers {
position: relative;
}

div.ticker {
position: absolute;
display: none;
background-color: white; /* any color, but not transparent */
}
div#Ticker1 { display: block; z-index: 1; }
div#Ticker2 { z-index: 2; }
div#Ticker3 { z-index: 3; }
... etc. ...
div#Ticker8 { z-index: 8; }
</style>

And then, in the <body>, you do


<div id="AllTickers">
<div id="Ticker1" class="ticker">
... code for first ticker ...
</div>
<div id="Ticker2" class="ticker">
... code for second ticker ...
</div>
...etc. ...
<div id="Ticker8" class="ticker">
... code for eighth ticker ...
</div>
</div><!-- end of AllTickers -->

Change the code that makes each one appear from

document.getElementById("Ticker3").style.visibility = "visible";

to


document.getElementById("Ticker3").style.display = "block";


This assumes that all tickers will be the same size!!!

If not, we have to be a tiny bit sneakier.

Philip M
08-29-2011, 09:33 AM
Try setting the previous <div> style to display="none"


<script type='text/javascript'>
setTimeout("ticker2()", 45000);
function ticker2() {
document.getElementById("Ticker2").style.visibility="visible";
document.getElementById("Ticker1").style.display="none";
}

Old Pedant
08-29-2011, 09:36 AM
LOL! Well, heck, that's too simple!

DOH on me. Teach me to try to get elegant. Sheesh.

Philip M
08-29-2011, 09:40 AM
LOL! Well, heck, that's too simple!

DOH on me. Teach me to try to get elegant. Sheesh.

In the spirit of this thread

"It's so simple to be wise. Just think of something stupid to say and say the opposite." - Sam Levenson

Belloshoes
08-29-2011, 10:06 AM
Sorry guys. Slightly confused. So which one do I do?

This one:

<script type='text/javascript'>
setTimeout("ticker2()", 45000);
function ticker2() {
document.getElementById("Ticker2").style.visibility="visible";
document.getElementById("Ticker1").style.display="none";
}


OR this one:

Code:
<style type="text/css">
div#AllTickers {
position: relative;
}

div.ticker {
position: absolute;
display: none;
background-color: white; /* any color, but not transparent */
}
div#Ticker1 { display: block; z-index: 1; }
div#Ticker2 { z-index: 2; }
div#Ticker3 { z-index: 3; }
... etc. ...
div#Ticker8 { z-index: 8; }
</style>


And then, in the <body>, you do
Code:

<div id="AllTickers">
<div id="Ticker1" class="ticker">
... code for first ticker ...
</div>
<div id="Ticker2" class="ticker">
... code for second ticker ...
</div>
...etc. ...
<div id="Ticker8" class="ticker">
... code for eighth ticker ...
</div>
</div><!-- end of AllTickers -->

Change the code that makes each one appear from

Code:
document.getElementById("Ticker3").style.visibility = "visible";
to
Code:
document.getElementById("Ticker3").style.display = "block";

Philip M
08-29-2011, 11:23 AM
Use the one I gave you - it is simpler.

But why not try them both? Then you might learn something. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum