I have navigated sites where after signing in, i see the address as, for example:
https://examplesite.com/access
Once arrived, all the links on the landing page are navigable, but the corresponding address of the link never appears in the address bar.
I don't want to hide the address bar, I just don't want the page names to appear in the address bar. It is a cleaner way, instead of having the user see all the lame names of each of the web pages. To me, it just looks better.
Download the wappalyzer extension for chrome / firefox this will help you determine what technologies are being used on the website (though not all the time).
Those sites that are not changing the url will be either utilizing React, AngularJS or another form of JS library which is pulling in data using ajax.
Hope this helps
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.
I'm very familiar with php/js/ajax, but I'm a little confused as to how to pass the popup link to the address bar.
Basically I have a custom jquery popup. Let's say I click on a link that loads the popup, I want to pass parameters to the address bar so that it reads out the address of whatever I want.
So let's say my page that contains the videos with the links is:
mydomain.com/videos/index.php
and when a video is clicked I want it to read the following in the address bar:
mydomain.com/video/youtubeid
I actually have it all set up to work on the video page if they were to come back to that link. I don't want a popup to come up obviously. The popup links page is like /video/video_pop.php
How would I go about doing this? Is there some way to change the address bar? Is this a htaccess rewrite thing?
Thanks!
You can use the Javascript history API to change the address in the address bar without reloading the page. Mozilla provides instructions at https://developer.mozilla.org/en-US/docs/Web/API/History_API
Okay, so this may sound confusing, so let me explain. I'm working with a theme in wordpress that has a single page layout and standalone page layouts. In the single page layout, every navbar link you click on scrolls you to a section of the page. In the standalone pages, when you click on a navbar link that contains content for the home page, it links you to a standalone page of that content rather than going to the home page and scrolling to the content.
Now before I get many answers saying just do url/#content block, it doesn't work as the theme creator decided to use multiple ids all named content. Horrible I know. I've tried a lot of things actually. So the idea I have now, is to store a cookie when the user clicks a link in the #header navbar and store a cookie in the browser. When the user reaches the homepage, the homepage checks that cookie and scrolls the to the proper area.
I've never worked with cookies to know how to write the code, I just understand how they work from php, I figure javascript is somewhat similar. If something is unclear, please ask.
You have 2 types of cookies, Http only and regular (you have more, but for this question the others are non relevant). Since here you are talking about creating cookies in JavaScript, the Http only cookies are non existent.
This javascript basic library will give you the tools to do what you want.
Now, from my own view of this problem, I would recommend using local storage only if your viewers are using new browsers (old IE won't work). This javascript library will explain how to use it.
Hope I helped, Cheers!