Usability issue - scroll wheel & drop-down boxes 1

[Stretchwickster]

Hi there,

You've probably come across this usability issue many times: if a drop-down selection has been made and the user scrolls the page via the mouse wheel (without having first clicked elsewhere in the page to move the focus away from the drop-down), the drop-down selection is scrolled rather than the page. If a user doesn't realise they've changed the drop-down selection by scrolling down, it can result in the submission of erroneous form data.

I came across the following thread when searching for a solution: thread216-1092334.

The "document.body.focus()" code, in the above thread, mimicks the clicking elsewhere in the page by moving the focus away from the drop-down and onto a different element (i.e. the body element) when the drop-down selection is changed.

Whilst this is a fix, and appears consistent in IE6, IE7 and FF, it actually bypasses a nice feature of IE7. In IE7 (with no such fix applied), if a drop-down selection is made, the drop-down element retains its focus yet the selection is only affected by the scroll wheel if the cursor is located right above the drop-down element. Now, this is the best of both worlds as the user can utilise the scroll wheel to scroll the page and scroll the drop-down selection as appropriate.

Does anyone have any idea how this IE7 behaviour could be replicated so that it could be consistently used across FF, IE6 and IE7?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[kaht]

Clive, I think you've got a big project on your hands to try and replicate this behavior consistently across browsers. Personally, I'd just do something like <select onchange="[!]this.blur()[/!]"> to prevent it from happening, but that will get rid of the preferred functionality you're talking about in IE7.

You're going to have to piece a bunch of stuff together to get it to work correctly. First you'll have to start with functionality to trap the mouse scroll wheel. This page is pretty descriptive on that:

http://adomas.org/javascript-mouse-wheel/

Next, you'll need to trap your mouse coordinates, and there's a lot of scripts out on the net to do that. Then, using those coordinates, you'll have to find the element position on screen that has focus (other scripts out there for that as well), and check to see if your mouse coordinates fall within those boundaries. Then, depending on if the mouse was moved up or down just change the selectedIndex property of the select box by 1 or -1.

I think it'll be a pretty big mess, and I'd opt for the .blur() option.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[trollacious]

It depends on the mouse, too. I have a couple different mice (mouses?) by IRock that usually scroll whatever the cursor is over, even if that's not where the focus is. I can scroll a window that's behind the window that has the focus with those, but I don't know if any other brands do that or not. I like them specifically because of that feature.

Lee

 

[theniteowl]

Could you place the select boxes within a div or span and trap the scroll event within that area, then have mouseover mouseout events to toggle the suppression on/off so that by default scroll will not work in that small area of the screen but enables while the mouse is above the select?
Then it would essentially replicate the IE7 functionality.

Can you trap the scroll event at a div or span tag level?


At my age I still learn something new every day, but I forget two others.

 

[Stretchwickster]

Thanks for your comments guys. Lee, it's definitely "mice"!

...I think it'll be a pretty big mess...

I'm inclined to agree! I guess I was hoping there might be a simpler fix!

kaht, is there a reason why you recommended .focus() in the thread I referenced above and are now recommending .blur()? From what I've read, they are exact opposites so setting the focus to another element, or removing the focus from the current element is much the same thing. Is one more reliable than another (i.e. the OP in the referenced thread couldn't get .blur() to work)?

theniteowl & kaht, for now I'll make do with the consistent cross-browser behaviour of the blur/focus technique. When I get some free time, I might have a go at mimicking the IE7 behaviour just for the fun of it!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[kaht]

kaht, is there a reason why you recommended .focus() in the thread I referenced above and are now recommending .blur()?

I didn't even read the thread from the link you posted above, didn't realize it was my suggestion from before. To be honest, I misread your initial post as this:

Whilst this is a fix, and appears [!]in[/!]consistent in IE6, IE7 and FF

So, I was just offering another solution that would essentially do the same thing (and be shorter, and we all love shorter code ). So, to answer your question: No, they are not any different. They will essentially perform the same functionality.


theniteowl, I've never tried before - but it seems that you can. I got this to work in IE and FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
window.onload = function () {
   if (window.addEventListener) {
      document.getElementById("theDiv").addEventListener('DOMMouseScroll', myTest, false);
   }
   document.getElementById("theDiv").onmousewheel = myTest;
}
function myTest() {
   alert("guess it works");
}
</script>
<style type="text/css">
div#theDiv {
   border:1px solid black;
   height:100px;
   width:100px;
}
</style>
</head>
<body>

<div id="theDiv"></div>

</body>
</html>

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[kaht]

Actually, niteowl's idea has a lot of merit, wrap the select in a span and this worked for me in ie7 and firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
window.onload = function () {
   if (window.addEventListener) {
      document.getElementById("selectWrapper").addEventListener('DOMMouseScroll', myTest, false);
   }
   document.getElementById("selectWrapper").onmousewheel = myTest;
}

function myTest(event){
   var delta = 0;
   if (!event) {
     //For IE.
     event = window.event;
   }
   if (event.wheelDelta) {
     //IE/Opera
     delta = event.wheelDelta/120;
     //In Opera 9, delta differs in sign as compared to IE
     if (window.opera) {
        delta = -delta;
     }
   }
   else if (event.detail) {
     //Mozilla case
     //In Mozilla, sign of delta is different than in IE
     //Also, delta is multiple of 3
     delta = -event.detail/3;
   }
   //If delta is nonzero, handle it.
   //Basically, delta is now positive if wheel was scrolled up,
   //and negative, if wheel was scrolled down.
   if (delta) {
      var selectObj = this.getElementsByTagName("select")[0];
      if (delta < 0) {
         //mouse wheel scrolled down
         selectObj.selectedIndex = (selectObj.selectedIndex == 0) ? 0 : selectObj.selectedIndex - 1;
      }
      else {
         //mouse wheel scrolled up
         selectObj.selectedIndex = (selectObj.selectedIndex + 1 == selectObj.options.length) ? selectObj.selectedIndex : selectObj.selectedIndex + 1;
      }
   }
   //Prevent default actions caused by mouse wheel.
   //That might be ugly, but we handle scrolls somehow
   //anyway, so don't bother here..
   if (event.preventDefault) {
     event.preventDefault();
   }
   event.returnValue = false;
}

</script>
<style type="text/css"></style>
</head>
<body>


<span id="selectWrapper">
   <select onchange="this.blur()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
   </select>
</span>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

</body>
</html>

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Stretchwickster]

Many thanks for that kaht, that's pretty close to matching the behaviour of IE7 and works in IE6 and FF. It prevents accidental selection changes whilst page scrolling (away from the select element).

Due to the importance of maintaining data integrity, I'm still going to go with the blur/focus technique for this particular project - as I'm a bit paranoid about users "messing it up"! I was conducting a usability test (i.e. looking over someone's shoulder!) and that person managed to unintentionally change the selection in most of the drop-down boxes on the page, hence the reason for using the bullet-proof blur/focus technique. Personally, I don't think the majority of users would even realise that IE7 has this specific behaviour, so I'm not too worried about disabling it.

However, your "proof of concept" is not in vain, I will certainly be toying with it for other projects.

Many thanks. A star for you!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[kaht]

Thanks Clive

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]