How to overwrite value in id?

Discussion in 'Javascript' started by white lightning, Sep 27, 2007.

  1. I have a simple piece of code that does the preloading of images... i
    got it from dynamic drive website.

    In the code below, <font size="4" id="preload_area">Please be patient
    while some images are being preloaded...</font>, once the preloading
    is done, I want to be able to replace the above text with another
    text... I tried to do this:
    document.getElementById("preload_area").innerHTML = "Done"; but it
    doesn't work...

    How can i get it work?



    the enitre code is below:

    <html>
    <head>
    <title>Preload Image Page</title>

    <script language="JavaScript1.1">
    <!-- begin hiding

    /*
    Preload Image With Update Bar Script (By Marcin Wojtowicz
    [])
    Submitted to and permission granted to Dynamicdrive.com to feature
    script in it's archive
    For full source code to this script and 100's more, visit http://dynamicdrive.com
    */

    // You may modify the following:
    //var locationAfterPreload = "http://www.hotmail.com" // URL of the
    page after preload finishes
    var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as
    you want)
    var yourImages = new Array("http://tbn0.google.com/images?
    q=tbn:_fmklChPp2nVSM:http://www.marcreichelt.de/spezial/firefox/
    firefox_huge.png","http://tbn0.google.com/images?
    q=tbn:WRDX3Ie8qhmgaM:http://mkweb.bcgsc.ca/circos/images/circos-sample-
    huge-15.png", "http://tbn0.google.com/images?
    q=tbn:DOajcO-5Qh0BMM:http://www.imaging-resource.com/PRODS/XTI/
    zxti_seethru_huge.jpg", "http://images.google.com.au/imgres?
    imgurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/d0-bac-z2-
    huge.png&imgrefurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/
    &h=3504&w=4779&sz=5251&hl=en&start=34&tbnid=j89QabPXfXISAM:&tbnh=110&tbnw=150&prev=/
    images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%26ndsp%3D18%26svnum
    %3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
    %3Dorg.mozilla:en-US:eek:fficial%26sa%3DN");

    // Do not modify anything beyond this point!
    if (document.images) {
    var dots = new Array()
    dots[0] = new Image(1,1)
    dots[0].src = "black.gif" // default preloadbar color (note: You can
    substitute it with your image, but it has to be 1x1 size)
    dots[1] = new Image(1,1)
    dots[1].src = "blue.gif" // color of bar as preloading progresses
    (same note as above)
    var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/
    yourImages.length),currCount = 0
    var loaded = new Array(),i,covered,timerID
    var leftOverWidth = lengthOfPreloadBar%coverage
    }
    function loadImages() {
    for (i = 0; i < yourImages.length; i++) {
    preImages = new Image()
    preImages.src = yourImages
    }
    for (i = 0; i < preImages.length; i++) {
    loaded = false
    }
    checkLoad()
    }
    function checkLoad() {
    if (currCount == preImages.length) {
    location.replace(locationAfterPreload)
    return
    }
    for (i = 0; i <= preImages.length; i++) {
    if (loaded == false && preImages.complete) {
    loaded = true
    eval("document.img" + currCount + ".src=dots[1].src")
    currCount++
    }
    }
    timerID = setTimeout("checkLoad()",10)
    }
    // end hiding -->
    </script>

    </head>

    <body bgcolor="#FFFFFF">

    <center>
    <font size="4" id="preload_area">Please be patient while some images
    are being preloaded...</font><p>
    0%
    <script language="JavaScript1.1">
    <!-- begin hiding
    // It is recommended that you put a link to the target URL just in
    case if the visitor wants to skip preloading
    // for some reason, or his browser doesn't support JavaScript image
    object.
    if (document.images) {
    var preloadBar = ''
    for (i = 0; i < yourImages.length-1; i++) {
    preloadBar += '<img src="' + dots[0].src + '" width="' + coverage +
    '" height="' + heightOfPreloadBar + '" name="img' + i + '"
    align="absmiddle">'
    }
    preloadBar += '<img src="' + dots[0].src + '" width="' +
    (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '"
    name="img' + (yourImages.length-1) + '" align="absmiddle">'
    document.write(preloadBar)
    loadImages()
    }
    document.getElementById("preload_area").innerHTML = "Done";
    // end hiding -->
    </script>
    </center>

    </body>
    </html>

    If you want to run the code, you need to have images. you can get the
    bar.zip file from http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

    thanks
     
    white lightning, Sep 27, 2007
    #1
    1. Advertising

  2. white lightning

    David Mark Guest

    On Sep 26, 10:45 pm, white lightning <> wrote:
    > I have a simple piece of code that does the preloading of images... i
    > got it from dynamic drive website.


    That's your first mistake. Delete that site from your bookmarks.

    >
    > In the code below, <font size="4" id="preload_area">Please be patient
    > while some images are being preloaded...</font>, once the preloading


    This looks like a typical Dynamic Drive script (most appear to have
    been written before the turn of the century.)

    > is done, I want to be able to replace the above text with another
    > text... I tried to do this:
    > document.getElementById("preload_area").innerHTML = "Done"; but it
    > doesn't work...
    >
    > How can i get it work?
    >
    > the enitre code is below:


    Oh good.

    >
    > <html>
    > <head>
    > <title>Preload Image Page</title>
    >
    > <script language="JavaScript1.1">
    > <!-- begin hiding


    Of course. What are they hiding this from?

    >
    > /*
    > Preload Image With Update Bar Script (By Marcin Wojtowicz
    > [])
    > Submitted to and permission granted to Dynamicdrive.com to feature
    > script in it's archive


    It's (sic) archive is a garbage heap.

    > For full source code to this script and 100's more, visithttp://dynamicdrive.com
    > */


    Better yet don't. And isn't the "full source" right here?

    >
    > // You may modify the following:
    > //var locationAfterPreload = "http://www.hotmail.com" // URL ofthe
    > page after preload finishes


    Oh great. A preloader that causes your site to break when scripting
    is disabled. And how do I know it will break the back button in the
    process?

    > var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    > var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    > // Put the URLs of images that you want to preload below (as manyas
    > you want)
    > var yourImages = new Array("http://tbn0.google.com/images?
    > q=tbn:_fmklChPp2nVSM:http://www.marcreichelt.de/spezial/firefox/
    > firefox_huge.png","http://tbn0.google.com/images?
    > q=tbn:WRDX3Ie8qhmgaM:http://mkweb.bcgsc.ca/circos/images/circos-sample-
    > huge-15.png", "http://tbn0.google.com/images?
    > q=tbn:DOajcO-5Qh0BMM:http://www.imaging-resource.com/PRODS/XTI/
    > zxti_seethru_huge.jpg", "http://images.google.com.au/imgres?
    > imgurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/d0-bac-z2-
    > huge.png&imgrefurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/
    > &h=3504&w=4779&sz=5251&hl=en&start=34&tbnid=j89QabPXfXISAM:&tbnh=110&tbnw=1­50&prev=/
    > images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%26ndsp%3D18%26svnum
    > %3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
    > %3Dorg.mozilla:en-US:eek:fficial%26sa%3DN");
    >
    > // Do not modify anything beyond this point!


    It's a pat hand is it?

    > if (document.images) {


    Something tells me this is a "feature test" for the Image constructor.

    > var dots = new Array()
    > dots[0] = new Image(1,1)
    > dots[0].src = "black.gif" // default preloadbar color (note: You can
    > substitute it with your image, but it has to be 1x1 size)


    Isn't this past the point of no modification?

    > dots[1] = new Image(1,1)
    > dots[1].src = "blue.gif" // color of bar as preloading progresses
    > (same note as above)


    Clearly this script predates CSS.

    > var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/
    > yourImages.length),currCount = 0
    > var loaded = new Array(),i,covered,timerID
    > var leftOverWidth = lengthOfPreloadBar%coverage}
    >
    > function loadImages() {
    > for (i = 0; i < yourImages.length; i++) {
    > preImages = new Image()
    > preImages.src = yourImages
    > }
    > for (i = 0; i < preImages.length; i++) {
    > loaded = false
    > }
    > checkLoad()}


    This guy's semi-colon key is broken.

    >
    > function checkLoad() {
    > if (currCount == preImages.length) {
    > location.replace(locationAfterPreload)


    At least he didn't break the back button.

    > return


    This line is orphaned.

    > }
    > for (i = 0; i <= preImages.length; i++) {


    Less than or equal to the length?!

    > if (loaded == false && preImages.complete) {
    > loaded = true
    > eval("document.img" + currCount + ".src=dots[1]..src")


    This is poor even by Dynamic Drive standards.

    > currCount++
    > }
    > }
    > timerID = setTimeout("checkLoad()",10)}
    >
    > // end hiding -->


    Marcin Wojtowicz has learned the first lesson of how not to be seen.

    > </script>
    >
    > </head>
    >
    > <body bgcolor="#FFFFFF">


    Definitely predates CSS.

    >
    > <center>
    > <font size="4" id="preload_area">Please be patient while some images
    > are being preloaded...</font><p>
    > 0%
    > <script language="JavaScript1.1">


    And NN4 apparently.

    > <!-- begin hiding
    > // It is recommended that you put a link to the target URL just in
    > case if the visitor wants to skip preloading
    > // for some reason, or his browser doesn't support JavaScript image
    > object.


    But you don't know if it supports the "image object" as you only
    checked document.images.

    > if (document.images) {
    > var preloadBar = ''
    > for (i = 0; i < yourImages.length-1; i++) {
    > preloadBar += '<img src="' + dots[0].src + '" width="' + coverage +
    > '" height="' + heightOfPreloadBar + '" name="img' + i + '"
    > align="absmiddle">'
    > }
    > preloadBar += '<img src="' + dots[0].src + '" width="' +
    > (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '"
    > name="img' + (yourImages.length-1) + '" align="absmiddle">'
    > document.write(preloadBar)
    > loadImages()}
    >
    > document.getElementById("preload_area").innerHTML = "Done";


    This is obviously misplaced. Why bother updating the caption anyway
    as the script navigates away from the page if and when it thinks it is
    done (assuming it works at all.)

    > // end hiding -->
    > </script>
    > </center>
    >
    > </body>
    > </html>
    >
    > If you want to run the code, you need to have images. you can get the


    I don't and you don't need the images.

    > bar.zip file fromhttp://www.dynamicdrive.com/dynamicindex4/preloadimage.htm
    >
    > thanks


    Don't use this (or anything like it) under any circumstances.
     
    David Mark, Sep 27, 2007
    #2
    1. Advertising

  3. You haven't given any solution to my problem apart from commenting on
    the code. Yes I know the way the code is written is not perfect and I
    will be fixing a lot of it for my final use. All i want to know is how
    to overwrite the text after preloading is complete. And you may have
    noticed that i have already commented out the line:
    //var locationAfterPreload

    and i also got rid of the line that redirects the page to another
    site.. My objective is to have a simple preloader and once the
    preloading is done, i want to indicate the preloading is done.


    cheers





    On Sep 27, 1:24 pm, David Mark <> wrote:
    > On Sep 26, 10:45 pm, white lightning <> wrote:
    >
    > > I have a simple piece of code that does the preloading of images... i
    > > got it from dynamic drive website.

    >
    > That's your first mistake. Delete that site from your bookmarks.
    >
    >
    >
    > > In the code below, <font size="4" id="preload_area">Please be patient
    > > while some images are being preloaded...</font>, once the preloading

    >
    > This looks like a typical Dynamic Drive script (most appear to have
    > been written before the turn of the century.)
    >
    > > is done, I want to be able to replace the above text with another
    > > text... I tried to do this:
    > > document.getElementById("preload_area").innerHTML = "Done"; but it
    > > doesn't work...

    >
    > > How can i get it work?

    >
    > > the enitre code is below:

    >
    > Oh good.
    >
    >
    >
    > > <html>
    > > <head>
    > > <title>Preload Image Page</title>

    >
    > > <script language="JavaScript1.1">
    > > <!-- begin hiding

    >
    > Of course. What are they hiding this from?
    >
    >
    >
    > > /*
    > > Preload Image With Update Bar Script (By Marcin Wojtowicz
    > > [])
    > > Submitted to and permission granted to Dynamicdrive.com to feature
    > > script in it's archive

    >
    > It's (sic) archive is a garbage heap.
    >
    > > For full source code to this script and 100's more, visithttp://dynamicdrive.com
    > > */

    >
    > Better yet don't. And isn't the "full source" right here?
    >
    >
    >
    > > // You may modify the following:
    > > //var locationAfterPreload = "http://www.hotmail.com" // URL of the
    > > page after preload finishes

    >
    > Oh great. A preloader that causes your site to break when scripting
    > is disabled. And how do I know it will break the back button in the
    > process?
    >
    >
    >
    > > var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    > > var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    > > // Put the URLs of images that you want to preload below (as many as
    > > you want)
    > > var yourImages = new Array("http://tbn0.google.com/images?
    > > q=tbn:_fmklChPp2nVSM:http://www.marcreichelt.de/spezial/firefox/
    > > firefox_huge.png","http://tbn0.google.com/images?
    > > q=tbn:WRDX3Ie8qhmgaM:http://mkweb.bcgsc.ca/circos/images/circos-sample-
    > > huge-15.png", "http://tbn0.google.com/images?
    > > q=tbn:DOajcO-5Qh0BMM:http://www.imaging-resource.com/PRODS/XTI/
    > > zxti_seethru_huge.jpg", "http://images.google.com.au/imgres?
    > > imgurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/d0-bac-z2-
    > > huge.png&imgrefurl=http://www-f9.ijs.si/~matevz/alice/imgpprd0/
    > > &h=3504&w=4779&sz=5251&hl=en&start=34&tbnid=j89QabPXfXISAM:&tbnh=110&tbnw=1­50&prev=/
    > > images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%26ndsp%3D18%26svnum
    > > %3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
    > > %3Dorg.mozilla:en-US:eek:fficial%26sa%3DN");

    >
    > > // Do not modify anything beyond this point!

    >
    > It's a pat hand is it?
    >
    > > if (document.images) {

    >
    > Something tells me this is a "feature test" for the Image constructor.
    >
    > > var dots = new Array()
    > > dots[0] = new Image(1,1)
    > > dots[0].src = "black.gif" // default preloadbar color (note: You can
    > > substitute it with your image, but it has to be 1x1 size)

    >
    > Isn't this past the point of no modification?
    >
    > > dots[1] = new Image(1,1)
    > > dots[1].src = "blue.gif" // color of bar as preloading progresses
    > > (same note as above)

    >
    > Clearly this script predates CSS.
    >
    > > var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/
    > > yourImages.length),currCount = 0
    > > var loaded = new Array(),i,covered,timerID
    > > var leftOverWidth = lengthOfPreloadBar%coverage}

    >
    > > function loadImages() {
    > > for (i = 0; i < yourImages.length; i++) {
    > > preImages = new Image()
    > > preImages.src = yourImages
    > > }
    > > for (i = 0; i < preImages.length; i++) {
    > > loaded = false
    > > }
    > > checkLoad()}

    >
    > This guy's semi-colon key is broken.
    >
    >
    >
    > > function checkLoad() {
    > > if (currCount == preImages.length) {
    > > location.replace(locationAfterPreload)

    >
    > At least he didn't break the back button.
    >
    > > return

    >
    > This line is orphaned.
    >
    > > }
    > > for (i = 0; i <= preImages.length; i++) {

    >
    > Less than or equal to the length?!
    >
    > > if (loaded == false && preImages.complete) {
    > > loaded = true
    > > eval("document.img" + currCount + ".src=dots[1].src")

    >
    > This is poor even by Dynamic Drive standards.
    >
    > > currCount++
    > > }
    > > }
    > > timerID = setTimeout("checkLoad()",10)}

    >
    > > // end hiding -->

    >
    > Marcin Wojtowicz has learned the first lesson of how not to be seen.
    >
    > > </script>

    >
    > > </head>

    >
    > > <body bgcolor="#FFFFFF">

    >
    > Definitely predates CSS.
    >
    >
    >
    > > <center>
    > > <font size="4" id="preload_area">Please be patient while some images
    > > are being preloaded...</font><p>
    > > 0%
    > > <script language="JavaScript1.1">

    >
    > And NN4 apparently.
    >
    > > <!-- begin hiding
    > > // It is recommended that you put a link to the target URL just in
    > > case if the visitor wants to skip preloading
    > > // for some reason, or his browser doesn't support JavaScript image
    > > object.

    >
    > But you don't know if it supports the "image object" as you only
    > checked document.images.
    >
    > > if (document.images) {
    > > var preloadBar = ''
    > > for (i = 0; i < yourImages.length-1; i++) {
    > > preloadBar += '<img src="' + dots[0].src + '" width="' + coverage +
    > > '" height="' + heightOfPreloadBar + '" name="img' + i + '"
    > > align="absmiddle">'
    > > }
    > > preloadBar += '<img src="' + dots[0].src + '" width="' +
    > > (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '"
    > > name="img' + (yourImages.length-1) + '" align="absmiddle">'
    > > document.write(preloadBar)
    > > loadImages()}

    >
    > > document.getElementById("preload_area").innerHTML = "Done";

    >
    > This is obviously misplaced. Why bother updating the caption anyway
    > as the script navigates away from the page if and when it thinks it is
    > done (assuming it works at all.)
    >
    > > // end hiding -->
    > > </script>
    > > </center>

    >
    > > </body>
    > > </html>

    >
    > > If you want to run the code, you need to have images. you can get the

    >
    > I don't and you don't need the images.
    >
    > > bar.zip file fromhttp://www.dynamicdrive.com/dynamicindex4/preloadimage..htm

    >
    > > thanks

    >
    > Don't use this (or anything like it) under any circumstances.
     
    white lightning, Sep 27, 2007
    #3
  4. white lightning

    David Mark Guest

    On Sep 26, 11:58 pm, white lightning <> wrote:
    > You haven't given any solution to my problem apart from commenting on


    The solution is to forget it.

    > the code. Yes I know the way the code is written is not perfect and I
    > will be fixing a lot of it for my final use. All i want to know is how


    There's no fix for that code except to drag it into the recycle bin.

    > to overwrite the text after preloading is complete. And you may have
    > noticed that i have already commented out the line:
    > //var locationAfterPreload
    >


    That's unfortunate.

    > and i also got rid of the line that redirects the page to another


    This line?

    location.replace(locationAfterPreload)

    It's still there, but now it will error.

    > site.. My objective is to have a simple preloader and once the
    > preloading is done, i want to indicate the preloading is done.


    The user doesn't care when it is done. If you need help preloading
    images, then Google for "image preload javascript", but don't bother
    with a UI for the process.
     
    David Mark, Sep 27, 2007
    #4
  5. white lightning

    rf Guest

    "white lightning" <> wrote in message
    news:...

    > My objective is to have a simple preloader and once the
    > preloading is done, i want to indicate the preloading is done.


    Whenever I see the word "loading" sitting in the middle of an othewise blank
    page I know that I am just about to have a great bunch of my bandwidth
    wasted and I press the back button immediately.

    Why not just get on with the page and give the viewer something to look at
    while the images are downloading?

    --
    Richard.
     
    rf, Sep 27, 2007
    #5
    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. =?Utf-8?B?Um9iZXJ0?=

    Deployment in 2.0 - How To Not Overwrite web.config

    =?Utf-8?B?Um9iZXJ0?=, Nov 2, 2005, in forum: ASP .Net
    Replies:
    8
    Views:
    4,523
    Juan T. Llibre
    Nov 3, 2005
  2. VisionSet
    Replies:
    1
    Views:
    4,208
    Adam Lipscombe
    Sep 2, 2003
  3. zalla rouge
    Replies:
    0
    Views:
    485
    zalla rouge
    Sep 2, 2003
  4. shruti tiwari via JavaKB.com

    overwrite existing value of a textbox with null

    shruti tiwari via JavaKB.com, Apr 2, 2005, in forum: Java
    Replies:
    1
    Views:
    684
    David.Federman
    Apr 3, 2005
  5. Philipp Leitner

    Overwrite Default Constructor ?

    Philipp Leitner, Apr 17, 2006, in forum: Java
    Replies:
    26
    Views:
    4,454
    Jeroen V.
    Apr 19, 2006
Loading...

Share This Page