/    Sign up×
Community /Pin to ProfileBookmark

setTimout issue in IE

Copy linkTweet thisAlerts:
Sep 02.2011

Hi all

This code works in other major browsers but not IE (sound familiar??)

I have a DIV with a image. I’d like it to disappear after 10 seconds. In IE the image dispalys for a fraction of a second and disappears (rather than the 10 seconds…)

Any ideas??

[CODE]

<script type=”text/javascript”>
var t=”document.getElementById(‘spinner’).style.display=’none'”
</script>

<body onload=”setTimeout(t,10000)”>

[/CODE]

thanks

Damon

to post a comment
JavaScript

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadSep 02.2011 — Hi there dtayl20,

try it like this....
[color=navy]
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="language" content="english"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;style type="text/css"&gt;
.hide{
display:none;
}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
function init(){
document.getElementById('spinner').className='hide';
}
window.addEventListener?
window.addEventListener('load',function(){setTimeout(function(){init()},10000)},false):
window.attachEvent('onload',function(){setTimeout(function(){init()},10000)});
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id="spinner"&gt;
&lt;img src="http://www.coothead.co.uk/images/anim1.gif" alt=""&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@AtticusWSep 02.2011 — or simply...

function init(){

document.getElementById('spinner').className='hide';

}

<body onload="init()">
Copy linkTweet thisAlerts:
@aj_nscSep 02.2011 — or simply...

function init(){

document.getElementById('spinner').className='hide';

}

<body onload="init()">[/QUOTE]

That won't work, it will hide it immediately. I have a hunch maybe you meant this:

[code=html]
<body onload="setTimeout(function() { init(); },10000)">
[/code]
Copy linkTweet thisAlerts:
@cootheadSep 02.2011 — Hi there dtayl20, AtticusW and aj_nsc,

personally, I do not advocate the use of...
[color=navy]&lt;body onload=".........&gt;[/color]
[color=navy]"The more that you can actually separate your Javascript from your HTML, the easier to maintain that your web pages will

be and the easier it will be to reuse your javascripts in multiple pages with minimum work to attach them to the page."

