Question

I am trying to create some ajax with my website, click on navigation and the page will go to another page. I am reading this tutorial, and it works! Except there is some stuff that I don’t like. I have a couple questions..

In the URL, it is weird; If I were to click on home, it’ll go to example.tld/home#, but I would like to have the hash on the back. example.tld/#home. If I were to go to the contact page, it’ll display as /home#co … doesn’t display the whole word. (contact). I would like #contact to replace #home when I change the page. Also how can I land on a different page on load instead of #home again? Example: click on example.tld/#contact, goes to #contact page.

Let’s say i’m on #home and if I click the #home link again, it’ll reload the same page, is there any way to stop this if i’m already on that page?

Okay one more question… The page fades in fades out, its a cool effect but fading in from the corner is kinda ugly, is there a way where I can have the content slide in and slide out when its needed? I tried slideUp() before another page is loaded, its exactly what I want(it worked) but I can’t get it to slide down when the content appears.

I’m sorry for so many questions, I have honestly tried for the last past 2 days to get what I wanted but what I try to do, it fails! Thanks to anyone who answer my questions!

Here is the code I have modified from the tutorial:

 // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('nav ul li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #main-content';  
            $('#content').load(toLoad)  
        }  
    });  

    $('nav ul li a').click(function(){  

    var toLoad = $(this).attr('href')+' #main-content';  
    $('#main-content').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#main-content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#main-content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });

Think I should cach some of the selectors that are being repeated?

Also here is the HTML:

<div id="main-content" class="home">

… content to be loaded

</div>

Nav:

<nav>
        <ul>
          <li><a href="home">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="contact">Contact</a></li>
        </ul>
      </nav>

I’m using htaccess so I do not have to include the file extension, but if its needed, the files are .php

Answer 1

To move the hash back, you’ll need to change where the server is actually serving the HTML file. Currently, if I understand correctly, you’re file is being served as /home, and the hashes are added onto that. You’ll need to change your file structure (or .htaccess) to allow the page to be accessed as a directory index (/, probably index.html or index.php).

The code block at the top is intended to check the current hash and load the appropriate content upon first load, but, it’s trying to loop over elements that don’t exist! When this code is run, the DOM is not necessarily loaded, and in its $('nav ul li a').each..., it’s not finding any links. You can fix this by wrapping the entire first code block in jQuery’s document-ready-event-helper!

$(function () {
    //In here, the DOM is loaded! Hurrah!
});

(see http://api.jquery.com/jQuery#jQuery3)

To prevent reloading the current page, you need to do a simple check at the beginning of your click handler. Something along the lines of

var goingTo = $(this).attr('href');
goingTo = goingTo.substring(0, goingTo.length - 5);
if (window.location.hash.substring(1) === goingTo) return false;

To change the transitions, all you need to do is change the fadeIns and fadeOuts to slideDowns and slideUps!

Hope this helps!