SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document type does not allow element "img" here (inside javascript )?!

    Hi ,

    Im working on making a jquery image slider.

    I just found out that im haveing a w3c validation error : document type does not allow element "img" here
    because of my javascript code.

    My code is in the header.

    I understand the error message but what i dont understand is why it is giving it since its in my Javacript code.

    Here is the website adress of my website:


    http://www.kmultim.com/index.php?idSection=portefolio

    Code:
    <script type="text/javascript"> 
    $(document).ready(function()
    {
    	$('#imgPre').click(function()
    	{
    		
    	var imgTextL= '<img class="'+$('.imgGal').filter(':last').attr('class')+  //variable containing the last image in the list 
    		'" src="'+$('.imgGal').filter(':last').attr('src')+
    		'" alt="'+ $('.imgGal').filter(':last').attr('alt') +'" />'  
    
    		 $('#contenuTv').hide("slide", { direction: "left" }, 400 ,function () // load previous image
    		 {
    				$('.imgGal').filter(':last').remove() //remove the last image
    				$('#contenuTv').prepend(imgText); // put the last image at the end of the list
    				$('#contenuTv').show("slide", { direction: "right" }, 400);
    		 });		 
    });			
    		
    $('#imgSuiv').click(function()
    {		
    		var imgTextL = '<img class="'+$('.imgGal').filter(':last').attr('class')+ //variable containing the First image in the list 
    		'" src="'+$('.imgGal').filter(':first').attr('src')+
    		'" alt="'+ $('.imgGal').filter(':first').attr('alt') +'" />'
    		
    		$('#contenuTv').hide("slide", { direction: "right" }, 400 ,function () // load next image
    		{
    			$('.imgGal').filter(':first').remove() //remove the fisrt image
    			$('#contenuTv').append(imgText); // put the first image at the end of the list
    			$('#contenuTv').show("slide", { direction: "left" }, 400);
    		});
    	});
    	
    });
    </script>

    The sliding animations are sloppy in IE .. worcks great for firefox and chrome toght , it even work acceptably on my android.

    Thank you for reding , hope you can help or point me in the right dirrection .

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You are using XHTML served as text/html, in which all code is considered PCDATA, and is thus validated by the parser. Since img is not a valid child of script, the page fails validation. If you served your XHTML as application/xml+xhtml, it would create some actual problems. To avoid this, you have two options:
    • Switch to HTML 4.01 strict. This is by far the best option, since you can't use any of the inherent benefits of XHTML as long as you serve it as text/html anyway, and since you can't serve XHTML as application/xml+xhtml in any version of Internet Explorer below Internet Explorer 9.
    • Comment out the Javascript as CDATA like this: <![CDATA[ * script goes here * ]]>.


    In either case, you should switch to a strict DOCTYPE.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Oh, and the above code might cause some problems in some browsers, so to be on the safe side, use this:
    <script type="text/javascript">
    /* <![CDATA[ */

    * script goes here *

    /* ]]> */
    </script>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Get the JavaScript out of the web page and into a separate file.

    Code:
    <script type="text/javascript">
     /* <![CDATA[ */
    
     * script goes here *
    
     /* ]]> */
     </script>
    This code is just placing comments into the JavaScript that the browser will ignore because they are comments. If you are really using XHTML these comments will not cause the script to be treated as CDATA - you'd need to move the tag outside of the comments for that.

    If you are serving the page as HTML then those comments are unnecessary. If you are serving as XHTML then the tag must be there without being commented. To resolve the conflict get the JavaScript out of the HTML and into a separate file where it belings.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very mutch . It's the first time something like this happen for me . I tought using XHTML 1.0 Strict was better then HTML 4.01 strict.What about HTML5 ?. I considered using it but used XHTML 1.0 since i tough that not a lot of browser actually support HTML5.

    @felgall :

    I always get my JavaScript into an external file when i finish writing it . Guess i'll develop in external file from the beginning from now . Should put all my JavaScript into 1 file (less HTTP request)?

    Thanks both of you

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by claimore22 View Post
    I tought using XHTML 1.0 Strict was better then HTML 4.01 strict.What about HTML5 ?. I considered using it but used XHTML 1.0 since i tough that not a lot of browser actually support HTML5.
    IE8 and earlier don't support XHTML at all - they just offer the file for download instead of displaying it. Once those browsers are dead then XHTML 1.0 will become practical. (X)HTML 5 is still in early draft but is basically attempting to reintroduce all the tags that browsers support which were flagged as unnecessary and to be deleted back in 1997. It also adds a number of additional useful tags and attributes. You can use JavaScript to work around some of the tags and attributes not being supported .


    Quote Originally Posted by claimore22 View Post
    I always get my JavaScript into an external file when i finish writing it . Guess i'll develop in external file from the beginning from now . Should put all my JavaScript into 1 file (less HTTP request)?
    You don't need to start with the JavaScript in a separate file. You just need to move it there before you try to validate the HTML.

    Whether you put all the JS in one file or not depends on how big the scripts are and whether they are needed on all the pages. If a significant fraction of the code is only used on one page then downloading it for all the other pages will be a bigger overhead than the extra request. What makes the biggest difference with load times is moving your JS to the bottom of the page so everything else loads first. Modern browsers can download up to 8 files at a time as long as they are not JS - which always downloads by itself holding up all the other files until it finishes.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everything is working like a charm ... well almost . Jquery animation is slow in IE8 and IE7 but thats to be expected i guess.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Stephen: The Javascript comment won't be recognized as a comment in XHTML, because it isn't treated as Javascript at all before the CDATA declaration. In HTML, where the Javascript is treated as a comment, the CDATA is ignored.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Stephen: The Javascript comment won't be recognized as a comment in XHTML, because it isn't treated as Javascript at all before the CDATA declaration. In HTML, where the Javascript is treated as a comment, the CDATA is ignored.
    It is still messy inappropriate code. Also if you are using a CMS to construct the pages it may be one that strips out comments and then you can end up with all sorts of invalid mess.

    The only way guaranteed to work is to only use a CDATA tag (without the comments) for XHTML and not use anything at all for HTML.

    OR better yet - just don't jumble (X)HTML and JavaScript together in the same file.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I putted the code in a external javascript file and it did the trick whitout having to change the doctype.

  11. #11
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Stephen
    My point exactly (which is why I suggested using HTML in the first place). Just one of the reasons why XHTML serves as HTML is a bad thing.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


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
  •