Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How do I set this up to degrade properly?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23994
    jmfisher
    Member

    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.

    #53273

    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.

    #53285
    jmfisher
    Member

    Genius…that worked perfectly. Thanks again.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.