[Sigia-l] Another html form question... (now way off topic and on to HTML, DOM, javascript)

Thu Jan 29 09:19:05 EST 2004

> -----Original Message-----
> From: sigia-l-admin at asis.org 
> [mailto:sigia-l-admin at asis.org]On Behalf Of
> Listera
> Sent: Wednesday, January 28, 2004 4:18 PM
> To: SIGIA-L
> Subject: Re: [Sigia-l] Another html form question...
> 
> 
> "Karl Groves" wrote:
> 
> >> Sure, as soon as you report how client-side scripting to
> >> resize a form element is beneficial to usability.
> 
> If this is referring to my comments, I never claimed such a 
> thing, because I
> helped out with a technical solution to a narrowly-defined problem as
> posted. The question wasn't "is this beneficial to 
> usability?" It was "how
> can I do this?" I assume the original poster would make his 
> own decision
> about whether it is beneficial to usability on his own. Or 
> pose the question
> here directly, at which time I can answer that, too.

I believe I did just pose the question.
If you need the sentence reformatted as a question, here it is:
"How is resizing a form element via client-side scripting beneficial to usability?"

While it is true that only testing can show whether it helps or hinders usability, I maintain that hackish workarounds are to be avoided and that it is most appropriate to reassess the causes of the problem. Especially when the workaround presents additional potential problems (i.e. accessibility, lack of browser support, etc.)
As the joke goes:

Patient: "Doctor, it hurts when I do this"
Doctor: "Then don't do that"

>  
> > BTW - Every reference I've seen shows that the onBlur and 
> onFocus event
> > handlers work fine on the <select> element for most major 
> browsers on earth.
> I don't go by theoretical 'references,' I test stuff.

I don't have to test to know that 13-17% of users don't have scripting enabled on their browsers and that device-dependent event handlers are a hinderance to equal access of a site's resources.

> You 
> don't have to do
> much, I gave you the code. Tell us how that works in Firebird 
> and Safari,
> for example, without the exception code you'd have to write 
> that I mentioned
> in another post.

Since the burden of proof rests on me, I've gone and done exactly that.
I created a valid XHTML1.0 Strict document and simply added redundant "onfocus" and "onblur" event handlers.
To keep it "real world", I placed the <select> in a <form>, gave it some options and a tabindex

Using this code worked as intended on IE6, and Mozilla 1.2.1 (and of course Netscape 6.2.2):
<select name="myDropDown" id="myDropDown" onmouseover="extendMe();"
onmouseout="contractMe();" onfocus="extendMe();" onblur="contractMe();">

Take note of the fact that I've used onmouseOUT, whereas you used onmouseUP which *did not* work on any browser.

It did not contract on Opera 7.10 (tried onfocusout on a whim and that did not work either)
Neither version worked on Netscape 4.75

I was unable to see whether it worked on Safari, and ultimately, it doesn't much matter anyway.
More people have scripting disabled altogether than use Safari and I'm more concerned about accessibility than the one or two people on the planet that use Safari AND navigate through tabbing. But if anyone has Safari, it would be good to know.
I'm also interested in tests on newer versions of Opera, as 7.10 is particularly buggy

By adding the redundant "onfocus" and "onblur" event handlers, we've ensured that we've done our part to ensure equal access and operation of the menu to close to 99% of the planet, regardless of whether they have a mouse or not.

P.S. - You do realize that the DOM is a standard right? Yes, I know semantically it is a "recommendation", but to the real world it may as well be a standard. Still, standards are standards!  ;-P~

-Karl

Here's the source:  

<!--Begin-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>OnFocus Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function contractMe() {
document.getElementById("myDropDown").style.width ="50px";
}

function extendMe() {
document.getElementById("myDropDown").style.width ="100px";
}
</script>
</head>
<body>
<form method="post" action="">
<div><select name="myDropDown" id="myDropDown" onmouseover="extendMe();"
onmouseout="contractMe();" onfocus="extendMe();"
onblur="contractMe();">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select></div>
</form>
</body>
</html>
<!--End-->