Grow your CSS skills. Land your dream job.

How do I set this up to degrade properly?

  • # January 19, 2009 at 11:49 am

    I’m working on a site in which I load content from other pages into the index page using jquery. I finally got everything working exactly how I want it, but I’m not sure how to handle it degrading if javascript is turned off. The four other pages that it draws the content from are all fully functional html pages that I want it to navigate to only IF js is turned off, but when I link to them via the anchor tags in the nav menu it ignores the script and goes directly to those pages.

    I’ve seen a tutorial that produced a result similar to what I want that degrades nicely, but I didn’t like some of the events and animation that went with it. When I tinkered with the code to modify it to my needs it wouldn’t work at all.

    What would I need to add into my script to get it to override the links to the external pages?

    Here’s a bare bones version of the site: http://www.dratpackproductions.com/patioliving

    And here’s my current script:

    Code:
    $(document).ready(function(){

    $(“li.home”).click(function(){
    $(“#loader”).load(“index.html #loader”)
    $(“li a”).css(“background-position”,”top”)
    $(“li.home a”).css(“background-position”,”bottom”)
    });

    $(“li.about”).click(function(){
    $(“#loader”).load(“about.html #loader”)
    $(“li a”).css(“background-position”,”top”)
    $(“li.about a”).css(“background-position”,”bottom”)
    });

    $(“li.services”).click(function(){
    $(“#loader”).load(“services.html #loader”)
    $(“li a”).css(“background-position”,”top”)
    $(“li.services a”).css(“background-position”,”bottom”)
    });

    $(“li.showcase”).click(function(){
    $(“#loader”).load(“showcase.html #loader”)
    $(“li a”).css(“background-position”,”top”)
    $(“li.showcase a”).css(“background-position”,”bottom”)
    });

    $(“li.contact”).click(function(){
    $(“#loader”).load(“contact.html #loader”)
    $(“li a”).css(“background-position”,”top”)
    $(“li.contact a”).css(“background-position”,”bottom”)
    });

    });

    Thanks for any help or advice.

    # January 19, 2009 at 1:52 pm

    Perhaps you can link each of the nav items to the actual pages, and then automatically remove the <a> tags from the nav items with jQuery when the page is first loaded? That way, those who don’t use javascript will be able to get to the files, and those who do will have the links removed and the correct functionality added.

    # January 19, 2009 at 11:17 pm

    Genius…that worked perfectly. Thanks again.

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

You must be logged in to reply to this topic.

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