I have used the following script but it doesn't show the url of link.
add
<div id="right_side_contnet"></div>
$(document).ready(function(){
$('.loadpage').click(function(e){
e.preventDefault()
$('#right_side_contnet').load(this.href)
});
});
Ajax navigation can't simply change the browser history, and this is actually what you are looking for I suppose. This can be achieved by making use of history API introduced in HTML5 either by
Manipulating the history manually by the history API. MDN, html5doctor
Use well implemented third party libraries for manipulating history. I'd suggest pjax or history.js
Related
I have a complete page with a menu like this:
<li>Page 1</li>
<li>Page 2</li>
and so on. This is working just fine without jQuery but because I would like some animation effects on side change I decided to use jQuery, like:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#wrapper').load(link+' .content');
});
});
By using this jQuery, an exact representation of page1.html, page2.html is reconstructed, but with ajax requests instead. My problem here is that I of course would like the url in the web browser to change accordingly. Now it just says "www.mypage.com" when I would like it to show "www.mypage.com/page1.html" when the first link is fetched with ajax. How can I achieve that?
If you change the URL that way, it will reload the whole page from the server, and that's not what you want to do.
What you want to do it's an SPA. To do so you can only change the anchor part of the URL, i.e. add a hash followed by whatever you want, for example:
www.mypage.com#page1
www.mypage.com#page2
Usually, apart from changing the url, you want to change the page content if the URL changes. This is knwon as routing, and most frameworks like Ember.js, Backbone, AngularJS, Durandal and so on include one. As you don't need a framework, you can use an independent one like router.js. Better than router documentation itself, look for some examples like this.
I found out the javascript method pushState, with that you can just do:
$('a').click(function(){
var link = $(this).attr('href');
window.history.pushState(null,null,link);
});
and the web browser link is updated correctly. This seems to work in all modern browsers except IE9 I think. With this method I get exactly the same url as if the page was served static, which is a huge advantage in my opinion.
I'm using Jquery Mobile in an existing web application. The problem is, Jquery Mobile is processing all URL hashes. For example:
mysite.com/#foo
Here, the hash 'foo' is being sent to Jquery Mobile, and it is processing it, instead of letting my non-jquery mobile code process it.
Is it possible to prevent Jquery Mobile from interfering with the url hash?
The default behavior of jQuery Mobile is listening to hashchange event and updates URL hash in order to handle history of pages, only when Ajax is enabled.
To handle pages linking, both changeHash and hashListeningEnabled properties should be disabled on first run mobileinit. This event fires before loading jQuery Mobile library and .ready(); it should be used to change Global Settings of the framework.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.extend( $.mobile, {
changePage.defaults.changeHash: false,
hashListeningEnabled: false
});
});
</script>
<script src="jquery.mobile.js"></script>
Have you considered encode/decodeURIComponent to "hide" your hashes from JQM?
I'm not using it directly for hashes, but I need me own logic for processing links like this:
./foo/index.html#document/subfolder/items?sort=descending
which JQM will does not allow currently because slashes and query params after a hash are ignored (params) or added to the folder path (/foo/subfolder/items/).
However doing this:
./foo/index.html#document%2Fsubfolder%2Fitems%3Fsort%3Ddescending
goes unnoticed by JQM.
Should also work for the hash.
You should use data-url for this.
See this article
<a data-identity='cat5' data-url='?cat=5' href='javascript:void(0);' >listitem text</a>
A bit old but still should work
I've noticed many websites (like Hulu.com), have very interesting page transitions. They manage to fade out of a page and into a new one.
How would this be accomplished with jQuery/Javascript. Would I somehow have to link a .js to both web pages? How would I do this?
You could do this with a combination of PushState part of the History API (pjax is an excellent way to add this to an existing site) and jQuery. This is how github handles it (try browsing folders of source code, and look at the URLs). What pjax lets you do is intercept any <a> click before the page redirects, fetch the page that would load via ajax, insert the HTML in your page (which you can control with jQuery animations like fadeIn()) and the update the browser URL so the page can be bookmarked.
No need for a .js reference on both pages, just the page before.
There are many plugins for jQuery that support most transitions.
This looks like a pretty comprehensive list, although 2010 dated.
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
After playing around with https://battlelog.battlefield.com/ and https://github.com/
I noticed it does not reload the page when changing the path. The incredible fit is that it does not use the hashtag unlike Facebook and Twitter.
So, how does it do it?
look into History.js and the push state options it supports. It's a very robust library.
Regardless of whether I'm trying to go to index.html#ExistingAnchor or index.html#NotExistingAnchor or any other anchor which might or might not exist on the page I'd like some javascript function to be run.
<html>
<body>
<a name="ExistingAnchor"></a>
</body>
</html>
What javascript code can I use to achieve it?
The page may already be loaded so I'd be just visiting HTML anchors on the same page from the browser address bar without reloading the page.
Also, having visited a number of anchors on the same page when I'm using the Back and Forward browser history buttons, I'd like some JavaScript function to be run as well so that I could identify what anchor I'm currently on - could you please advise this as well?
On modern browsers you can implement onHashChange event, on IE6/7 you're going to need to use some trickery involving iFrames and window.setTimeout.
The jQuery history plugin will achieve what you want if you use jQuery, if not you can study it and port it for your needs.
http://tkyk.github.com/jquery-history-plugin/