[/color][/quote]
[b]Further reading[/b]:-
[list]
  • [*][url=http://javascript.about.com/library/blseparate.htm]Attaching Event Handlers in Javascript[/url]
    • [/list]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @AtticusWSep 02.2011 — That won't work, it will hide it immediately. I have a hunch maybe you meant this:

    [code=html]
    <body onload="setTimeout(function() { init(); },10000)">
    [/code]    [/QUOTE]

    Yup, i couldnt find the edit button on my post, I meant to include the timeout
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 03.2011 — Hi Guys

    Thanks for your solutions... all of which work. What I failed to mention was the I am using an Iframe with a PDF loading into the iFrame. It would be nice if I could detect when the pdf finishes loading... but I've given up on that fantasy...

    Instead I'm working with a bad work around using setTimeout.

    Here's my code so far. Essentially i have 2 layered div's using z-index. I set the timeout for 20 seconds, hide the spinner and then show the iFrame. It get messy when the iframe takes longer to load... the user sees nothing and thinks its not working... I'm not sure whether I should settle with this... any ideas are greatly appreciated.

    Here's a link to a working page http://safenewsletters.com/SchoolNewsletter.asp?NID=674&url=http://www.swanbourneprimary.wa.edu.au/public/documents/4/Sports%20Page%20No%205%20010911.pdf

    here's the code

    [CODE]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Free School Newsletters | Safe Newsletters for Schools, Teachers, Students and Parents</title>
    <meta name="keywords" content="school,newsletters,parent,teachers,schools,news">
    <meta name="description" content="Free School Newsletters for Schools and Parents. Open a free account and start sending your school newsletters today">


    <link rel="canonical" href="http://safenewsletters.com"/>

    <script type="text/javascript">
    function test()
    {
    //document.getElementById('spinner').style.display='none';
    document.getElementById('pdf').style.display='block';
    }
    </script>


    </head>


    <body onload="setTimeout('test()',20000);">


    <p>Your School Newsletters are powered by
    <a target="_blank" href="http://safenewsletters.com">Safe Newsletters</a> | Check out our
    <a target="_blank" href="http://www.facebook.com/pages/Free-School-Newsletters/198310076880025">facebook page</a>


    <p>

    <div id="spinner" style="display:block;z-index:10;position:absolute;top:100px;width:100%;background:white;">
    <p align="center">
    <img src="/images/spinner.gif"></p>
    <p align="center">
    Be patient. Your Newsletter will continue loading...<br>
    Large newsleters may take a while ... but it will open...

    </p>
    <p align="center">
    </p>
    </div>

    <div id="pdf" style="display:none;z-index:10;position:absolute;width:99%;height:85%">
    <iframe name="I1" src="<%=request.querystring("url")%>" height="100%" width="100%" allowtransparency="true">
    Your browser does not support inline frames or is currently configured not to display inline frames.
    </iframe>

    <p align="center"><font face="Times New Roman">© Safe Newsletters</font></p>
    </div>


    </body>


    </html>

    [/CODE]
    Copy linkTweet thisAlerts:
    @cootheadSep 03.2011 — Hi there dtayl20,

    try it like this...
    [color=navy]
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;

    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
    &lt;meta name="language" content="english"&gt;
    &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;

    &lt;title&gt;&lt;/title&gt;

    &lt;style type="text/css"&gt;
    html,body {
    height:100%;
    margin:0 10px;
    }
    #links {
    padding:10px 0 80px 0;
    }
    #spinner {
    text-align:center;
    }
    #pdf {
    width:99%;
    height:85%;
    }
    .hide {
    display:none;
    }
    .vis {
    visibility:hidden;
    }
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
    function init(){
    document.getElementById('spinner').className='hide';
    document.getElementById('myiframe').className='';
    }
    window.addEventListener?
    window.addEventListener('load',init,false):
    window.attachEvent('onload',init);
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id="links"&gt;Your School Newsletters are powered by
    &lt;a target="_blank" href="http://safenewsletters.com"&gt;Safe Newsletters&lt;/a&gt; | Check out our
    &lt;a target="_blank" href="http://www.facebook.com/pages/Free-School-Newsletters/198310076880025"&gt;facebook page&lt;/a&gt;
    &lt;/div&gt;

    &lt;div id="spinner"&gt;
    &lt;img src="http://safenewsletters.com/images/spinner.gif" alt=""&gt;
    &lt;p&gt;
    Be patient. Your Newsletter will continue loading...&lt;br&gt;
    Large newsleters may take a while ... but it will open...
    &lt;/p&gt;
    &lt;/div&gt;

    &lt;div id="pdf"&gt;
    &lt;iframe id="myiframe" class="vis" name="I1" src="http://www.swanbourneprimary.wa.edu.au/public/documents/4/Sports%20Page%20No%205%20010911.pdf" width="100%" height="100%"&gt;
    Your browser does not support inline frames or is currently configured not to display inline frames.
    &lt;/iframe&gt;
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 04.2011 — Hi Coothead

    Thanks again for your code.

    It seems that the iframe loads... but the pdf document still takes a while to appear. I'm assuming that the browser has detected the iframe and as such hides the spinner leaving a blank screen until the pdf loads.

    That's why I went for the Settimout option. This way I could have the spinner spin for 20 seconds and (hopefully) the iFrame will have fully loaded the pdf within 20 seconds...

    It would be nice if your code could detect when the pdf loads inside the iFrame...

    I'm still stuck on this one...
    Copy linkTweet thisAlerts:
    @007JulienSep 04.2011 — This page suggests this script witch works in all modern browsers (IE, Mozilla, Safari,Op&#233;ra and Google Chrome).
    [code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>

    <style type="text/css">html, body{height:100&#37;;margin:0 10px;}
    #links{padding:10px 0 80px 0;}
    #spinner{text-align:center;}
    #pdf{width:99%;height:85%;}
    .hide{display:none;}
    .vis{visibility:hidden;}
    </style>
    </head>
    <body>
    <div id="links">Your School Newsletters are powered by
    <a target="_blank" href="http://safenewsletters.com">Safe Newsletters</a> | Check out our
    <a target="_blank" href="http://www.facebook.com/pages/Free-School-Newsletters/198310076880025">facebook page</a>
    </div>
    <div id="spinner">
    <img src="http://safenewsletters.com/images/spinner.gif" alt="">
    <p>
    Be patient. Your Newsletter will continue loading...<br>
    Large newsleters may take a while ... but it will open...
    </p>
    </div>
    <div id="pdf">
    <iframe id='myiframe' class="vis" name="I1" src="http://www.swanbourneprimary.wa.edu.au/public/documents/4/Sports%20Page%20No%205%20010911.pdf" width="100%" height="100%">
    Your browser does not support inline frames or is currently configured not to display inline frames.
    </iframe>
    </div>
    <script type="text/javascript">
    document.getElementsByTagName('iframe')[0].onload = function() {

    document.getElementById('spinner').className='hide';
    document.getElementById('myiframe').className='';
    }
    </script>
    </body>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 05.2011 — 007Julien

    So close...

    I read somewhere the other day that your method works well when using iframes from ones own site. But because I'm loading in an iframe from a different site... its not working so well. It seems that once the iframe is detected... the spinner hides and we see nothing.. In FF the spinner didn't hide at all.

    I'm still stuck...

    Thanks for you ideas!
    Copy linkTweet thisAlerts:
    @KorSep 05.2011 — But because I'm loading in an iframe from a different site... its not working so well.[/QUOTE]
    It won't work at all. There is no possible JavaScript full relationship between documents which do not belong to the same domain, for obvious security reasons.

    And a note: don't use a link toward a commercial site in your signature! For the moment I have deleted yours.
    Copy linkTweet thisAlerts:
    @007JulienSep 05.2011 — There is no possible JavaScript full relationship between documents which do not belong to the same domain[/QUOTE]

    Yes, obviously. Is an onload event on an iframe a relationship between documents ? That is the question ?

    The link I give display : [I]&#171; Run the example above. You&#8217;ll see that only the iframe attribute works, because it doesn&#8217;t depend on cross-domain access policy like setting onload on a window from another domain. &#187;[/I]

    My suggest work fine (with files or on a local server) with Internet Explorer, Google Chrome, Safari and Opera...

    The problem is Firefox ?
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 05.2011 — 007Julien and KOR

    Thanks for all your help. I had a suspicion that it wouldn't work...

    @KOR is there a policy in the TOS somewhere against links?? Can you point me toward the relevant policy? I may have missed it.

    The link is my link for my own business.

    Thanks again for your help
    Copy linkTweet thisAlerts:
    @KorSep 05.2011 — 007

    @KOR is there a policy in the TOS somewhere against links?? Can you point me toward the relevant policy? I may have missed it. [/QUOTE]
    As a super moderator I decide which is the relevant policy, so you may take my word for granted. Anyway:

    http://www.internet.com/Internetcom/Door/41221
    Copy linkTweet thisAlerts:
    @KorSep 05.2011 — 
    The link is my link for my own business.[/QUOTE]
    If your business would have been related with the web designing, programming or IT, and would have not been a commercial (selling/buying) affair, would be OK. Unfortunately, yours fits neither.
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 05.2011 — Oh.

    I'm a super moderator too and I usually allow a little SEO link juice to those who make genuine contributions to the board. In fact I encourage it. It attracts better quality posts if you give something back.

    Anyway not to worry. Your business model is clearly different.

    Thanks for your help.
    Copy linkTweet thisAlerts:
    @KorSep 05.2011 — Oh.

    I'm a super moderator too and I usually allow a little SEO link juice to those who make genuine contributions to the board.[/QUOTE]
    We might adopt that system, also... But, in your case, we can not talk about genuine contributions, as you have posted here only 9 times since 2009...:rolleyes:
    Copy linkTweet thisAlerts:
    @dtayl20authorSep 07.2011 — KOR

    That's right... but you have to remember that just because I'm not a regular poster doesn't mean that I don't contribute. I'm not a javascript programmer... I'm an asp programmer who dabbles only a little bit with javascript. When I do come up against a javascript issue... I turn to webdeveloper.

    I value the people who take the time to help me out. I'd like to feel valued too.

    Thanks again
    ×

    Success!

    Help @dtayl20 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...