CODEWITHSUNDEEP
jqueryajaxurlnavigation
Steffi
Steffi

Reputation: 7067

How to have a navigation full ajax?

I have a question.

I visited a site : http://currenthiphop.com/. And when I clicked on a link, the link on adress bar change to http://currenthiphop.com/#!/ + link. (like Twitter, Faceboook...)

However, in the attribut href, there is no #!. Why ?

Is is a ajax navigation isn't ? How can I do something like this ?

Thanks

Upvotes: 0

Views: 8261

Answers (3)

Roshan Rush
Roshan Rush

Reputation: 181

Thanks to Jared Farrish.

I have one little extra addition that will allow you to get the active content after you refresh the page.

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    active_page = location.hash.substring(location.hash.lastIndexOf('/')+1)
    if (active_page=='')
    {
        active_page='home'
    }
    $('#'+active_page).show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49208

This oughta get you started.

http://jsfiddle.net/f6dBV/

EDIT - jsFiddle is actually not showing the location.hash bit. Here it is on my website: http://jfcoder.com/test/hash.html

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

Upvotes: 1

Bakudan
Bakudan

Reputation: 19492

It is location.hash. Like in Facebook it is made with javascript. It is used to avoid use of GET and reload the page.

basic example - in the folder where are the php page and JavaScript you have some images (1.png, 2.png ... etc). Like Facebook (some time ago) if you copy the link and paste it, js checks if there is any hash and redirects you to the wanted image. The code is old, and it is not the best.

Upvotes: 2

Related Questions