SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Draggable pane scrolling

    Hi,

    This is a bit of an odd question really. What I'm looking to do is present a large landscape image or html content (say, 5000 pixels wide) inside a container of 500px width, and have that content draggable inside the container so that you can click and drag to 'spin' the content along. I'm sure it would be quite simple to do as a plain drag and drop mechanism, but what I'm looking for is momentum so that you can scroll through the image really smoothly.

    Can anyone find an example of this type of thing using one of the common scripting libraries (jquery etc)? I'm not sure how it would be described, so Googling isn't really working.

    Thanks...

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think what you're referring to is image panning? Where you drag an image around and it moves the image around in the view?

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, not exactly. It needs to be able to serve HTML content as well. I think I know the type of thing you're talking about (e.g. 360 degree image viewers like www.clevr.com) but they only work with images and also only allow rigid click scrolling around an image - not scrolling with any kind of momentum/friction.

    Apparently the iPhone does what I'm after. You can flick your finger across the screen and it flicks through the content in a nice smooth way according to how quickly you flick, and it slows down with 'friction'. This is what I'm looking for, but obviously browser based and controlled by mouse not touch-screen. I'm wondering if anyone has attempted this kind of UI on the back of a scripting library. It's probably possible with Flash, but I'd rather avoid Flash.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's definitely possible, but I didn't find anything pre-made.

    Here's a flash example of what I think you're talking about (the Throw part)
    http://www.etsy.com/color.php

    And here's a guy asking for it in jQuery
    http://www.nabble.com/plugin-to-'throw-items-around'-td15470834s27240.html

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I was reading a book recently about programming ajax and it began with the google maps technique and took you through how to create that for yourself, but I cannot for the life of me recall what the book was called.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks. Looks like I'll have to give up on my hairbrain scheme for the time being! I'm not good at Javascript so even to modify one of the libraries (jquery etc) would be a pretty steep curve. Someone's bound to come up with something like this, if even just to copy the iPhone interface - like people have done with the OSX magnifying navigation.


Bookmarks

Posting Permissions

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