Ajax CSS HTML jQuery

Create gmail like app using html5 history api and hashbang

Today i solved one mystery which was bouncing around in my mind since the day i saw gmail. How come google guys handle all the gmail operations without refreshing the page even once ? I was under impression that this should be something divine, like i was thinking about one of the facebook’s script, add friends to the list. In case of facebook it was sight cheating but in case of google its not sight cheating its purely a technology, no doubt about it. I was expecting that google guys might have written some javascript compiler or something huuuuge for manipulating gmail and other things, but when i read about
HTML5
i came to know the secret behind gmail’s no-refresh concept. Gmail is taking good advantage of javascripts onhashchange event and newly launched HTML5’s History API. Lets reveal the secret behind

create gmail like app using html5 history api and hashbang”.

Same thing can be achieved with Ajax but there are few drawbacks of using ajax, so to achieve the same effect we might need to code more lines of code. 2 main drawbacks of ajaxthat can create headache for us.1) Ajax requests did not automatically register themselves with the browser’s history engine, so clicking the browser’s “back” button may not have returned the browser to an earlier state of the Ajax-enabled page, but may have instead returned to the last full page visited before it.
2) Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application.To overcome these drawbacks HTML5 has introduced History API

Second this that we need to know about is hashbang urls (aka hashtag) Hashtag is the backbone of many famous web apps like Google Analytics and well known application twitter. Have you noticed urls like https://twitter.com/#!/amitspatil, https://twitter.com/#!/following, https://twitter.com/#!/followers etc.

create gmail like app using html5 history api and hashbang

gmail html5 history api hashbang

gmail html5 history api hashbang 1

Ok, I stop explaining the things (go to the bottom and find more links to study HTML5 history API and hashtags) lets come to the topic, and lets create gmail like app using html5 history api and hashbang. Here i am posting code that we have used to create gmail like app using html5 history api and hashbang.
Note : This demo “create gmail like app using html5 history api and hashbang” is only supported in major browsers which supports HTML5.

 

View Demo

 

More References for HTML5 history API and Hashbang (Hashtag)

1) Manipulating the browser history
2) Introducing the HTML5 History API
3) window.onhashchange
4) Intelligent State Handling

33 Comments

    • You can see, Mine demo is working in forefox, chrome, opera, IE. Do u see any java script error in crome developer tool ??

    • $ is not defined” means jquery is not included…check with ur jquery path. Also check if u are including jquery file multiple times and different version. Are u using this demo in any existing app or standalone ? standalone should work.

  • Mm, nope. There is no error message as I can see. After clicking the “Like” button, the form gets static and can’t even click it. Using opera latest btw. You mind send it to me by mail?

    • Sorry yigit i was confused and thought u and sankalp sharma are same person 😛 can u please send me ur email id via contact form so i can send u the code.

    • Its really amazing that u r just 12 😮 and still u know html, css , js. When i was in diploma first year…I didnt know which button starts computer. I spent that programming practical sitting idle 😛

    • I will send u the script on ur email. But can u please tell me which browser r u using, so i can solve the download issue for that perticular browser.

  • Your requirement of clicking “like” is kinda anti-social. My facebook profile isn’t my professional profile. Also enforcing facebook membership to get your data is a pretty annoying thing as well.

    Share for the love of it or not at all.

    • @Dano: I am not agree with your comment. I am just asking to “like” it, its not facebook app that stores your email id, info, photos etc, its just simple “like”, and we “like” 10+ things (sometimes useless things) a day on fb, i am just asking one more like from you. I am requesting users to like my page, this way i will get one visitor and they will get new script, I want my scripts to reach more and more users. And last thing its not at all forceful, u can click like button, download will start and then u can unlike it, that also do, or second thing is if you dont want to click that “Like” button at all you can request the script for free.

      • Not everyone has a Facebook account, but the like button mechanism failed anyway.
        Honestly, if your script is as shonky as this website, who’d even want it?

        • 1) Not everyone has a Facebook account – Almost everyone has fb account. Just in case if someone dont have it they can request code for free.
          2) Like button mechanism failed – Its working, May i know, Which browser and version you are using.
          3) as shonky as this website – Nothing is perfect. Sorry for the inconvenience caused to you browsing site.
          4) if your script is as shonky as this website,who’d even want it – If you dont want it then you dont have to worry about anything. Thanks for your time writing this comment, even if this script was of no use for you at all.

  • @Dano I wonder how stupid you are!!!!!!!!!!
    Someone gives to you ABSOLUTELLY FREE an amazing script and you consern FOR IT??????
    Are you so fool???????????????????????????????

    @ Mr Amtl you ve done a great script !! MANY THANKS AND KEEP UP!!!
    YOU ARE A HERO!!!!!!!!!!!

  • hi AMIT Grate work man, i have like the page but did not respond, and i have send it to mail as the alternative but did not start the download as it expected. Thank

  • I need funtionality like create mail with all those facilities to,subject,content and multiple attachment,
    in to email suggation box with image name and email id same as gmail.Can u help me with that?
    myno is 08095782748

  • Its works but i think some comments or a little explanation of the javascript code would help reader know whats happenin instead of just making it work.

Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Shares

Let your friends know what are you reading

Share this post with your friends!