www.webdeveloper.com
Results 1 to 6 of 6

Thread: Web 2.0 layout - drag and drop

  1. #1
    Join Date
    Jan 2005
    Location
    UK
    Posts
    381

    Web 2.0 layout - drag and drop

    Hi Folks,

    Are there any tutorials on how to go about creating an interface, where users can customise content and display whats relevant?

    Big sites like yahoo, myspace, facebook, bbc all do this.

    Are there any tutorials on how to go about it?

    I have basic knowledge of AJAX and XMLHttpRequest

    Thanks in advance

  2. #2
    Join Date
    Aug 2006
    Posts
    68
    Um that's a very broad question.

    What exactly do you want to make? A webpage, an application, a forum?

    Most likely, you will need to learn a server-side language (such as PHP or ASP, go to http://w3schools.com/) and SQL for database access.

    You need to be much more specific about what exactly you want to do.

  3. #3
    Join Date
    Jan 2005
    Location
    UK
    Posts
    381
    Thanks for your reply.

    I just want to create a webpage where users can move around elements and hide/ show content thats relevant to them.

    Like the new http://www.bbc.co.uk homepage.

    Users can drag elements around the page, that 'snap' into place. The layout is saved to a cookie for next time they visit the site.

    I've found some basic drag and drop javascript tutorials, but nothing of any detail.

    I've read the next release of Adobe's SPRY framework will have drag and drop but I'd like to do something myself.

    Can anyone point me in the right direction?

  4. #4
    Join Date
    Jan 2008
    Posts
    120
    Try http://www.walterzorn.com/dragdrop/dragdrop_e.htm

    It has some really good drag and drop, and for the hiding and showing you could use style.display = "none" or "block";. I'm currently working on a page that implements all of that, but its at about 5000 lines of code right now, so I'm not even going to try to post that.
    My code never has bugs. Just unintentional features.

  5. #5
    Join Date
    Aug 2006
    Posts
    68
    jQuery is a very nice library, which allows you to do many interface stuff.

    Go to http://jquery.com/ for more information.

    For an example, with source code, go to http://sonspring.com/journal/jquery-portlets

    Note, the example doesn't use cookies to save state, but that is relatively simple. I'm assuming you know javascript (if you want to create something as complicated as this).

    To save state, get any cookie set of functions (such as a jQuery plugin, or just a group of functions), and set a cookie to store state, every time the layout is changed. Then when the page is opened, read the cookie, and lay out the page appropriately.

  6. #6
    Join Date
    Feb 2010
    Location
    Pensacola
    Posts
    5

    The BBC.CO.UK has their own library glow

    http://www.bbc.co.uk/glow/

    PS. when writting scripts.

    Don't forget to do

    <script type="text/javascript">

    glow.ready(function(){ write your script here }

    </script>

    It will save you an hour trying to find the solution.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles