Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts

    Problem with window.onload Function Finding Elements by Id

    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:
    Code:
    <!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?
    Last edited by Rowsdower!; 05-11-2009 at 07:54 PM. Reason: Marking as resolved...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!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=function(){add_favorite(); }
    -->
    </script>
    </head>
    <body onload="add_favorite();" >
    <div id="wrapper">
      <div id="header">
        <h1>Heading goes here...</h1>
        <div id="bookmark">22
        </div>
      </div>
      <div id="main">
        <h2>Content goes here...</h2>
      </div>
      <div id="footer">
        Footer goes here...
      </div>
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!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=function(){add_favorite(); }
    -->
    </script>
    </head>
    <body onload="add_favorite();" >
    <div id="wrapper">
      <div id="header">
        <h1>Heading goes here...</h1>
        <div id="bookmark">22
        </div>
      </div>
      <div id="main">
        <h2>Content goes here...</h2>
      </div>
      <div id="footer">
        Footer goes here...
      </div>
    </div>
    </body>
    </html>
    Hi Vic, thanks for the effort but did you read my question?

    I am trying to implement this using "unobtrusive" javascript so that non-javascript users don't see any extra code (once I draw the script into an external file). This includes "onload" attributes. I found that this works now, though:
    Code:
    <script type="text/javascript">
    <!--
    window.onload = function() {
    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>";
    }
    -->
    </script>
    It seems like 6 of one, half a dozen of the other to me but for some reason this setup makes it run properly. The only thing left to tackle is the syntax error warning that IE7 is showing me, but that's a fight for another day.

    I'm marking this puppy as resolved for now. Thanks anyway!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •