Small javascript/html that's not working as I think it should - please help

Discussion in 'Javascript' started by gkellymail@gmail.com, Oct 26, 2006.

  1. Guest

    I have a small javascript/html code below that demonstrates that
    problem I'm having in a larger program. I've tried all kinds of things
    to get it to work, but it just won't do what I want. I've tried
    setTimeout, setInterval. In this dumb, but valid example, i want to
    display an iframe that loads google. Before it loads I want to display
    a 'processing' indicator in green in the middle of the window. Then,
    when it is done, it is to turn off the indicator. What is happening is
    that in the doit() function, the processing(true) statement doesn't
    'appear' to run until after the iframe loads. Then it calls the
    processing(false). So, the processing(true) and processing(false)
    'seem' like they are back to back and you never see the 'processing'
    message. Simple question, referencing the doit() function, how do I
    show the 'processing' div, load the iframe, then hide the 'processing'
    div. In my larger app, I'm not using iframes, but I am doing some ajax
    stuff that takes some computing time on the server and I want the user
    to know that it's doing something.

    here is the code
    ----------------------------------
    <html>
    <script>
    function processing( p_flag )
    {
    var v_processingIndicator = document.getElementById( 'Processing'
    );
    if( p_flag ) {
    if( ! v_processingIndicator ) {
    v_processingIndicator = document.createElement( "div" );
    v_processingIndicator.id = 'Processing';
    v_processingIndicator.style.position = 'absolute';
    v_processingIndicator.style.width = '300px';
    v_processingIndicator.style.left =
    (document.body.clientWidth/2) - 150;
    v_processingIndicator.style.top =
    (document.body.clientHeight/2);
    v_processingIndicator.style.zIndex = 10000;
    v_processingIndicator.innerHTML =
    "<center>Processing...</center>";
    v_processingIndicator.style.visibility = 'hidden';
    v_processingIndicator.style.background = 'lightgreen';
    document.body.appendChild( v_processingIndicator );
    }

    v_processingIndicator.style.visibility = 'visible';
    } else {
    v_processingIndicator.style.visibility = 'hidden';
    }
    }

    function doit()
    {
    processing( true );
    document.getElementById( 'iframe' ).src = 'http://www.google.com';
    processing( false );
    }


    </script>

    <body>
    <iframe id='iframe' width='600' height='200'></iframe>
    </body>

    <script>doit();</script>

    </html>

    -------------------------------
    thanks in advance,
    gkelly
    , Oct 26, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:

    > I have a small javascript/html code below that demonstrates that
    > problem I'm having in a larger program. I've tried all kinds of things
    > to get it to work, but it just won't do what I want. I've tried
    > setTimeout, setInterval. In this dumb, but valid example, i want to
    > display an iframe that loads google. Before it loads I want to display
    > a 'processing' indicator in green in the middle of the window. Then,
    > when it is done, it is to turn off the indicator. What is happening is
    > that in the doit() function, the processing(true) statement doesn't
    > 'appear' to run until after the iframe loads.


    Because most browsers will wait for the script to complete before
    updating the screen, which is a good idea if you consider what it might
    look like if you were doing lots of DOM manipluation in a script or
    series of scripts.

    Have your doIt() function use setTimeout() to call a function that
    loads the page into the iFrame and attaches an onload function in the
    iFrame that updates the "processing" mesage, e.g.:

    function doit()
    {
    processing( true );
    setTimeout(function(){
    var iFrame = document.getElementById( 'iframe' )
    iFrame.src = 'http://www.google.com';
    iFrame.onload = function(){processing(false);}
    },10);
    }


    --
    Rob
    RobG, Oct 26, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luis Ferrao
    Replies:
    1
    Views:
    359
    Peter Blum
    Jan 3, 2005
  2. Replies:
    0
    Views:
    599
  3. Replies:
    1
    Views:
    865
    Jack Klein
    Apr 13, 2005
  4. KathyB
    Replies:
    0
    Views:
    123
    KathyB
    Sep 8, 2003
  5. David Mark
    Replies:
    17
    Views:
    235
    David Mark
    Mar 23, 2010
Loading...

Share This Page