How to create the breadcrumb and the shifting view effect similar to Github

Question

Clicking a breadcrumb link in github will trigger the directory view area to transition to the subdirectory . What is the best way to achieve this effect. I am using asp.net mvc , jquery, jquery ui, and a jquery layout plugin ( http://layout.jquery-dev.net/ ui layout ) Shoud I abandon the layout plugin ?

Answer 1

Well, you can start by using the unique url pattern. To make this sound a little familiar, let's take for example twitter:

#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow

the hash part is the one after (and including) "#". using window.location.hash gets it for us. then use string.replace() to remove #!/ and end up with:

search/stackoverflow

then if we store this value as a variable and do string.split('/'), which is split the value per /, we are returned with this:

array = ['search','stackoverflow'];

now it looks more like a breadcrumb which we can use to build. if you were in twitter, it would be more like:

site / search / stackoverflow

and for each breadcrumb link, just append further. if you have segmented urls, it's pretty easy to build the links:

site                      = mysite.com
site/search               = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow

---

for the sliding part, you need to pick up the "onhashchange" event which detects the changes to the value of the hash. The event always happens when you click a link that has href="#somevalue" - note the href having "#". you also notice that the page does not go anywhere (that's where AJAX magic comes to play later).

for modern browsers, you can detect hashchange using jQuery or plain JS:

$(window).on('hashchange',function(){
    //do whatever you want when the hash changes
});

//or

window.onhashchange = function(){
    //do whatever you want when the hash changes
}

for older browsers, you have to set a timer that checks the previous vs current value of the window.location.hash

(function timer(prevHash){
    var currentHash = window.location.hash;
    if(prevHash !== currentHash){
        //do whatever you want when the hash changes
    }
    setTimeout(function(){
        timer(currentHash);
    },1000);
}();

---

the sliding effect can be achieved using jQuery .animate(). you can load the new page via AJAX (depending on the page you determined using the parsed hash), append the loaded page, slide the contents, and boom! you are done. It's pretty easy for everyone to make if they know the gears that make the clock turn.