I'm writing my Website right now, trying to stay more conservative, but using newer designs. The design I chose for my site is a Windows (R) "Metro"-like design, as explained in my other Question (Question)
I already made it look a bit like metro, using not a vertical but horizontal scrollbar. now I am trying to add the option that a user can click on anything, and while clicking and holding, the user should be able to "drag" the website (like i can "drag" the pages of an IPhone),
Or when something like 10 pixel away from the websites "edge", the mouse is hovered, the website should "drag" by itself.
I thank you in advance, and this is my site at the current state: I Use Chrome to display my site because it displays the css like i want it
or heres a quick screenshot of what i mean:
the left and right are the edges, as you can see, the <div>'s aren't full but cut off by dragging i mean scrolling them until they are displayd as a whole one.
Max W-F
<!doctype html> and the script tag at the bottom is misplaced, it belongs inside the <body> - Christoph 2012-04-05 17:00
One important thing is not to go against convention. On mobile devices, the users are used to being able to drag pages. But on desktop computers, clicking and dragging the mouse is either used to select text, or to drag content (for example, drag an image from a webpage to another application). Scrolling on desktop computers is normally done with the scroll wheel or keyboard. Visitors may become very irritated when websites don't react like they expect them to...
That being said, you could use a jQuery plugin like Dragscrollable to achieve this effect.
For scrolling near the edge, you could use the Hotspot option of the jQuery plugin Smoothdivscroll.
I don't have any experience with these plugins.