I'm developing a simple one page website, where the pages scroll horizontally using the scrollTo() javascript library. I have a home / about / contact page. I was wondering if there was a way to still use some form of URL routing like www.example.com/about, to get the about page, and would get updated in the browser when the page was clicked in the navigation.
Your easiest bet is going to be to use hashes. i.e. www.example.com/#about
You can then use window.history (more reading) in order to change the URL without a page reload. Specifically, you will be looking for history.pushState() or history.replaceState()
Depending on what browser support you need, you might need something like History.js to fall back in IE.
You could load the page with Ajax
Related
I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.
The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.
Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.
Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.
I believe this is due to the new History pushState HTML5 feature
They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php
The tutorial to implement is right here : http://t.co/M4RvnvoQ
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?