Veerasundaravel's Ruby on Rails Weblog

December 2, 2011

Change browser URL without reloading the page – jQuery – HTML5

Filed under: jQuery, Ruby On Rails — Tags: , , , , — Veerasundaravel @ 4:14 pm

The traditional way of changing the browser url is just adding hash to the end of current URL like window.location = “#q=test&sort=date”;

But if you want to change complete url like window.location = “/profile/show/1”; will redirect the user to that page but it will reload page. So how we can change browser URL with reloading  the page. The better solution is HTML5 History API. More ever the jQuery plugin History.js provides lot easier configuration and options to achieve this.

History.js:

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

Download & Installation:

  1. Download History.js and upload it to your webserver. Download links: tar.gz or zip
  2. Include History.js
    • For jQueryv1.3+
      <script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
    • For Mootoolsv1.3+
      <script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/mootools.history.js"></script>
    • For Right.jsv2.2+
      <script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/right.history.js"></script>
    • For Zeptov0.5+
      <script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/zepto.history.js"></script>
    • For everything else
      <script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/native.history.js"></script>

Note: If you want to only support HTML5 Browsers and not HTML4 Browsers (so no hash fallback support) then just change the /html4+html5/ part in the urls to just /html5/. Why supporting HTML4 browsers could be either good or bad based on my app’s use cases

Working with History.js:

once after including the javascript you can change the browser URL just by calling any one the js statement.

History.pushState({state:1}, “State 1”, “?state=1”); (or) History.replaceState({state:3}, “State 3”, “?state=3”)

(function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

How would the above operations look in a HTML5 Browser?

  1. www.mysite.com
  2. www.mysite.com/?state=1
  3. www.mysite.com/?state=2
  4. www.mysite.com/?state=3
  5. www.mysite.com/?state=4
  6. www.mysite.com/?state=3
  7. www.mysite.com/?state=1
  8. www.mysite.com
  9. www.mysite.com/?state=3

Note: These urls also work in HTML4 browsers and Search Engines. So no need for the hashbang (#!) fragment-identifier that google “recommends”.

How would they look in a HTML4 Browser?

  1. www.mysite.com
  2. www.mysite.com/#?state=1&_suid=1
  3. www.mysite.com/#?state=2&_suid=2
  4. www.mysite.com/#?state=3&_suid=3
  5. www.mysite.com/#?state=4
  6. www.mysite.com/#?state=3&_suid=3
  7. www.mysite.com/#?state=1&_suid=1
  8. www.mysite.com
  9. www.mysite.com/#?state=3&_suid=3

For further detailed documentation and queries you can refer : https://github.com/balupton/history.js/blob/master/README.md

Advertisements

September 16, 2010

Styling the Browse button using jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Want to see how it works? Check the demo page.

Thanks to RajaSelvam for introducing this plugin.

Reference URL: http://www.appelsiini.net/projects/filestyle

September 14, 2010

zRSSFeed – RSS Feeds Reader for jQuery

Filed under: jQuery — Tags: , , , , , , , , , — Veerasundaravel @ 12:55 pm

A jQuery plugin will read RSS feeds from any website url using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use.

Reference Url: http://www.zazar.net/developers/zrssfeed/

How to do:

1. Download the latest plugin  from the above mentioned URL and add it to your application directory.

2. Include the jQuery and zRSSFeed libraries.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8221; type=”text/javascript”></script>
<script src=”jquery.zrssfeed.min.js” type=”text/javascript”></script>

3. Add a DIV tag where you wish the feed to display and give it an ID. There is no need to specify a class, this will be added.

<div id=”test”><div>

4. Now add the script to call the zRSSFeed plugin with the RSS url and any options. Our example gets 5 feeds from the Reuters site.

<script type=”text/javascript”>
$(document).ready(function () {
$(‘#test’).rssfeed(‘http://feeds.reuters.com/reuters/oddlyEnoughNews&#8217;, {
limit: 5
});
});
</script>
5. Finally now you can see the RSS feeds from the specified url.
Older Posts »

%d bloggers like this: