creating something like pageflakes

Question

anyone know of a tutorial that lets you create something like pageflakes.com for your website? in jquery perhaps?

Answer 1

You can use the UI library from jQuery where you'll find the draggable elements with grid. Besides that you only need to set and read some cookies that determine the position of each of the boxes. Let's say your layout has 4 <div>s. Just save each id and position in a cookie (from javascript or by performing an AJAX request to a php/asp page).

Displaying the page is also pretty easy, you have to have 2 possibilities: when the user has a cookie defined, or else (this would be the default). If the user has a cookie defined, read it and position the <div>s like the cookie says, it shouldn't be too hard to do this.

Answer 2

This article on CodeProject has an excellent tutorial on how to build almost exactly what you're after, except that it uses ASP.Net Ajax. You would easily be able to substitute that with jQuery though.

Answer 3

The creator of PageFlakes, Omar al Zabir, has created an open-source web portal called DropThings. Can't get any more similiar to PageFlakes than that!

Answer 4

.nettuts has an example all done in jquery and jquery ui. Here's the link:

http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

Goes through it all in very nice detail too. It won't be a direct copy of pageflakes, that's an exercise left for the reader but it does show exactly how to start.

HTH!

Answer 5

Check out ExtJS's Panels. They're what's used to build this pageflakes look-alike: http://extjs.com/deploy/dev/examples/portal/portal.html

Answer 6

Check out http://www.linksgrid.com its like pageflakes done in asp.net mvc