4

I have been using CSS3 based animations to animate the pages using javascript in Single page applications. Recently I worked with jQuery mobile. For all links by default jQuery Mobile loads the pages with ajax and animates them.

One way I can do is by appending url hash (this is how gmail works). But I dont want to use hashes, I want to change the complete url like the way jQuery Mobile does it.

Can we implement the same functionality for Single page application using just javascript.

Need the help very badly.

  • I believe that's done using `history.pushState()` – Jason P Feb 11 '14 at 13:47
  • you need to load external pages into DOM via Ajax as jQM does, in order to animate/alternate views. – Omar Feb 11 '14 at 16:58
  • @Omar Thanks, Will be grateful if you can provide solution, because I am also struggling with the same problem –  Feb 14 '14 at 07:30
  • @Venky it is similar to coding a brand new framework. It's not about loading and animating, it involves updating history and creating custom events in order to handle transition between pages/views. – Omar Feb 14 '14 at 09:45
  • @Omar Thanks for your help. I will try to implement it bit by bit. –  Feb 14 '14 at 09:59
  • @Venky you can go through [jQM JS on GitHub](https://github.com/jquery/jquery-mobile/tree/master/js) code to get an idea how jQM does it. Also, you can [download a custom jQM library](http://jquerymobile.com/download-builder/) including widgets/events you want. – Omar Feb 14 '14 at 10:09

2 Answers2

1

To change the Url, you can use something like this:

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

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

If you want to load some content into the DOM using AJAX (Which allows you to do your view 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's complete.
    }
);

.ajax_content would be the div you are loading the content into.

Note: + ' #someDiv' is optional. It allows you to only load a certain div in the Url you are loading (so you can avoid loading all the body into your DOM again.

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

Community
  • 1
  • 1
webnoob
  • 15,747
  • 13
  • 83
  • 165
0

I suggest using jQuery Address plugin

It can load page via ajax and the urls could be customized to whatever you want.

Capitaine
  • 1,923
  • 6
  • 27
  • 46