CSS/ HTML Use website and website
's as / like a scrollbar

Go To StackoverFlow.com

-2

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 <code><div></code>'s aren't full but cut off by dragging i mean scrolling them until they are displayd as a whole one.

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

2012-04-05 16:52
by Fr0stY
What's your question - j08691 2012-04-05 16:58
if you read my description it is: How do I achieve this? how can I make my site so that people can click on a part of it and drag it around asif using a touchscreen - Fr0stY 2012-04-05 17:00
What have you tried so far? How good are you at javascript/jQuery? Your site is missing a <!doctype html> and the script tag at the bottom is misplaced, it belongs inside the <body> - Christoph 2012-04-05 17:00
thx, I'm not that good with javascript / jQuery, infact I only know of the exsistence of jQuery since yesterday, I only know what I learned in school about half a year ago -> HTML and CS - Fr0stY 2012-04-05 17:03
you can't achieve that with css, you need javascript for that effect. So I guess you start learning it by doing some basic stuff first; - Christoph 2012-04-05 17:10


0

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.

2012-04-05 18:05
by Peter
Ads