SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting <script> to validate???

    I'm really struggling to get a piece of script to validate in xhtml 1.0. The code is the following:

    HTML Code:
    <script type="text/javascript">window.addEvent('domready', function() { new YOOtooltip('yoo-tooltip-1', '<img src="images/latest_work/aos.jpg" alt="Alt Text" /><p>Text goes here</p>', { mode: 'cursor', display: 'block', width: 315, style: 'default', sticky: 0 }); });</script>
    This doesn't validate because of the html code within the script tag, however if I replace the '<' and '>' with &lt; and &gt; it will validate but break the script!

    My javascript knowledge is limited and this is a third party tool tip script. Thanks in advance for any advice on how to get this to validate!

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.
    Try to put it in a external file

    Bye.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I'd like to avoid an external file if possible, mainly because this is a joomla generated article. If it's impossible to make this work though, I'll have to look at including an external file somehow.

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amin7b5 View Post
    Thanks for the reply. I'd like to avoid an external file if possible, mainly because this is a joomla generated article. If it's impossible to make this work though, I'll have to look at including an external file somehow.
    AFAIK it's the only way.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    XHTML treats the content of the script tag as PCDATA while JavaScript is CDATA. You therefore need to wrap the embedded JavaScript in a CDATA tag.

    Code:
    <script type="text/javascript">
    <![CDATA[
    window.addEvent('domready', function() { new YOOtooltip('yoo-tooltip-1', '<img src="images/latest_work/aos.jpg" alt="Alt Text" /><p>Text goes here</p>', { mode: 'cursor', display: 'block', width: 315, style: 'default', sticky: 0 }); });
    ]]>
    </script>
    Note that will only work with XHTML and not with HTML as the content of the script tag in HTML is CDATA and browsers will not recognise the CDATA tag or its content if you include it in HTML.
    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="^$">

  6. #6
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Stephen! I put into place what you suggested and the page will now validate fine, however the script is no longer working. It's like you said, it seems to be ignoring what's between the <![CDATA[ ]]> tag.

    My doctype is XHTML 1.0 transitional. Would that be causing an issue? Is there something I'm missing?

  7. #7
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Throwing regular html comments <!-- --> between the script tag seems to have solved the problem.

    I'm still curious though why <![CDATA[ didn't do the trick, and are html comments are the proper way to do this?

  8. #8
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe your serving your document as text/html. In order for CDATA to work properly you have to serve the document as application/xhtml+xml.
    webcloud.se - Articles on web development

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amin7b5 View Post
    Throwing regular html comments <!-- --> between the script tag seems to have solved the problem.
    No, you can't do that with XHTML. This is a special hack for HTML only. In XHTML the comments will be seen as comments and your script will be entirely hidden.

    Quote Originally Posted by amin7b5 View Post
    I'm still curious though why <![CDATA[ didn't do the trick, and are html comments are the proper way to do this?
    If a CDATA section doesn't work and HTML comments do, then you're serving your 'XHTML' document as HTML, just like stakes said. That means you're not using XHTML at all; you're using invalid HTML. See the XHTML vs HTML FAQ for more information.

    This is acceptable according to Appendix C of the XHTML 1.0 specification, but only if the document still works when served as real XHTML. Relying on it being processed as HTML is harmful.

    It's impossible to write this script in a way that works both as real XHTML and pretend-XHTML, because of the different content models of the script element type in the two specifications.

    In real XHTML you need to use a CDATA section, or escape the '<' and '>' characters within the script as &lt; and &gt;. But that won't work if you serve it as HTML.

    You have two options here: move the script to an external file, or be honest and use an HTML doctype declaration since you're just using HTML anyway.
    Birnam wood is come to Dunsinane


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
  •