Results 1 to 5 of 5

Thread: Problem with onlad and w3c

  1. #1
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Problem with onlad and w3c

    Hello:

    I took this script for this web some years ago. I don't remember its name nor its URL:

    <script language="JavaScript" type="text/JavaScript">
    <!--
    function doItImmediately(name, startx, starty, curx, cury, endx, endy, step) {
    var stepx = step;
    var beats = (endx - startx)/(stepx);
    var stepy = (endy - starty)/(beats);
    eval("document."+name+".width="+curx);
    eval("document."+name+".height="+cury);
    curx+=stepx;
    cury+=stepy;
    if (curx < endx) {
    setTimeout("doItImmediately('"+name+"', "+startx+", "+starty+", "+curx+", "+cury+", "+endx+", "+endy+", "+step+")", 100)
    }
    }
    //-->
    </script>


    The problem:

    The script was executed by an ONLAD inside an image tag like this:

    <img src="elpintor_archivos/firma.gif" name="firma" width="592" height="165" border="0" id="firma" onload="doItImmediately('firma', 427, 0, 427, 0, 592, 165, 5)" >

    I have used this script in top of the image (firm) at the following web site:

    http://www.pintorcastanyer.com/

    The problem is that now I'm trying to validate by W3C all the code and I obtain this from the validator:

    " Line 56, Column 118: there is no attribute "ONLOAD"
    …rder="0" id="firma" alt="firm" onload="doItImmediately('firma', 427, 0, 427, 0…✉
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash."

    Any idea how to overcome the ONLOAD problem at the image?

    Thanks in advance.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    The onload is for the body of the html page, not for an image.

    w3c:
    http://www.w3.org/TR/REC-html40/interact/scripts.html
    onload = script [CT]
    The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
    I think you can put that call in the body tag and it should work. Not that good with js but the name is in there so I think it should still trigger the same.

    so

    <body onload="doItImmediately('firma', 427, 0, 427, 0, 592, 165, 5)">
    Corrections to my coding/thoughts welcome.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <script type="text/javascript">
    function doItImmediately(name, startx, starty, curx, cury, endx, endy, step){
    	var stepx = step,
    	beats = (endx - startx)/(stepx),
    	stepy = (endy - starty)/(beats);
    	document.images[name].width = curx;
    	document.images[name].height = cury;
    	curx += stepx;
    	cury += stepy;
    	if(curx < endx){
    		setTimeout(function(){doItImmediately(name, startx, starty, curx, cury, endx, endy, step);}, 100);
    	}
    }
    
    doItImmediately.preload = function(name, startx, starty, curx, cury, endx, endy, step){
    	var im = new Image();
    	im.onload = function(){
    		doItImmediately(name, startx, starty, curx, cury, endx, endy, step);
    	};
    	im.src = document.images[name].src;
    };
    </script>
    Then for the tag:

    Code:
    <img src="elpintor_archivos/firma.gif" name="firma" width="592" height="165" border="0" id="firma">
    <script type="text/javascript">
    doItImmediately.preload('firma', 427, 0, 427, 0, 592, 165, 5);
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bluewalrus View Post
    The onload is for the body of the html page, not for an image.

    w3c:
    http://www.w3.org/TR/REC-html40/interact/scripts.html


    I think you can put that call in the body tag and it should work. Not that good with js but the name is in there so I think it should still trigger the same.

    so

    <body onload="doItImmediately('firma', 427, 0, 427, 0, 592, 165, 5)">
    OK thanks, that worked but I was necessary to set to cero the width and height of the image first to avoide the image is showed.

    <img src="elpintor_archivos/firma.gif" name="firma" width="0" height="0" border="0" id="firma" alt="firm" >



    Quote Originally Posted by jscheuer1 View Post
    Code:
    <script type="text/javascript">
    function doItImmediately(name, startx, starty, curx, cury, endx, endy, step){
    	var stepx = step,
    	beats = (endx - startx)/(stepx),
    	stepy = (endy - starty)/(beats);
    	document.images[name].width = curx;
    	document.images[name].height = cury;
    	curx += stepx;
    	cury += stepy;
    	if(curx < endx){
    		setTimeout(function(){doItImmediately(name, startx, starty, curx, cury, endx, endy, step);}, 100);
    	}
    }
    
    doItImmediately.preload = function(name, startx, starty, curx, cury, endx, endy, step){
    	var im = new Image();
    	im.onload = function(){
    		doItImmediately(name, startx, starty, curx, cury, endx, endy, step);
    	};
    	im.src = document.images[name].src;
    };
    </script>
    Then for the tag:

    Code:
    <img src="elpintor_archivos/firma.gif" name="firma" width="592" height="165" border="0" id="firma">
    <script type="text/javascript">
    doItImmediately.preload('firma', 427, 0, 427, 0, 592, 165, 5);
    </script>
    Thanks John. I have seen this solution in:

    http://www.webdevforums.com/showthre...ferrerid=10923

    It works but the problem is that in my web the image is inside a table and IE8 gives an error, perhaps because it doesn't like the script there.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    IE does freak out if you try to change just about anything inside a table before the table has been completely parsed.

    That's one of the many reasons tables shouldn't be used for layout.

    However, as long as this table isn't nested inside another table, you should be able to run the script after the closing table tag. If there are nested tables and this table is inside one or more other tables, you must wait until after the outermost closing </table> tag.

    Also, I didn't post my message in response to bluewalrus, rather he posted while I was writing. His idea is OK, but mine would be quicker, especially if there were no table(s) involved.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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