How to overwrite value in id?

W

white lightning

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
[[email protected]])
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
 
D

David Mark

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
[[email protected]])
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.

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.

Don't use this (or anything like it) under any circumstances.
 
W

white lightning

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





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
[[email protected]])
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.

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>

<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>

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.

Don't use this (or anything like it) under any circumstances.
 
D

David Mark

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.
 
R

rf

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?
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top