Grow your CSS skills. Land your dream job.

#hashes and urls

  • # May 1, 2009 at 4:01 am

    Hi,

    I recently started to make a small project ajax driven. Most of the implementation has been done through load calls in jquery and simple html and css edits. However, I have run into an issue. When you click on a link to another page, a jquery load function is called the new content is loaded on the site. In the process the url is followed by a hash of the page just clicked on. My question is how do I make it so that when someone types in the address with a specific hash, the load function is called and the correct content appears?

    Here’s the url for the project and some of the key files:

    http://www.stoobs.com/testing/ajax/

    http://www.stoobs.com/testing/ajax/js/ajax.js

    http://www.stoobs.com/testing/ajax/css/global.css

    Also, I’m sorta a newbie with jquery so if I did some stuff weird it’s just because I don’t know the proper way.

    # May 2, 2009 at 5:58 am

    Hey there,

    First let me get this straight – so what you want is when I enter your webpage with the following URL: http://www.stoobs.com/testing/ajax/#blog –> it should automatically display your blog, and not the first page?

    If yes, I can help you. I’ve stumbled on this one a few weeks ago. What I did (might not be the most ‘clean’ solution) is ‘reading out’ the URL, the hash to be more specific. Use the hash object for this one, it is stored in window.location.hash:

    Code:
    var hash = window.location.hash;
    if(hash){
    // Your jQuery load functions IF a hash is specified
    if (hash == ‘#blog’){
    $.load(blogstuff);
    } elseif (hash == ‘#services’){
    $.load(servicesthings);
    } elseif //etcetera.
    }

    Hope this helps you.

    -H

    # May 3, 2009 at 9:19 am

    Don’t forget about the back button! Ajax is great for speeding up and enhancing websites but using it for main site navigation is a very big task; history management is an integral part of such a thing. You can’t just throw around some click handlers and jQuery to get it done.

    Your URLs still need to be book-markable and the browser’s back button needs to be operable.

    # May 3, 2009 at 6:54 pm
    "James" wrote:
    Don’t forget about the back button! Ajax is great for speeding up and enhancing websites but using it for main site navigation is a very big task; history management is an integral part of such a thing. You can’t just throw around some click handlers and jQuery to get it done.

    Your URLs still need to be book-markable and the browser’s back button needs to be operable.

    But if one would make his navigation work using AJAX and change the URL with a specific hash every time a visitor is navigating, and make sure that someone from the ‘outside’ with a specific URL is taken to the right section, then AJAX navigation should be allright, right? (what I’m trying to say is: if you’d handle all the things above, AJAX-driven navigation should work properly, right?) This post is about only one part of proper AJAX-navigation, the URL handling or ‘history management’.
    Another essential part is that one should also make this type of navigation accessible for non-javascripters. So the default website navigation should work like a common website navigation (just linking to files on the server), and after this default navigation has been loaded the visitors with javascript-enabled browsers will get an extra chunk of code to morph the navigation to an AJAX-navigation.

    You should consider what pro’s AJAX-driven navigation has against it’s cons; speed versus the big task of URL handling, history management and a non-javascript backup plan.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".