Rowsdower!
05-11-2009, 04:30 PM
I'm trying to use unobtrusive javascript for a page I am building. I want to insert a "bookmark me" item into the page. This is the script I am using:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript">
<!--
function add_favorite() {
document.getElementById('bookmark').innerHTML="<a href=\"#\" rel=\"sidebar\" onclick=\"if(navigator.appName=='Microsoft Internet Explorer'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }\" onMouseover=\"window.status='Bookmark Us';return true\" onMouseout=\"window.status=\";return true\" title=\"Bookmark This Page\"><img src=\"/images/bookmark65-3.png\" alt=\"Bookmark This Page\" /></a>";
}
window.onload=add_favorite();
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Heading goes here...</h1>
<div id="bookmark">
</div>
</div>
<div id="main">
<h2>Content goes here...</h2>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</body>
</html>
It's pretty simple stuff that just populates an empty div with an image link to bookmark the page when users have javascript enabled.
Now when I call the function using <body onload="add_favorite();"> and cancel out the window.onload=add_favorite(); from the script it works just fine (it throws a line-1 syntax error up in IE that I can't figure out, but functionally everything still works in IE7 and FF2). When I try to do it the "unobtrusive" way I get nothing at all in either browser.
A little debugging revealed that the function is indeed being called and is running successfully, however the function is somehow unable to locate the element with ID of "bookmark" when it is fired with window.onload and as a result I get no bookmarking link. It's almost like window.onload is triggering itself too soon, before the div of "bookmark" is in the page, but how can that be?
Does anyone see something that I am screwing up here?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript">
<!--
function add_favorite() {
document.getElementById('bookmark').innerHTML="<a href=\"#\" rel=\"sidebar\" onclick=\"if(navigator.appName=='Microsoft Internet Explorer'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }\" onMouseover=\"window.status='Bookmark Us';return true\" onMouseout=\"window.status=\";return true\" title=\"Bookmark This Page\"><img src=\"/images/bookmark65-3.png\" alt=\"Bookmark This Page\" /></a>";
}
window.onload=add_favorite();
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Heading goes here...</h1>
<div id="bookmark">
</div>
</div>
<div id="main">
<h2>Content goes here...</h2>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</body>
</html>
It's pretty simple stuff that just populates an empty div with an image link to bookmark the page when users have javascript enabled.
Now when I call the function using <body onload="add_favorite();"> and cancel out the window.onload=add_favorite(); from the script it works just fine (it throws a line-1 syntax error up in IE that I can't figure out, but functionally everything still works in IE7 and FF2). When I try to do it the "unobtrusive" way I get nothing at all in either browser.
A little debugging revealed that the function is indeed being called and is running successfully, however the function is somehow unable to locate the element with ID of "bookmark" when it is fired with window.onload and as a result I get no bookmarking link. It's almost like window.onload is triggering itself too soon, before the div of "bookmark" is in the page, but how can that be?
Does anyone see something that I am screwing up here?