<div> element inside JavaScript string causes W3C error!

**kthxbai2u** · Apr 10, 2007 21:44

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

**logic_earth** · Apr 10, 2007 22:10

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>';

**felgall** · Apr 10, 2007 23:30

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>

**kthxbai2u** · Apr 10, 2007 23:42

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

**logic_earth** · Apr 11, 2007 01:19

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

Originally Posted by kthxbai2u

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>

User Tag List

Thread: <div> element inside JavaScript string causes W3C error!

Thread Tools

Display

<div> element inside JavaScript string causes W3C error!

Bookmarks

Bookmarks

Posting Permissions