Advanced Search

Results 1 to 2 of 2

Thread: Using onhashchange for having your menu on each page of your site.

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default Using onhashchange for having your menu on each page of your site.

    Using the onhashchange event in the right way we can add content to a navigation page without leaving it and yet add an entry to the history. This means that there won't be a white flash on page transition (because we don't leave the navigation page) while bookmark functionality is preserved (because onhashchange adds entries to the history, at least, if we use it in the right way). A simple example:
    <!--HEAD OF INDEX.HTML -->
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function hash_change()
    {$('#import_div').load(location.hash.substring(1,location.hash.length))}
    window.onhashchange=hash_change;
    window.onload=hash_change; if(window.location.hash=='')window.location.replace('#start.html')
    </script>
    </head>

    <!--BODY OF INDEX.HTML -->
    <body>
    <!--SIMPLE MENU:-->
    <a href="#start.html">Home</a>
    <a href="#page2.html">Page 2</a>
    <a href="javascript: void(0)" onclick="location='#page3.html'; return false">Page 3</a>

    <!-- THE DIV THAT RECEIVES EXTERNAL CONTENT -->
    <div id="import_div"></div>
    </body>
    Demos and explanations here.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    I applied the technique described in my first post to cases in which external content is loaded in an iframe. I added some music to show that it continues to play even when we navigate between the pages of the site, see this. Works well too. Known issues: in IE, the music continues to play as it should except when navigation is done via the back / forward buttons. In Google Chrome, the iframe sometimes takes some time to load.

Similar Threads

  1. Load another site page into a DIV
    By Teapott in forum JavaScript
    Replies: 19
    Last Post: 12-10-2012, 09:03 AM
  2. Drill Down Menu doesn't work on first page of site
    By Cebalrai in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-25-2012, 06:33 PM
  3. Replies: 0
    Last Post: 07-12-2011, 05:03 PM
  4. Front Page Site
    By ezra in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-29-2006, 06:26 AM
  5. Site Mapping a js menu script page
    By dudeman in forum JavaScript
    Replies: 1
    Last Post: 03-12-2005, 05:14 AM

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
  •