Automatically load content inside div on jQuery Address plugin bookmarked page

Question

I'm using jquery.address plugin to update my browser's address bar while loading content through ajax. Everything works fine, except I have no idea how to automatically load the event.value or event.path into the DIV I'm using to load content when the user try to access a bookmarked page like "domain.com/about-us", in that case page loads but the "about-us" content does not load in the DIV. What am I missing? This is my code:

JS:

function loadURL(url) {
    $("#content").fadeOut(600, function() {
        $(this).load(url).fadeIn(800);  
    });
}

$.address.init(function(event) {

    $.ajax({
        url: event.value,
        success: function(data){ $('#content').load(data); }
    });

}).change(function(event) {

    $('a').click(function(){
         loadURL($(this).attr('href'));
    });

});

HTML:

<div id="menu">
        <ul>
            <li id="menu_about"><a href="about-us.html" rel="address:/about-us">About Us</a></li>
            <li id="menu_contact"><a href="contact.html" rel="address:/contact">Contact</a></li>
        </ul>
</div>

<div class="wrapper">

    <div id="content">

    </div>

</div>

.htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine on

  # Rewrite current-style URLs of the form 'index.html?url=x'.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.html?url=$1 [L,QSA]
</IfModule>

Thanks!

Answer 1

$.address.externalChange(function(event)) is what you are looking for. It'll capture the path on page load.