2

I have an overflow: hidden div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space.

This is what I do for the CSS: 

#div-grabscroll {    
    cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
   cursor: url(../img/closedhand.cur), n-resize;
}

This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the pointer cursor overrides my closedhand cursor.

The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the closedhand.

Is there a way to override the cursor without modifying CSS for everything that the mouse might move over? I tried !important on the :active style but that didn't do it.

Steven Lu
  • 41,389
  • 58
  • 210
  • 364
  • 1
    Could you show us a working version of your code? When you start the movement, you should add a special class to your movable div that is removed when dragging is finished. You can use this class in your CSS to override the cursor styles. – kapa May 11 '12 at 13:51
  • @bažmegakapa It seems that elements within the div will fail to inherit my overridden cursor. – Steven Lu May 11 '12 at 14:02
  • @SomeKittens All of them. (within reason) Tablets too. – Steven Lu May 11 '12 at 15:51

2 Answers2

1

Answer / Question: What would happen if you had a duplicate div which sat on top of the grabscroll div, but which had no background or content of any type so as to not hide anything behind it, and then set the cursor hand on this.

Does z-index overwrite importance this way?

Does this make sense?

Effectively you have grabscroll - button - opaque grabscroll in that layered order.

Rick Donohoe
  • 7,081
  • 6
  • 26
  • 38
  • I don't think a `div` will do the job, not on IE at least, because IE doesn't do a good job of making form controls respect z-index. But you could do the same thing with an `iframe`. – T.J. Crowder May 11 '12 at 13:55
  • 1
    I think a transparent div that sits on top of my scroll area (which is `display:none` unless drag is in progress) is a nice enough solution. It's quite clever. IE < 9 isn't a priority for me so I think this will work pretty well. – Steven Lu May 11 '12 at 13:56
  • @StevenLu: Mock it up and try it on IE (whatever the lowest version is you want to support), just to be sure a `div` is sufficient. I doubt it will be. – T.J. Crowder May 11 '12 at 13:58
  • Let me know, I wasn't expecting this to be the answer, more of a thought I was wanting feedback on.. Dammn IE ruining our lives!! – Rick Donohoe May 11 '12 at 14:09
1

This is a very similar problem to creating "modal" dialog boxes, and it will probably have a similar solution: I think you'll have to create an iframe positioned over the content you're scrolling, making it higher up in the z-index order than the content, for the duration of the scroll. This is because on IE (at least) form controls tend not to obey z-index well, which is why "lightbox"-style things do this iframe shim thing.

Here's an answer I gave to another question here on SO which demonstrates the basics of the iframe shim. In that case it's for modal purposes, but the concept and most of the code would apply.

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I will be sad if IE forces me to do this. I have every hope that IE9 is able to properly deal with a transparent div though. I'll get back to you... It's just that I'd very much like to avoid sticking such an iframe abomination into my page if I can help it. – Steven Lu May 11 '12 at 14:08
  • @StevenLu: Good news, looks like you're okay on IE9 (http://jsbin.com/uvovin/2) and -- better news -- even on IE8. (This is important, since XP users can't go past IE8, and there are and will be a **lot** of XP users for years to come). – T.J. Crowder May 11 '12 at 14:26