The Tree Slider
Those of you running recent versions of Safari, Chrome, or Firefox 4 may have noticed some changes to tree browsing on GitHub. The new HTML5 History API (which really has…
Those of you running recent versions of Safari, Chrome, or Firefox 4 may have noticed some changes to tree browsing on GitHub.
The new HTML5 History API (which really has nothing to do with HTML — it’s a JavaScript API) allows us to manage the URL changes while CSS3 transitions handle the sliding. Permalinks are always maintained, your back button works as expected, and it’s much faster than waiting for a full page load.
Basically we intercept your click, call pushState()
to change the browser’s URL, load in data with Ajax, then slide over to it.
When you hit the back button, an onpopstate
handler is fired after the URL changes, making it easy to send you “back”.
Want more? Check out the HTML History API Demo and MDC’s Manipulating the browser history documentation. Facebook has blogged about their use of this stuff, and Flickr has been doing it for months on their lightbox view.
There’s also some hot replaceState()
action over on our new Features page and the Pull Requests dashboard.
We’re still getting all the kinks out of the Tree Slider, but we hope you like it!
Written by
Related posts
![](https://github.blog/wp-content/uploads/2023/09/screencapture-innovationgraph-github-2023-09-20-15_44_54-1.png?resize=400%2C212)
How researchers are using GitHub Innovation Graph data to estimate the impact of ChatGPT
An interview with economic researchers who are applying causal inference techniques to analyze the effect of generative AI tools on software development activity.
![](https://github.blog/wp-content/uploads/2024/01/Enterprise-DarkMode-1.png?resize=400%2C212)
GitHub Availability Report: June 2024
In June, we experienced two incidents that resulted in degraded performance across GitHub services.
![](https://github.blog/wp-content/uploads/2024/06/AI-DarkMode-4.png?resize=400%2C212)
Advancing responsible practices for open source AI
Outcomes from the Partnership on AI and GitHub workshop.