Implementing my own version of GitHub’s tree slider

Hi guys, I’m new to the world of web development and I’m trying to build cool things to put on my own personal website. Right now I’m trying to build a blog. The backend has been pretty easy, so I have a functional blog with static pages and permalinks, but now I want to do some cool client-side stuff to make navigating the blog fast and fun.

I’m trying to build my own version of [URL=”https://github.com/blog/760-the-tree-slider”]GitHub’s tree slider[/URL]. For the lazy who don’t want to click the link, the relevant Javascript/JQuery code is:

[CODE]// handles clicking a link to move through the tree
$(‘#slider a’).click(function() {
history.pushState({ path: this.path }, ”, this.href) // change the URL in the browser using HTML5 history module
$.get(this.href, function(data) {
$(‘#slider’).slideTo(data) // handle the page transition, preventing full page reloads
})
return false
})

// binds hitting the back button in the browser to prevent full page reloads
$(window).bind(‘popstate’, function() {
$(‘#slider’).slideTo(location.pathname)
})[/CODE]

Ok, hopefully that’s understandable. Now here’s my interpretation of what’s going on here, followed by my problem/issue:

The callback function for the GET request when navigating through the tree is the slideTo method, and an HTML string is passed in as an argument to that function. I’m assuming that slideTo is a function defined elsewhere in the script or in a custom library, as I can’t find it in the JQuery documentation. So, for my purposes, I’m trying to build my own version of this function. But the argument passed into this function, “data”, is just the string of HTML returned from the GET request. However, this isn’t just a snippet of HTML that I can append to a div in the document, because if I perform the same GET request (e.g. by typing the url into a web browser) I would expect to see a whole webpage and not just a piece of one.

You still with me? Am I interpreting this code correctly? I hope I’m not being too confusing. Ok, I am going to continue now. Here is my problem

So, within this callback function that I am defining, I would need to parse the “data” argument into a DOM so that I can extract the relevant nodes and then perform the animated transition. However, this doesn’t make sense to me. It generally seems like a Bad Idea. It doesn’t make sense that the client would have to parse a whole string of HTML just to access part of the DOM. GitHub claims this method is faster than a full page reload. But if my interpretation is correct, the client still has to parse a full string of HTML whether navigating through the tree by clicking (and running the callback function) or by doing full page loads such as by typing the new URL in the browser.

How would you approach this problem? When I write this code myself and try to make it work on my own, I feel like I’m doing something horribly inefficient and hacky.

Also in #JavaScript _↴