SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Georgetown, Ontario
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation <div> element inside JavaScript string causes W3C error!

    I put this in the right forum ! lol. my site coded php, but the issue is with this javascript here:


    Code:
    <script type="text/javascript">
    function $(v) { return(document.getElementById(v)); }
    function $S(v) { return($(v).style); }
    function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
    function isset(v) { return((typeof(v)=='undefined' || v.length==0)?false:true); }
    function XYwin(v) { var z=agent('msie')?Array(document.body.clientHeight,document.body.clientWidth):Array(window.innerHeight,window.innerWidth); return(isset(v)?z[v]:z); }
    
    function sexyTOG() { document.onclick=function(){ setTimeout("sexyTOG()",100); $S('sexyBG').display='none'; $S('sexyBOX').display='none'; document.onclick=function(){}; }; }
    function sexyBOX(v,b) { setTimeout("sexyTOG()",100);$S('sexyBG').height=XYwin(0)+'px'; $S('sexyBG').display='block'; $('sexyBOX').innerHTML=v+'\<div class="sexyX">(Click outside this box to continue!)'+"\<\/div>"; $S('sexyBOX').left=Math.round((XYwin(1)-b)/2)+'px'; $S('sexyBOX').width=b+'px'; $S('sexyBOX').display='block'; }
    </script>
    As you know, lots of scripts run in the head tag. This one is inside the head tag. When i go to do W3C validation, it picks up an error. It speaks more specifically about the <div> element not being allowed inside the <head> tags, which makes sense, because the head tag doesn't contain the body :P anyways, how can i get around this problem? because the <div> and </div> tags it complains about are inside of a string inside the javascript... which is in side the head tags :S lol.

    If anyone has the solution to this, i love you

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function sexyBOX(v, b) {
        setTimeout("sexyTOG()", 100);
        $S('sexyBG').height    = XYwin(0) + 'px';
        $S('sexyBG').display   = 'block';
        $('sexyBOX').innerHTML = v + '<div class="sexyX">(Click outside this box to continue!)</div>';
        $S('sexyBOX').left     = Math.round((XYwin(1) - b) / 2) + 'px';
        $S('sexyBOX').width    = b + 'px';
        $S('sexyBOX').display  = 'block';
    }
    Code is better to debug when it is not all squished up.

    You should not need to escape anything in innerHTML:
    $('sexyBOX').innerHTML = v + '<div class="sexyX">(Click outside this box to continue!)</div>';
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,800
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <script type="text/javascript">
    /* <![CDATA[ */
    function $(v) { return(document.getElementById(v)); }
    function $S(v) { return($(v).style); }
    function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
    function isset(v) { return((typeof(v)=='undefined' || v.length==0)?false:true); }
    function XYwin(v) { var z=agent('msie')?Array(document.body.clientHeight,document.body.clientWidth):Array(window.innerHeight,window.innerWidth); return(isset(v)?z[v]:z); }
    
    function sexyTOG() { document.onclick=function(){ setTimeout("sexyTOG()",100); $S('sexyBG').display='none'; $S('sexyBOX').display='none'; document.onclick=function(){}; }; }
    function sexyBOX(v,b) { setTimeout("sexyTOG()",100);$S('sexyBG').height=XYwin(0)+'px'; $S('sexyBG').display='block'; $('sexyBOX').innerHTML=v+'\<div class="sexyX">(Click outside this box to continue!)'+"\<\/div>"; $S('sexyBOX').left=Math.round((XYwin(1)-b)/2)+'px'; $S('sexyBOX').width=b+'px'; $S('sexyBOX').display='block'; }
    /* ]]> */
    </script>
    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="^$">

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Georgetown, Ontario
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YEah, its not really my sourcecode.... I dont program JS. Nor do i really like it but i like this message box script heh..... Ill give that a try.. Oh, BTW, like i said, I am a PHP developer, that explains why its squished up PHP wont do /r/n unless you manually put it in the string at the end of each line... With several thousand lines of code, that could get tiring Ill try to format things better next time i post though

    felgall, is that an actual solution or did you just post to waste space?? Maybe explaining what this CDATA thing is, how it works, so the other users as well as myself can learn and understand how along with why this would solve the issue...

    Both your posts are appreciated! thx

    BTW, if i dont escape anything in the inner.html, how does that solve the W3C validation issue?? its complaining about the <div> tags whether they are escaped or not.... O_o Reading my post again reveals that i did mention that the problem is <div> inside <head> (obviously it isnt really inside the <head>, its inside the JS) so therefore im not the crackhead this time

    btw, im just kidding i didnt read my post over again... i know what i wrote :P

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    $data = <<<DATA
    This will retain whitespace, tabs, newlines, etc.
    You can also evaluate 
    $variables and can output " and '
    without escaping them.
    DATA; 
    http://www.php.net/manual/en/languag...syntax.heredoc

    Quote Originally Posted by kthxbai2u View Post
    BTW, if i dont escape anything in the inner.html, how does that solve the W3C validation issue?? its complaining about the <div> tags whether they are escaped or not.... O_o Reading my post again reveals that i did mention that the problem is <div> inside <head> (obviously it isnt really inside the <head>, its inside the JS) so therefore im not the crackhead this time
    Well what i think it was is when the validater ran your site the script block was prematurely closed. Tho I first will need to test to be absolutely sure.

    Edit:


    Doing some testing, I can say it is safe to ignore this error as the validation is miss-interpreting. Also the use of CDATA is for XML it has no effect with HTML nor with the validation.
    Sample Code Used:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <script type="text/javascript">
            function $(v) {
                return document.getElementById(v);
            }
    
            function $S(v) {
                return $(v).style;
            }
    
            function agent(v) {
                return Math.max(navigator.userAgent.toLowerCase().indexOf(v), 0);
            }
    
            function isset(v) {
                return (typeof(v) == 'undefined' || v.length == 0) ? false : true;
            }
    
            function XYwin(v) {
                var z = agent('msie') ? Array(document.body.clientHeight, document.body.clientWidth) : Array(window.innerHeight, window.innerWidth);
                return isset(v) ? z[v] : z;
            }
    
            function sexyTOG() {
                document.onclick = function() {
                    setTimeout("sexyTOG()", 100);
                    $S('sexyBG').display  = 'none';
                    $S('sexyBOX').display = 'none';
                    document.onclick      = function(){};
                };
            }
    
    
            function sexyBOX(v, b) {
                setTimeout("sexyTOG()", 100);
                $S('sexyBG').height    = XYwin(0) + 'px';
                $S('sexyBG').display   = 'block';
                $('sexyBOX').innerHTML = v + '<div class="sexyX">(Click outside this box to continue!)</div>';
                $S('sexyBOX').left     = Math.round((XYwin(1) - b) / 2) + 'px';
                $S('sexyBOX').width    = b + 'px';
                $S('sexyBOX').display  = 'block';
            }
        </script>
    </head>
    <body>
        <div>Body</div>
    </body>
    </html>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



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
  •