I was browsing this website https://amaioswim.com/
and I did notice that when clicking on the navigation on the left side, the url address change instantly.
They also use a "fade out" and "Fade in" curtain to make the transition between pages seamless.
I'm wondering what kind of approach would you use to achieve this.
I know with JS you can change url, but only hashtags url... right?
or is it because they have a super fast server with 0 latency?
do you think they are loading everything ajax-ly in a same dvi container?
Thanks
This has little to do with the history API. (They are using that API to update the displayed URL, but that's a minor detail in how the site works; on its own it wouldn't create this behavior.)
This particular site is running a clientside framework. (I'm not seeing any obvious clues in the minified code as to which one.)
Links within the site are handled as AJAX requests. They're using the same endpoints for fresh page loads and for XHR calls, and are checking the X-Requested-With header to determine whether to send the full server-rendered HTML file (including the framework for the full site) or just the content for that particular page (which will be embedded clientside in the already loaded site.)
As evidence: this returns the full site (as when a user first visits that URL):
curl 'https://amaioswim.com/about'
This returns just the "about" content (as when a user clicks the "about" link after loading the site):
curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'
(You can also see this by viewing the Network panel in the browser console while navigating the site.)
Loading just the content for an individual page is, of course, much faster than loading the entire page HTML (and its CSS and JS), and allows you to add glossy effects like crossfades and animations while the AJAX call is in progress.
Since some years you can use the html5 history api:
https://css-tricks.com/using-the-html5-history-api/
It will allow you to manipulate the url quite freely.
For example when you scroll to a new section you can put that section at the end of the browser url.
That's history API in action. Find more details here
Try the pushState and replaceState methods, that should get you this behavior. To have more precise control over these, you might also want to take a look at popState event
Related
Twitter has the following UI behaviour that I want to replicate:
a homepage https://twitter.com with an endless feed you can scroll down;
if you click on a tweet it opens up with a dedicated URL (e.g. https://twitter.com/TheTweetOfGod/status/635493904834412545);
this tweet appears to be an embedded page/section 'on top' of the original feed, which you can still see around the edges but shaded darker;
If you click off the embedded tweet element (i.e. on the shaded area) you revert to the original https://twitter.com feed at the same point (i.e. page has not refreshed).
Note that if the tweet URL is opened up in a fresh tab then the author's profile page forms the shaded backdrop instead of the main feed page. So the main feed backdrop is only inherited if the tweet page has been accessed from https://twitter.com.
In web design terms does this design approach have a formal name/definition that might help me identify a suitable solution? I'm assuming it has a server-side dimension.
There are three aspects to your question. Let's first dive into the technology needed to implement everything, and then briefly discuss how Twitter leverages that technology.
TL;DR? Twitter uses the history API combined with AJAX and DOM manipulation to work its magic.
The techniques, and a little bit of background
(a) Changing the URL without refreshing the page (2 and 4 on your list)
There is an API for that, implemented by modern browsers.
window.history.pushState(state, title, URL);
window.history.replaceState(state, title, URL);
window.addEventListener('popstate', (event) => { /* use event.state */ });
The first two functions allow you to simulate the user navigating to URL. The first adds an entry to the navigation history, while the second replaces the current entry. This impacts what will happen when users use the back and forward buttons in their browser.
When users navigate back, or you simulate this using history.back(), the popstate event is fired and the state that you passed into pushState can be accessed via event.sate. The state can be any object, so this is useful to store, say, the title of the page (to update the document.title), the scroll position, or whatever else you want.
(b) Loading content directly
Because the entry is saved in the browsing history, it is possible that users visit this URL directly after having closed the tab or even their browser. They may also share the URL and have others visit it directly. In those cases, there will be no popstate event, but simply a request to your web server for the URL you passed to pushState. The URL must hence be meaningful to the server.
Twitter apparently loads the poster profile as a backdrop in this case. It depends on your use case what you want the page to look like. Anything goes!
(c) Loading content asynchronously (3 on your list)
Back to (a) for a bit. Twitter not only changes the URL, but also loads the tweet, meta data of that tweet and replies to it. This is then displayed in a modal popup.
Again, there is an API1 to load content asynchronously: AJAX. In particular, the XMLHttpRequest object and its functions are of interest. This can be used to make requests to the server and fetch content without needing the page to reload completely.
It is worth mentioning that a new API is being developed: the Fetch API. At the time of writing, there is basic support in all modern major browsers, but it is still somewhat under development.
After having fetched the content, it can be displayed on the page in any which way you like. JavaScript can be used to create, delete and modify elements in the DOM at will.
An example from your question: Twitter
Now that all techniques are on the table, let's summarize what Twitter does.
When a user clicks a tweet in their feed.
Load tweet meta data and replies (as described under (c)).
Create a backdrop and modal and populate them with the loaded content.
This uses standard techniques: create, delete and modify page elements.
Update the URL (as described under (a)) to enable easy sharing, amongst others.
When a user dismisses the modal.
Delete the modal and backdrop.
Update the URL (as described under (a)).
When a user directly visits the URL to a specific tweet.
Let the server respond with the profile page of the tweet author, with the tweet details loaded in a modal on top of it. Thus, no JavaScript is required at all. Of course, the modal can be dismissed just like in the previously described use case.
Implementing this on your own web site
You correctly identified that there are both client side and server side dimensions to this technique. The beauty of it is that, when implemented correctly, it is completely transparent to users. The only thing they will (not) notice is that there are fewer full page loads.
The references sprinkled throughout this answer should provide good starting points for you!
Final notes
All of this is sometimes also used to create smooth transitions between pages of the same site. In those cases, full pages are loaded asynchronously (as per (c)) and then a smooth transition, usually involving animations, is performed. There are many, many, many, many examples, tutorials and libraries for this. You may want to search for PJAX to learn and find more.
__________
1Not really a single API maybe, but an approach or mindset. See the MDN reference for more details.
I think that what is happening in Twitter is that the popup tweet loads the same content as the tweet in its own unique page; not that the modal has an unique URL.
If you use Angular, you can inject the same content into html modal templates or into standalone pages using route provider, and you could link from the modal content to the standalone page using the ID of the specific data to load that content.
EDITED TO ADD:
Here is the source code of a tweet in a stream of tweets, before it pops up as a modal:
<div class="js-tweet-text-container">
<p class="TweetTextSize TweetTextSize--normal js-tweet-text tweet-text" lang="en" data-aria-label-part="0">
Does anyone remember a 1990s TV show about a folklore prof investigating urban legends, shown on weird night on channel 4 <s>#</s><b>folklorethursday</b></p>
</div>
Here is the URL of the tweet when it is shown as a modal in front of the twitter feed: https://twitter.com/vogelbeere/status/887996116549107713
There are so many event listeners on the tag that it's hard to see which one is the link to the tweet.
So I have an iFrame which I am using to load the other pages for my website. To make the website seem like it has no load time and very smooth I have made a main page, with an iFrame in the middle to load the actual pages of the website that contain all the information. I have buttons using JS to change the SRC of the iFrame so that it acts like a normal nav bar.
I am curious to know if it is possible to make the URL on the browser, the same as the URL in the iFrame. Because right now when a user is on the website, they aren't switching to different pages, meaning they can't go back or forward in history because they never left the page in the first place. This can be troubling to most users if they want to link their friends to something, or just go back a bit.
Is there a way to do this in jQuery or JavaScript? Or even better, purely in HTML or CSS?
Thanks in advance.
EDIT: After googling a bit of what charlietfl has said, I am now wondering if it is possible to save a website into states, which I can then give web URLs to? I just skimmed through a few pages without reading them thoroughly so I'm not exactly sure what it was talking about when it mentioned states, but maybe there is something else out there that is capable?
You can try url hash like the gmail uses #inbox . It has the same functionality as you wish. It serves you the browser back and forward actions. You have to add more Javascript to handle those hashes. But i am not sure about its effect on seo (if you are only concerning about it).
For more details please go through these links
Gmail like URL scheme
Browser History Manager
I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!
what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.
Try this:
window.location.href="/yourUrl";
HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.
There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.
Is there any reason to NOT have a webpage retrieve it's main content on the fly?
For example, I have a page that has a header and a footer, and in the middle of this page is an empty div. When you click on one of the buttons in the header, an http GET is done behind the scenes and the .innerHTML() of the empty div is replaced with the result.
I can't think of any reason why this might be a bad idea, but I can't seem to find any pages out there that do it? Please advise!
It's not unheard of, but there are issues.
The obvious one is that some users have javascript turned off for security reasons, and they will not be able to use your site at all.
It can also negatively impact handicapped users that are using assistive technology such as a screen reader.
It can make it harder for the browser to effectively cache your static content, slowing down the browsing experience.
It can make it harder for search engines to index your content.
It can cause the back and forward buttons to stop working unless to take special steps to make them work.
It's also fairly annoying to debug problems, although certainly not impossible if you use a tool such as Firebug.
I wouldn't use it for static content (a plain web page) but it's certainly a reasonable approach for content that is dynamically updated anyway.
Without extra work on your part it kills the back and forward history buttons, and it makes it difficult to link to the pages each button loads. You'd have to implement some sort of URL changing mechanism, for example by encoding the last clicked page in the URL's hash (e.g. when you click a button you redirect to #page-2 or whatever).
It also makes your site inaccessible to users with JavaScript disabled. One of the principles of good web design is "graceful degradation"--enhancing your site with advanced features like JavaScript or Flash or CSS but still working if they are disabled.
Two considerations: Search engine optimization (SEO) and bookmarks.
Is there a direct URL to access your header links? If so, you're (almost) fine. For example, the following code is both SEO friendly and populates your page as you desire:
Header Link
The catch occurs when people attempt to bookmark the page they've loaded via JavaScript... it won't happen. You can throw most of those potential tweets, email referrals, and front page Digg/Reddit articles out the window. The average user won't know how to link to your content.
Where did you read it is a bad idea? It purely depends on requirements whether or not content will be populated on-the-fly. In most cases, however, the content is loaded along with the page not on-the-fly but if you need your content on-the-fly, it shouldn't be a bad idea.
If your content is loaded via javascript and javascript is disabled on users' browser then definitely it is a bad idea.
I cant think of a bad reason for this either (other than possibly SEO), one thing that would probably be a good idea is to load the data only once. ie
Show Div1 - do ajax/whatever only if the innerhtml is blank
Show Div2 - do ajax/whatever only if the innerhtml is blank
<div1></div>
<div2></div2>
This should keep the server load down so the divs content is only loaded once.
Cheers
This is pretty standard behavior in ajax enabled sites.
Keep in mind however that extra effort will be needed to:
ensure the back button works
link to (and bookmark) specific content
support browsers with javascript disabled.
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).