Web Development

iGoogle Portal Implementation: How to do it?

After developing the draggable div application the other day, I was itched to implement the whole iGoogle portal. Probably the drive came when a few of you asked me “These draggable divs are just like iGoogle”, so I thought why not to give a shot at it.

Here is what I was able to come up with while sitting idle at the office. I have shown 3 tabs for making it look more of a realistic demo. However only the news tab is operational as of now. Feel free to drag and drop any of the news box to any corner of the page and rest of the boxes will make place for it. 🙂

Find the implementation of this application here.

Basically it proved out to be a derivative of the previous application i.e. draggable div. However this one is a bit more modular, will easily fit into any changes made to the tabs and tab names or what ever.

Feel free to post a comment or two at the blog here.

Finally make your portals like iGoogle 😛

12 thoughts on “iGoogle Portal Implementation: How to do it?

  1. Hi, Sorry mate but recognized that only after I posted this stuff. It kindda shifts and is mis-aligned for IE7,8.

    Also you will find most of my apps are not customized for IE, I just build them on FF.

    Motive is just to make it possible, cross browser thing can be handled any day 🙂

  2. Where is the downloadable code for this? I have been hunting the net for hours and this is by far the best I have seen. If I can grab the code it would be a HUGE help!

  3. Hi Phat32,

    Actually the code is only html and javascript which you can any given day access by viewing the source of http://abhinavsingh.com/webdemos/igoogleportal/

    If you are still having any trouble in understanding the code, kindly let me know. I will try to put up some code with explaination.

    Basically I planned to release all these web demos as an API on which I am working. But I can provide you help if you want.

    Kindly lemme know if you can understand the process from the source code of the above page.

  4. Lol oh right! I actually never thought of that =P.

    This is great code and will for sure help with many things. Thanks for making this publicly available and helping the lost like me =P

    Keep up the awesome work! And thanks for the ultra fast reply!

    1. Right Khela, with jquery and other frameworks its more of a play ground now. I tried this when i knew little about any framework with built this demo with pure javascript. Thats a good tut indeed.

  5. Hi Abhinav,
    Have you been working on this interface recently>
    I liked your iGoogle type of interface. If you have further developed it then kindly let me know.

    Best wishes

Leave a Reply