...

View Full Version : Help cleaning up/fixing code



zach4618
05-12-2007, 06:15 PM
I have a preloading page on my site for several images. When I run the code for the preloading page through the W3 validator, I get these error messages:


character "<" is the first character of a delimiter but occurred as data.
there is no attribute "name".
document type does not allow element "img" here.


I tried correcting the second and third errors, but ended up messing up the whole script. If someone could fix these errors and just clean up the code in general, that would be helpful. By the way, the doctype is XHTML 1.0 strict.

In the head:

<script type="text/javascript">
var locationAfterPreload = "portfolio.html"
var lengthOfPreloadBar = 200
var heightOfPreloadBar = 20
var yourImages = new Array("images/web/541rides.png","images/web/albanyanimalhospital.png","images/web/bigwheels.png","images/web/colindunnnet.png","images/web/creadevstudiosv1.png","images/web/creadevstudiosv2.png","images/web/definedbydesign.png","images/web/hoodoo.png","images/web/majestickoncepts.png","images/web/mikebibbycom.png","images/web/mikebibbynet.png","images/web/pairofspades.png","images/web/playfulpawz.png","images/web/tenchu.png","images/web/thehighlifecrew.png","images/web/transmission.png","images/web/wahs.png","images/web/willametteassociates.png","images/prev_hover.png","images/prev_on.png","images/next_hover.png","images/next_on.png")

if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "images/incomplete.png"
dots[1] = new Image(1,1)
dots[1].src = "images/complete.png"
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)
}
</script>

In the body:

<script type="text/javascript">
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img alt="complete" src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" />'
}
preloadBar += '<img alt="incomplete" src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" />'
document.write(preloadBar)
loadImages()
}
document.write('')
</script>

rwedge
05-12-2007, 07:48 PM
Add CDATA to the scripts and change name to id and see if it helps
<script type="text/javascript">
/*<![CDATA[*/

script ...

/*]]>*/
</script>
name="img' + to id="img' +

zach4618
05-12-2007, 08:27 PM
Changing name to id increased errors from 3 to 13.

glenngv
05-12-2007, 08:44 PM
If you are using id to img tags, then you need to change this:

eval("document.img" + currCount + ".src=dots[1].src")
to:

document.getElementById("img" + currCount).src=dots[1].src;

zach4618
05-13-2007, 12:04 AM
Same errors. I am worried that I may not be properly editing the code. Every time I make changes, I get more errors than before.

glenngv
05-13-2007, 12:20 AM
Post a link to the page so that we could look into it.

zach4618
05-13-2007, 07:41 AM
http://www.willametteassociates.com/preload.html

rwedge
05-13-2007, 08:22 AM
This has the changes added, plus the posted page did not have a opening body tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Preload</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
/*<![CDATA[*/
var locationAfterPreload = "#"
var lengthOfPreloadBar = 200
var heightOfPreloadBar = 20
var yourImages = new Array("images/web/541rides.png","images/web/albanyanimalhospital.png","images/web/bigwheels.png","images/web/colindunnnet.png","images/web/creadevstudiosv1.png","images/web/creadevstudiosv2.png","images/web/definedbydesign.png","images/web/hoodoo.png","images/web/majestickoncepts.png","images/web/mikebibbycom.png","images/web/mikebibbynet.png","images/web/pairofspades.png","images/web/playfulpawz.png","images/web/tenchu.png","images/web/thehighlifecrew.png","images/web/transmission.png","images/web/wahs.png","images/web/willametteassociates.png","images/prev_hover.png","images/prev_on.png","images/next_hover.png","images/next_on.png")

if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "images/incomplete.png"
dots[1] = new Image(1,1)
dots[1].src = "images/complete.png"
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
document.getElementById('img'+currCount).src=dots[1].src
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
/*]]>*/
</script>
</head>
<body>

<p style="margin-bottom: 5px; text-align: center; width: 100%">Images are loading...</p>
<div style="height: 20px; margin: 0 auto; width: 200px">
<script type="text/javascript">
/*<![CDATA[*/
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img alt="complete" src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" id="img' + i + '" />'
}
preloadBar += '<img alt="incomplete" src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" id="img' + (yourImages.length-1) + '" />'
document.write(preloadBar)
loadImages()
}
/*]]>*/
</script>
</div>

</body>
</html>

zach4618
05-13-2007, 08:42 PM
Excellent thanks for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum