I know how to change content of a page using AJAX and remote loading of content. However, take a look at UStream's new layout. Click on any video, and not only does the content change without changing the page itself... but the entire URL changes as well. How is this done?
I know how to do it using the hashtag in a URL, and using JavaScript to detect when the location's hash value has changed. For example, site.com/#!/profile to site.com/#!/settings. Any value after the #! part is loaded remotely.
But UStream doesn't use the hash symbol at all. How is this accomplished? What voodoo is at work here?
You're seeing the HTML5 History API.
Related
I'm trying to create a gallery that allow custom url rather than url prefix with hashtag.
For example:
http://www.myportfolio.com/gallery/3
rather than
http://www.myportfolio.com/gallery#3
so far everything is working fine, if I access from http://www.myportfolio.com/gallery I was able to go to the next and previous image with the url updated.
My main issue now is although the url is now dynamic but it still cannot be bookmarked, if I enter http://www.myportfolio.com/gallery/4 to go the 4th image it doesn't work.
Is there a Javascript approach to this or do you need a combination of PHP to redirect the url?
It is possible to use client side JavaScript to handle this, although you'll need to set up the server so that every URL (that isn't for something like an image or script) loads the bootstrap document your SPA runs on. You just need to check location.href when the page loads and then set up the content you want.
That said, doing so is a very bad idea that completely misses the point of using pushState and friends in the first place.
The two points of being able to have a normal URL are that:
Clients where the JavaScript fails still get a useful page
The content for that URL is loaded in the initial page load (so it is available faster)
If you aren't going to take advantage of that, you might as well go back to hashbangs.
If I use ajax to change specific portions of the page, like a content section, which warrants a new URL (and requires one specifically for favoriting, or refreshing), is there some magic that I am not aware of that allows the user to click the back button and reload the content that was just there?
Or do you have to re-retrieve the data based on stored variables using popstate
Thanks!
I have a section of a site with multiple categories of Widget. There is a menu with each category name. For anybody with Javascript enabled, clicking a category reveals the content of the category within the page. They can click between categories at will, seeing the DOM updated as needed. The url is also updated using the standard hash/hashbang (if we are being Google-friendly). So for somebody who lands on example.com/widgets, they can navigate around to example.com/widgets#one, example.com/widgets#two, example.com/widgets#three etc.
However, to support user agents without Javascript enabled, following one of these category links must load a new page with the category displayed, so for someone without javascript enabled, they would navigate to example.com/widgets/one, example.com/widgets/two, example.com/widgets/three etc.
My question is: What should happen when somebody with Javascript enabled lands on one of these URLS? What should someone with Javascript enabled be presented with when landing on example.com/widgets/one for example? Should they be redirected to example.com/widgets#one?
Please note that I need a single page site experience for anybody with Javascript enabled, but I want a multi-page site for a user agent without JavaScript. Any answer that doesn't address this fact doesn't answer the question. I am not interested in the merits or problems of hashbangs or single-page-sites vs multi-page-sites.
This is how I would structure it:
Use HistoryJS to manage the URL. JS pushstate browsers got full correct URLs and JS non-pushstate browsers got hashed urls. Non-JS users went to the full URL as normal with a page reload.
When a user clicks a link:
If they have JS:
All clicks to other pages are handled by a function that prevents the default action, grabs the HREF and passes the URL to an ajax request and updates the URL at the same time. The http response for that ajax request is then parsed and then loaded into the content area.
Non JS:
Page refreshed as normal and loads the whole document.
When a page loads:
With JS: Attach an event handler to all your links to prevent the default so their href is dealt with via Ajax.
Without JS: Nothing. Allow anchors to work as normal.
I think you should definitely have all of your content accessible via a full, correct URL and being loading it in via ajax then updating the URL to reflect the address where you got your content from. That way, when JS isn't running, you don't have to change anything.
Is that what you mean?
Apparently your question already contains the answer. You say:
I need a single page site experience for anybody with Javascript enabled
and then ask:
What should someone with Javascript enabled be presented with when landing on example.com/widgets/one for example? Should they be redirected to example.com/widgets#one?
I'd say yes, they should be redirected. I don't see any other option, given your requirements (and the fact that information about JavaScript capabilities and the hash fragment of the URL are not available on the server side).
If you can accept relaxing the requirements a bit, I see another option. Remember when the web was crowded with framesets, and we landed on a specific frame via AltaVista (Google wasn't around yet!) search? It was common to see a header saying that page was supposed to be displayed as a frame, and a link to take the user to the frameset version.
You could do something similar: when scripting is available, detect that you're at example.com/widgets/one and add a link to the single-page version. I know that's not ideal, but it's better than nothing, and maybe better than a nasty client-side redirect.
Why should you need to redirect them to a different page. The user arrived at the page looking for an answer. He gets the answer even if he has javascript enabled. It doesn't matter. The user's query has been fulfilled.
But what would happen if the user lands on example.com/widgets#one ? You would need to set up an automatic redirect to example.com/widgets/one in that case. That could be done by checking the if javascript is enabled in the onload event and redirect to the appropriate page.
One way for designing such pages is to design without javascript first.
You can use anchors in the page so:
example.com/widgets#one
Will be a link to the element with id 'one'
Once your page works without javascript, then you add the javascript layer. You can prevent links to be followed by using the event.preventDefault.
(https://developer.mozilla.org/fr/docs/DOM/event.preventDefault), then add the desired javascript functionality.
Bleacherreport has a function on their website that lets you browse between stories with arrow keys. While that is nothing spectacular, I would like to understand how they do so AND change the URL in the address bar in the browser.
It's one thing to load up new content via AJAX, but I've never seen it done alongside refreshing the URL. There is also a slide to the left animation from one content to the next.
example:
http://bleacherreport.com/articles/1295213-in-depth-look-at-the-business-behind-a-holdout
use arrow keys
They aren't really "refreshing" the URL. As you said, they are using AJAX to grab the new content, and then once it is loaded, updating the URL (probably via window.history.pushState) to match what the route for that specific article is (that way if you actually did refresh the page, you'd still be taken to the same content).
You can do this manually (with the aforementioned window.history.pushState), or there are lots of frameworks that handle client-side URL routing, such as Backbone.js and Sammy.js.
I have a page (http://myflashpics.com/picture/p9e0) with some user information in the side and small thumbnail in the side. What it's doing now is linking to a whole different page and the sidebar reloads as well. I was wondering if it was possible to change the image, comments section, the caption, as well the URL so if the user wants to link to it anywhere.
This might not be possible - but if it is I don't even know where to begin Googling this or even starting to comprehend how this will work.
All answers are appreciated! Links and source code would be nice too.
In browsers that support HTML5, you can use window.history.pushState to perform AJAX partial loading of pages and still completely change the URL of the page. This is what GitHub uses (see some more info as well as a video demonstrating the technique at their blog post, The Tree Slider). There is some great info on the subject on the Dive Into HTML5 History API page.
On browsers that don't support HTML5, you either must use location.hash (if you want linkable URLs) or else don't use AJAX (and stick with your current implementation). I am in the camp that uses jQuery for this task.
sounds like a situation for
jQuery history plugin
jQuery.ajax() – jQuery API
In short, you can't change the URL without reloading the page but you can use AJAX to load new data ad if the page had changed. You can also track history by changing anything after the "#" in the address bar. A good example of a site that implements this is grooveshark.com
You can do this simply using ajax. If you need to change the urls change the location.hash property using Javascript.