Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to overwrite value in id?

Reply
Thread Tools

How to overwrite value in id?

 
 
white lightning
Guest
Posts: n/a
 
      09-27-2007
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
[(E-Mail Removed)])
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=tbnOajcO-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=j89Qab PXfXISAM:&tbnh=110&tbnw=150&prev=/
images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%2 6ndsp%3D18%26svnum
%3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
%3Dorg.mozilla:en-USfficial%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[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = 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/dynamici...eloadimage.htm

thanks

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 26, 10:45 pm, white lightning <(E-Mail Removed)> 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
> [(E-Mail Removed)])
> 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=tbnOajcO-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=j89Qab PXfXISAM:&tbnh=110&tbnw=1*50&prev=/
> images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%2 6ndsp%3D18%26svnum
> %3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
> %3Dorg.mozilla:en-USfficial%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[i] = new Image()
> preImages[i].src = yourImages[i]
> }
> for (i = 0; i < preImages.length; i++) {
> loaded[i] = 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[i] == false && preImages[i].complete) {
> loaded[i] = 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.

 
Reply With Quote
 
 
 
 
white lightning
Guest
Posts: n/a
 
      09-27-2007
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 <(E-Mail Removed)> wrote:
> On Sep 26, 10:45 pm, white lightning <(E-Mail Removed)> 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
> > [(E-Mail Removed)])
> > 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=tbnOajcO-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=j89Qab PXfXISAM:&tbnh=110&tbnw=1*50&prev=/
> > images%3Fq%3Dhuge%2Bimage%26start%3D18%26gbv%3D2%2 6ndsp%3D18%26svnum
> > %3D10%26hl%3Den%26client%3Dfirefox-a%26channel%3Ds%26rls
> > %3Dorg.mozilla:en-USfficial%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[i] = new Image()
> > preImages[i].src = yourImages[i]
> > }
> > for (i = 0; i < preImages.length; i++) {
> > loaded[i] = 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[i] == false && preImages[i].complete) {
> > loaded[i] = 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.



 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 26, 11:58 pm, white lightning <(E-Mail Removed)> 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.

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      09-27-2007

"white lightning" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.com...

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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Deployment in 2.0 - How To Not Overwrite web.config =?Utf-8?B?Um9iZXJ0?= ASP .Net 8 11-03-2005 03:50 AM
overwrite existing value of a textbox with null shruti tiwari via JavaKB.com Java 1 04-03-2005 04:24 AM
Re: JSP form submit does not overwrite request parameter value zalla rouge Java 0 09-02-2003 03:02 PM
Re: JSP form submit does not overwrite request parameter value VisionSet Java 1 09-02-2003 11:27 AM



Advertisments