Click and drag scrolling in a web app?

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

Spambot5546
Posts: 1466
Joined: Thu Apr 29, 2010 7:34 pm UTC

Click and drag scrolling in a web app?

Postby Spambot5546 » Tue Jan 21, 2014 4:23 pm UTC

I'm trying to make a control that will contain a checkerboard style grid. This grid could, potentially, be larger than what the user will see at a given time so I want them to have the option of scrolling. Since scrollbars are a pain in the ass I'm hoping to do click-and-drag scrolling but I'm not sure how, or if it's even possible.

I'm kind of flexible with what language to do this in, it just needs to be accessible in a browser and capable of constant interaction with the server (perferrably through a web service a-la SOAP). I would prefer Java, that's where most of my experience lies.
"It is bitter – bitter", he answered,
"But I like it
Because it is bitter,
And because it is my heart."

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Click and drag scrolling in a web app?

Postby Xanthir » Tue Jan 21, 2014 4:45 pm UTC

Scrolling is purely client-side, so your only choice of langauge to use for it is JavaScript.

You can do click-to-drag without too much difficulty by listening for the mousedown/mouseup events (to tell when they have the mouse button depressed) and the mousemove events. Just record the cursor's current position in mousedown, figure deltas on mousemove and adjust the checkerboard background (use an overflow:hidden div with a background image on it, and adjust the scrollLeft/scrollTop properties to move it around), and stop listening to mousemoves when the mouseup event happens.

This should be enough information and googleable keywords to get you tutorials for everything you need. Just remember the cardinal rule of web tutorials: never click on a W3Schools link.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

Spambot5546
Posts: 1466
Joined: Thu Apr 29, 2010 7:34 pm UTC

Re: Click and drag scrolling in a web app?

Postby Spambot5546 » Tue Jan 21, 2014 4:55 pm UTC

I was hoping to avoid working directly with HTML/JS. I've been working in VAADIN and Flex a lot lately, and was planning on continuing in that vein. That said, I may not have a choice.
"It is bitter – bitter", he answered,
"But I like it
Because it is bitter,
And because it is my heart."

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Click and drag scrolling in a web app?

Postby Xanthir » Wed Jan 22, 2014 4:54 pm UTC

The browser doesn't run Java, it runs JS. There are some compile-to-JS languages, some of which are even Java (Google has developed several, for example, because a decent chunk of its engineers are afraid of JS), but you'll be best served by just buckling down and learning some basic stuff.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: Click and drag scrolling in a web app?

Postby Steax » Fri Jan 24, 2014 1:43 am UTC

I've used this script as a relatively drop-in solution for click-and-drag scrolling.
In Minecraft, I use the username Rirez.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 10 guests