Menu
I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not. Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
505
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by @escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done link
edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav><a href="page.html">Link</a></nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
158
The technique is called a "Single page application" (a.k.a. SPA). You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluent user experience similar to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
#content element which contains the html of that specific page, according to the URL.event.preventDefault()
history.pushState(stateObj, title, path))window.addEventListener('popstate', handler))
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
