HTML / DracoBlue

Category: HTML

Why <!-- beats <![CDATA[ for inline javascript

I guess everyone knows, that using:

1
2
3

<script type="text/javascript">
  myMagicFunction("This & That");
</script>

is pretty bad practice. The issue is, that the & should be escaped and read as & instead.

If you are reading this code with an Ajax-Request and it contains for instance unescaped & character, it will fail to load the xml properly and also fail executing the embedded javascript.

The workaround I see pretty often is the following (even suggested by w3schools):

1
2
3
4
5

<script type="text/javascript">
<![CDATA[ 
  myMagicFunction("This & That");
]]>
</script>

a better way is of course:

1
2
3
4
5

<script type="text/javascript">
// <![CDATA[ 
  myMagicFunction("This & That");
// ]]>
</script>

because it does not break any backwards compatibility to browsers, who do not get the cdata tag when in non xml mode.

This solution has one big problem: This claims the inner content to be included at this point and be escaped automaticly. And this valid html will be made visible to search engines.

Since I don't want anyone to count this comments as content for my website I am using the following solution for ages:

1
2
3
4
5

<script type="text/javascript">
// <!-- 
  myMagicFunction("This & That");
// -->
</script>

It works like a charm. If you are still using any of the previous solutions, please consider this solution as a replacement.

In HTML & JavaScript By DracoBlue @ 19:49 30.05.2010

Preloading CSS-images for :hover

The top navigation here at dracoblue.net is done with css images, which also have a :hover-effect (showing a lighter version of the image).

So there is a:

http://dracoblue.net/style/menu_news_hover.png

and a

http://dracoblue.net/style/menu_news.png

In CSS it looked like that:

1
2
3
4
5
6

a#newsLink {
    background: transparent url('menu_news.png') no-repeat;
}
a#newsLink:hover {
    background: transparent url('menu_news_hover.png') no-repeat;
}

All this is quite common, but I was facing a usability problem here. The *hover.png files won't be loaded until one of the links got hover'd. In the perspective of the server owner, you might be happy about that. But for the user, the image is unavailable for nearly a second, because it takes time to deliver the image to the user.

So here is my solution to preload the image (without using javascript or stub-<img>'s).

1
2
3
4
5
6
7
8
9
10
11
12
13

td#newsLink a {
  background: transparent url('menu_news.png') no-repeat;
}
td#newsLink a:hover {
  background: transparent url('menu_news_hover.png') no-repeat;
}
td#newsLink {
    background:
        transparent
        url('menu_news_hover.png')
        fixed no-repeat
        -120px -120px;
}

I moved the #newsLink to the td surrouding the newsLink. And at the end, I added a new decleration for a non-repeating and - with coordinates -120x-120 - clearly invisible image.

In open source, HTML & CSS By DracoBlue @ 09:55 23.02.2009

JavaScript new Exception(name,message)

Today I noticed that JavaScript doesn't provide an easy way to make/raise custom exceptions? while still providing an useful stacktrace.

Here is a code snippet used for the GTA:T JavaScript interface to find the fitting stacktrace for a custom JavaScript Exception.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function Exception(name,msg) {
    try {
        throw new Error("")
    } catch (e) {
        e.stack = e.stack.split("@"+e.fileName+":").join(":");
        full_stack = e.stack.split("\\n");
        stack = [];
        stack[0] = "Exception: "+name+"(\""+msg+"\")"
        for (var i=2;i<full_stack.length-3;i++) {
            entry = full_stack[i];
            entry_detailed = entry.split(":");
            entry_detailed[1] = entry_detailed[1] - 4; // THIS is to
            // mark, that we'll "move" the source 4 lines higher,
            // ... because it's eval code executed. Remove that for
            // clear values.
            if (i==2) lineNumber = entry_detailed[1];
            stack[i] = entry_detailed.join(":");
        }
        return {
            name:name,
            message:msg,
            stack:stack.join("\\n"),
            lineNumber:lineNumber
        };
    }
}

You may use it that way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

try {
    function a() {
        throw new Exception("MyException","No permission!")
    }
    function b() {
        a()
    }
    b()
} catch (e) {
    alert(e.name+": "+e.message);
}
// Tested in Firefox
/* e:
Object {
  [name] => MyException
  [message] => No permission!
  [stack] => Exception: MyException("No permission!")
             a():3
             b():6
             execute():10
  [lineNumber] => 3
}*/