Question

I’ve been putting together a web page for a desktop application I’ve started developing, and I’d really like to take advantage of HTML5 technologies and dynamic content with JavaScript. Basically, if one visits the “root” page (index.php, or just the directory name) in their browser, sections for info, about, FAQs, and a contact form will all be visible (except for the contact form; clicking on the heading of its section will trigger a jQuery animation to reveal it). On the left side of the page I have a basic navigation with links to home, about, FAQs, and contact. The anchors for these links are “#!/home”, “#!/about”, “#!/faq” and “#!/contact” (respectively). When one of these is clicked, JavaScript/jQuery will hide all elements save for the header, footer, and the section to which the hashbang pertains (for the contact form, it will also remove the click handler for the header of the section because it doesn’t need to and shouldn’t be able to be hidden when it is the sole content of the page). Currently I am using this:

window.onload = (function() {
    switch(location.hash) {
    case "#!/contact":
        $("body > *:not(section#contact, nav, header, footer)").hide();
        $("#contact > #labels, #contact > form").slideDown('slow');
    // and similar for the other hashbang URIs
    }

    if (location.hash == "#!/" || location.hash == "#!/home" || !eval(location.hash)) {
        $("a[href='#!/contact']").click(function() {
            $("#contact > #labels, #contact > form").slideDown('slow');
        });
    }
    // similar for the other hashbangs
});

I’m almost certain there is a better way to do this, and I would also like to make sure that this page and its dynamic content are properly crawlable by Google’s bots. Should I be using PHP to do this properly? How so?

Thanks!

Answer 1

This video tutorial on CSS Tricks by Chris Coyier goes over some best practice to implement something like this. A main point is to make sure your application will work with or without javascript turned on.