Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help cleaning up/fixing code

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

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Add CDATA to the scripts and change name to id and see if it helps
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    
    script ...
    
    /*]]>*/
    </script>
    Code:
    name="img' +    to   id="img' +

  • #3
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Changing name to id increased errors from 3 to 13.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If you are using id to img tags, then you need to change this:
    Code:
    eval("document.img" + currCount + ".src=dots[1].src")
    to:
    Code:
    document.getElementById("img" + currCount).src=dots[1].src;

  • #5
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Post a link to the page so that we could look into it.

  • #7
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    This has the changes added, plus the posted page did not have a opening body tag:
    Code:
    <!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>
    Last edited by rwedge; 05-13-2007 at 08:26 AM.

  • #9
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Excellent thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •