How to implement jQuery Mobile Animated Ajax page navigation (transitions) in simple javascript

Question

I am using CSS3 based animation to animate pages using javascript in single page applications. I recently worked with jQuery mobile. For all links, by default, jQuery Mobile loads pages using ajax and animates them.

One way I can do this is to add a hash of the url (this is how gmail works). But I do not want to use hashes, I want to change the full URL, as jQuery Mobile does.

Can we implement the same functionality for a single page application using only javascript.

Need help really bad.

Answer 1

To change url, you can use something like this:

window.history.pushState("object or string", "Title", "/new-url");

See this link for more information: Updating the address bar with a new URL without a hash or reloading the page

If you want to load some content into the DOM using AJAX (which allows you to do image fading, etc.), you would do something like this:

$('.ajax_content').load( 
    //The Url + Only fetch this div from the page.
    $(this).attr('href') + ' #someDiv', 
    function() {
        //Do something when it complete.
    }
);

.ajax_content there will be a div into which you load the content.

Note: This + ' #someDiv'is optional. It allows you to load only a specific div in the Url that you load (so that you can no longer load the whole body into your DOM.

More information about .load()can be found here: https://api.jquery.com/load/

Answer 2

jQuery Address

ajax, URL- , .