This is a simple example using Push and Popstate. This practice is becoming more common throughout sites such as Twitter and Facebook for changing a URL within the address bar without reloading another page. Typically this allows users to bookmark or share URLs when sites are using some type of infinite scroll.
These two methods are now a part of the extended Javascript History API introduced in HTML5.
Ideally pushState is used to push a new URL to the address bar; while popstate is executed once a user hits 'Back' in their browser. Essentially pushState is a function and popstate is an event.
The example below will simply modify the URL of a given page. However, this method can only modify locations within the same domain. The purpose of this example snippet is to provide a basic understanding of these two methods work. Sidenote: we'll also be making use of jQuery but, it's not required.
Thanks to Stackoverflow for some of the popstate code used here. Some browsers (Chrome thusfar), execute popstate on initial page load, so the code presented here is used to detect and circumvent that.
<a href="#" data-location="/inbox/12">Email Item 12</a>
<a href="#" data-location="/inbox/13">Email Item 13</a>
$('a').click(function (e) {
e.preventDefault();
// Detect if pushState is available
if(history.pushState) {
history.pushState(null, null, $(this).attr('data-location')); // URL is now /inbox/N
// showMailItem(); // example function to show email based on link clicked
}
return false;
});
// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
$(window).bind('popstate', function (event) {
// Ignore inital popstate that some browsers fire on page load
var initialPop = !popped && location.href == initialURL
popped = true
if (initialPop) return;
// showMailOverview(); // exmaple function to display all email since the user has click Back.
});
Not quite what I was after, but that's alright. I was reading your description and it sounded as if it behaved like a Stack object, Stacks can push and pop objects to and from the top of the stack. LIFO type data structure.
Whereas this pushes and pops URL information when the back button is pressed (Presumably to load the previous page state).
Maybe something along the lines of "Dynamic URL Changer". Try this search: https://www.google.com/search?q=dynamic+URL+changer&oq=dynamic+URL+changer - If you respond to the StackOverflow questions with a link to your solution here you might just get some StackOverflow rep and quite a few pageviews here.
I'm not exactly sure what you're referring to but, Javascript is a great OOP language that also allows for procedural programming. jQuery however, is a framework that's generally used to simplify workflow for common tasks (such as events, requests, etc.). Hopefully that helps a bit :)