[UserJs] Grab and scroll

[UserJs] Grab and scroll

Partially as a response to this thread (and mainly because I think it's a good idea) I made a userjs to provide 'grab and scroll' functionality. Programs like adobe acrobat reader allow you to 'grab' the page and pull it around while you're reading. My userjs allows you to do the same with webpages.

To use it you just hold down the ctrl key and middle-click-drag the page around. The mouse key can be changed in the script. You can also change the amount of movement generated by moving the mouse; by default it scrolls by twice the amount that the mouse moves.

Please note that you can't start the drag on embedded objects such as flash animations. Hope y'all enjoy it.

scroller.js scroll test.html

Thank you. This is useful JS. Works fine.

If you're still developing it, could you please add scrollbar-anywhere-like functionality? I would be extremely extremely extremely grateful if you did! For info about that, read the thread you linked to from this post onward!

Thanks a lot for this!

I noticed that the script breaks dragging-and-dropping links and images in pages.

Also, what AlexFolland said. A Scrollbar-Anywhere-like scrolling mechanism would be much more useful than drag-and-pan!

My modified version of the script, allows right click scrolling when allowed in prefs(javascript options > allow scripts to recieve right click), settings to switch use of the modifier off and text selection. Fixes and allows dragging and dropping of links too.

scroller.js

I've implemented the scrollbar anywhere functionality, and it's now enabled by default. Shoust's drag-drop fix and extra options are also incorporated.

scroller.js

Update:

• Fixed the problem with the script disabling link drag dropping (using shoust's fix).
  
• Implemented 'Scrollbar anywhere' functionality, on by default.
  
• Added the option to select text while scrolling, and to not use any modifier key (ctrl) as implemented in shoust's patch.
  
• You can use the right mouse button for scrolling if you enable it; prefs(javascript options > allow scripts to receive right click).
  

Awesome work, splondike & shoust - thanks tons!
Now, if I could just find a way to disable Opera's panning feature when I click my middle mouse button...

Weeeeeeeeee! Thank you so much! I'm now using Opera and have configured the script to work how I want it to! The diagonal scrolling works beautifully (not buggily like the Firefox extension)! However, there's a few problems.

1 - The right-click context menu opens after scrolling around, since I have it configured to use the right mouse button. Is there a way to prevent Opera from opening the context menu after scrolling around? Scrollbar-Anywhere does that with Firefox.

2 - Once the scrollbar is at an end of the page (at the bottom, for example), and there's still room for the cursor to move downward, after moving it down, I would like it to scroll up if ever I move the cursor up from that position. It doesn't start scrolling up again unless I move the cursor all the way back up to the point the scrollbar stopped moving. Could this be fixed please? I hope you understand what I mean. This isn't as major a problem as the first one, though.

3 - What CyberShadow said. It conflicts with Opera's middle-click pan feature if you try to use it with the middle mouse button.

Edit: I hope you see this as mostly a positive post! I'm so grateful for this.

Edit: Bug report: http://www.deviantart.com/deviation/45498475/?q=cityrunner&qh=boost%3Apopular+age_sigma%3A24h+age_scale%3A5 <-- On my 1600×1200 monitor, when clicking the image for a full view, the horizontal scrolling with this UserJs is fudged. To scroll left, I must move the mouse right, and vice-versa, and it only works in one big notch. I can't scroll between the two possible horizontal scrollbar positions with the UserJs.

Originally posted by AlexFolland:

However, there's a few problems.

Since it seems to be the flavour of the day:
scroller.js

Fixes right click context menu opening. Unfortunately it means that using the right mouse button results in a click then click again operation (two clicks ala middle mouse button panning) rather than a click then release operation (grab)

Improved "scrollbar anywhere" operation (no fixed starting position)

Fixed window sizing issues

Other misc changes

Problems:
Couldnt override the default Opera behaviour where it scrolls when you grab and drag near the edges of the screen so using scrollButton = 0 may be problematic at times

OT: this script makes me realise that Opera's middle click panning is generally a superior solution for most scrolling situations

Edit: It is difficult to override middle click panning in such a way that middle clicks will still be registered through javascript events. It is possible in a roundabout way, but will result in all middle clicks in all parts of the UI being similarly changed and that is not a good thing.

Now the cursor moves faster than the scrollbar. What's changed there? It makes it feel slow. Oh, I see how it works. Yeah, I much prefer the old method. This seems like a cool idea, but it doesn't feel nice in practice.

Also, I don't like the toggling thing. Is that the only possible workaround for the right-click context menu opening?

After all this, how could you find Opera's middle click panning superior? It will always take longer to get to the top of the page from the bottom. Never mind. Don't answer that. It's just a matter of personal preference.

For now, I'll be using the version in this post because it feels much nicer to me. I may try to edit it myself eventually.

What I would like to have...

M/B it's a bit complicated, but I'll try to explain:
regardless of the initial position of the mouse pointer when starting 'Grab&Scroll', the complete contents should be reachable by scrolling on moving the mouse pointer from that position to the physical borders of the page's window, i.e. I don't want to have to regrab again.

Something which could be presumably achieved in automatically setting the mouse sensitivity factors, based on some calculations taking into account that current initial mouse position and the windows dimensions with respect to the measures of the pages contents, or the like...

I hope I made it clear enough?

Whew, there seems to be a fair bit of interest in this (maybe the opera folks might take note of that?). I've updated the script again, but I haven't fixed all the bugs/features that have been requested.

scroller.js

Update:

• Used a horrible hack to disable the right click context menu after scrolling .
  
• Altered the script so it recalculates the scroll scaling factor (if necessary) every time the user tries to scroll. Note that this only applies to the 'Scrollbar anywhere' type functionality. This fixes the deviant art and similar bugs where the page is resised during viewing.
  

Todo:

• Somehow override the middle-click panning behaviour.
  
• Fix the behaviour noted in this post. This is a product of the scrollTo scrolling method I used in last update (ie. it wouldn't happen if I used scrollBy). I want to keep scrollTo because scrolling feels a bit more consistent for some reason.
  

I'm writing this todo list so that someone else can take my code and fix the problems. Either that or so I can remember what the problems were next week. Right now i've got real homework to do!

Wouldn't it be better if you wrap that "scrollbar anywhere" code section with an if statement and have that as a setting?

OMG! It's near-perfect now!! DDDD Thank you so much, splondlike!!!! This is wonderful. Your "horrible hack" worked wonders. The context menu opens when I don't scroll, and doesn't after scrolling!

Lol, I went berserk. But really, I'm very happy. This is the only reason I stuck with Firefox so long.

Bug: Starting a scroll from a text box like this "Quick Reply" box, then ending it on a normal section opens the right-click context menu (only if the right mouse button is used, of course).

Originally posted by AlexFolland:

OMG! It's near-perfect now!! DDDD Thank you so much, splondlike!!!! This is wonderful. Your "horrible hack" worked wonders. The context menu opens when I don't scroll, and doesn't after scrolling!

Lol, I went berserk. But really, I'm very happy. This is the only reason I stuck with Firefox so long.

Bug: Starting a scroll from a text box like this "Quick Reply" box, then ending it on a normal section opens the right-click context menu (only if the right mouse button is used, of course).

The hack to disable the right click menu is basically creating a button element(right clicking a button produces no context menu), however right click is possible in an edit field and not sure the hack would override it.

Wikipedia pages seem to enable the right click menu there though, to fix this and maybe the issue AlexFolland has too, set that "hack" element's z-index to 9999.

Is there a trick to have to use both right and left click to make it works?
I mean, if mouse doesn't have a middle click..(yes it's still existing!)

@Mystik: Yep, that's possible. Do you want the left/right click to act as a toggle (once to enable, again to turn off), or so you have to hold them down while scrolling?

I changed the code slightly, adding the z-index fix and the scrollbar-anywhere option (rather than commenting out lines) as shoust suggested.

Originally posted by splondike:

@Mystik: Yep, that's possible. Do you want the left/right click to act as a toggle (once to enable, again to turn off), or so you have to hold them down while scrolling?

The best would be to hold them both down while scrolling, the use would be instantaneous.

Hmm, I don't know if that's do-able unfortunately. I did a little investigation, and the problem is that there doesn't seem to be a way of detecting when you release the buttons. Also, do you know about flipback/forward? Press the right mouse button, then the left and you should go back one page in your history. Likewise lmb/rmb makes you go forward. I think they're really useful and personally wouldn't want to give them away .

I will live without this

And I now use the combination of mouseclick for going back an forward. (less tiring than mouse gesture...hum I'm a lazy boy! )

I made a little update. It features cursor changing while scrolling. I've added just a few lines, You can find them by my comments inside.
scroller.js

Hm, works pretty well, but it has trouble with some of the more cluttered pages. Try using it on www.engadget.com. The window has trouble keeping up with the script, but middle mouse scrolling works fluidly.

I tried using the scrollTo and scrollBy methods in firefox, and they seem to work better (they're what the grabanddrag extension uses). Do you think it's a limitation of opera that these methods perform so poorly? Is there another method which is less processor intensive?

Here is my own implementation of the idea. I'm basing it off of Ian Weiner's grab and drag extension for firefox because I like it so much, and I'm trying to replicate is as best I can with userjs. so far I have grab scrolling like this extension, as well as momentum scrolling and a double click disable feature. I currently am working on damping and better text selection. I have the same problem this script has in that scrolling pages like engadget.com is painful.

Hopefully we can work together and find a solution.

Drag.js

@Aux: thanks for the idea, but it has a couple of problems; it changes when you mouse over something with a different cursor (eg. a textarea), and also it doesn't go away until you mouse off the element you finish the drag on. I thought of doing this as well, and played around with it for a little bit. However, I ran into the same small problems and decided it wasn't worth worrying about.

@Antimatter: The problem on the page you reference is an analytics script which I didn't bother to look at properly. If you remove the line

<script language="JavaScript" src="http://o.aolcdn.com/omniunih.js"></script>

from the page the scroll works fine. Good luck with your implementation, but I think i'll stick with 'scrollbar anywhere' (if I want the others I can use pgup/down and the middle mouse panning).

EDIT @Antimatter: I just read your other post (saying that you use a tablet PC) and I can understand a bit better why you want these functions. I haven't used one, but if the right mouse button equivalent is reasonably easy to do (eg. using the pen upside down) then I would imagine mouse gestures (attatched to a userjs) would be the natural way to implement the flick thing. I'm not sure how i'd do momentum scrolling though. Good luck.

splondike, yes, there is not simple way to handle those issues, but it does not bother me, so I thought to release my changes - maybe they will be useful for someone.

Originally posted by splondike:

I just read your other post (saying that you use a tablet PC) and I can understand a bit better why you want these functions. I haven't used one, but if the right mouse button equivalent is reasonably easy to do (eg. using the pen upside down) then I would imagine mouse gestures (attatched to a userjs) would be the natural way to implement the flick thing. I'm not sure how i'd do momentum scrolling though. Good luck.

Yeah, it's really great dragging around pages with a pen; it feels so natural. Pens have a button on the side which usually right click, so I execute gestures that way in opera. It's really a great interface.

Here's another bug I've found using scrollTo/scrollBy which affects your and my code:

If you exit the top or bottom of the page with the mouse (meaning you enter the interface part of the opera browser at the top or the status bar at the bottom) then the page keeps scrolling in chunks. When you let go the mouse, the page snaps back to a previous position. I have yet to find a suitable solution to this.

Is there a way to make scrollbar anywhere still active after i release the mouse button ? (or use a toolbar button to active the userjs,no need to hold down mouse button)
Click somewhere on page then it will deactive.


Edit:I found if i replace "mouseup" string to xxx,no grab/hold down is needed,all i need to do is only move the mouse up and down for scroll.
But scroll action work strange.And i can't deactive it!

how about iphone-like scrolling? Where the page keeps scrolling after releasing the mouse button. The speed and distance of the continued scrolling determined by the speed at which the mouse was moving when the mouse button was released.

Originally posted by chesss:

how about iphone-like scrolling? Where the page keeps scrolling after releasing the mouse button. The speed and distance of the continued scrolling determined by the speed at which the mouse was moving when the mouse button was released.

That's the way my version works, that I posted above. When you let go it scrolls forever, but I could easily add a damping coefficient for drag like the iPhone.

Forget the Vista IE limited flicks and hard-to-use drag. This is reaaaaaaaaaally good. Work even better on a tablet with CTRL off. Wow!

Thanks, Spondlike. Very good and kind thinking of yours.

BTW, is there a way in the script to send a middle mouse click event to Opera to change mode to PAN ? Wouldn't that be a for all solution when drag can change to Panning? ......

Originally posted by splondike:

Partially as a response to this thread (and mainly because I think it's a good idea) I made a userjs to provide 'grab and scroll' functionality. Programs like adobe acrobat reader allow you to 'grab' the page and pull it around while you're reading. My userjs allows you to do the same with webpages.

To use it you just hold down the ctrl key and middle-click-drag the page around. The mouse key can be changed in the script. You can also change the amount of movement generated by moving the mouse; by default it scrolls by twice the amount that the mouse moves.

Please note that you can't start the drag on embedded objects such as flash animations. Hope y'all enjoy it.

scroller.js scroll test.html

Can it be deactive by mouse double click?Just likes grab.js that antimatter posted.

I know I can hold down right mouse button to scroll or turn on ctrl key to keep highlight text work.But I want no ctrl is needed, and I am more familiar with using left mouse button to scroll.But in this suituation, text highlight function is abandoned.

Thanks for help.

@Ride Wind: There isn't a way to enable the native panning through javascript.

@kinnik: Maybe you'd like it if you have to hold control to select text, and dragging with the lmb scrolls the page? After trying this for a bit it seems kinda cool and I added the functionality. The double click select thing works too . If you'd like this just make sure you have the following settings:

//Set this to the number of the button you want to use; left = 0, middle = 1, right = 2
var scrollButton = 0;
var allowTextSelect = false;
//Sets what the ctrl key does: 0=enables script, 1=disables script, 2=don't use
var useModifier = 1;

Originally posted by splondike:

@Ride Wind: There isn't a way to enable the native panning through javascript.

@kinnik: Maybe you'd like it if you have to hold control to select text, and dragging with the lmb scrolls the page? After trying this for a bit it seems kinda cool and I added the functionality. The double click select thing works too . If you'd like this just make sure you have the following settings:

//Set this to the number of the button you want to use; left = 0, middle = 1, right = 2
var scrollButton = 0;
var allowTextSelect = false;
//Sets what the ctrl key does: 0=enables script, 1=disables script, 2=don't use
var useModifier = 1;

Yeah,that's great!
Thanks very much.

I've updated the script to have a keyboard shortcut to enable/disable it (ctrl+alt+q by default). It now also has a globally accessible hook to do the same (userjs_scrollerEnable(enable)) for use with buttons or other userjs. The idea is you can now turn it off if you find a page that conflicts with it.

Is it possible to use Spacebar + mouse drag a la Photoshop?

Pressing CTRL+Alt+Q and dragging isnt very functional for me

Just for your information. The Opera 9.50 Beta includes a grab and scroll feature by default.
(if you have Kestrel installed, just hold CTRL + ALT and grab away.)

Oooh, cool, thanks Zotlan! When they have a scrollbar anywhere option i'll delete this script .
@flak, sorry, I wasn't very clear about that. The Ctrl+Alt+Q thing is if you want to disable the normal ctrl+click drag (in case a script already uses that).

Originally posted by splondike:

scrollbar anywhere option

opera:config#UserPrefs|ScrollIsPan
See [9.50 Alpha] ScrollIsPane/"Drag to scroll"

@AyushJ: Thanks for the tip, but scrollbar anywhere is a bit different. The scroll amount is proportional to the length of the page, and the direction is in the direction of mouse move rather than opposite it.

EDIT: Hmm, noticed the script doesn't actually work in the latest beta, but neither does cancelling text selection for that matter. I think i'll wait until we get a final before digging around for a fix.

Seems a bit on the wild side, the screen goes crazy like too much scroll. Anyway to slow it down ?

help!!!!!!! this script doesn't work for me at all! I tried to hold Ctrl and then lmb, but then, the screen just flickers, I think it did a repeating jump from top to middle of the page!

Beyond 9.5 there is actually little need to use this script,hold Ctrl+Alt while clicking to Pan the viewport with the mouse.
Or you can use the built-in Text Selection mode as in:

Pan

Does anyone still use the scrollbar-anywhere functionality (I don't)? If not, then as the previous poster said, this functionality is now built into opera.

Originally posted by splondike:

Does anyone still use the scrollbar-anywhere functionality (I don't)? If not, then as the previous poster said, this functionality is now built into opera.

I do although I also uses the built-in grab/scroll. Together they provide a complete way of reading the web. To me the scrollbar anywhere is like a low flying airplane which can hover and scroll at a speed I desire. In fact this was the MOST important function why I always prefer Opera over FF or IE. With long web pages it provide a very good way to scan like radar for the possible info I'm looking for. One can even position the mouse cursor such that the scrolling is slow like movie subscripts moving up the screen and leave both hands free to do something else. Even if someone try to implement that in FF, FF will not refresh and scroll constantly as well as Opera.

Grab/Scroll on the other hand is to me suitable for reading articles like news which is about 2 screen pages. It also allow me to grab and position the portion I want to leave visible in an window while I look for other related web info.

Frankly, with the 'Fit to Screen' feature, Opera is the only browser which provides totally limitless manner of scrolling since v7.