PDA

View Full Version : Usability tricks... post yours (or your ideas) :D

Dr. Web
08-28-2002, 02:35 AM
Its been a long time since I could actually scout(t) out for these. Take a look at the attached html page I've posted.

In that page are a couple of tricks I like to use on forms, such as:

allowing the user to click on the radio/ checkbox TEXT to turn on/ off the option.

disabling the submit button after the user clicks it ONCE.

Taking the focus off of linked text after they are clicked.

There could be TONS of these 'little tricks' that can help everyone. For instance, I know that I can loop through the entire form to look for checkboxes and check them all, but I remember seeing a quick code snippet that would do just that... in like two or three lines. Thats exactly the type of thing I'm looking for y'all to post here. Those code samples, or ideas that would make usability a lot easier.

Think of the best forms you filled out on the web. Things that just made it 'a cut above the rest'. Then post the ide-ers here! :D



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
a {text-decoration: none;}
</style>
<script language=javascript>
function check(what){
if(what.checked){what.checked='';}else{what.checked=true}
}
</script>
</head>
<body>
<form name=form1 id=form1 style="display: inline">
<input type=checkbox id=one name=one>&nbsp;<a href="#" onClick="document.body.focus(); check(document.form1.one); ">This is option one (click this text)</a><br><br>

<input type=radio id=two name=two>&nbsp;<a href="#" onClick="document.body.focus(); check(document.form1.two[0]);">This is option two[0] (same thing with a radio button)</a><br>
<input type=radio id=two name=two>&nbsp;<a href="#" onClick="document.body.focus(); check(document.form1.two[1]);">This is option two[1] (same thing with a radio button)</a><br>
<input type=radio id=two name=two>&nbsp;<a href="#" onClick="document.body.focus(); check(document.form1.two[2]);">This is option two[2] (same thing with a radio button)</a><br><br>

<br><br>
<input type=submit onClick="this.disabled=true" value="Submit (go ahead, click me!)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=reset>
</form>
</body>
</html>
Dr. Web
08-28-2002, 02:51 AM
oh, and here's that 'check all' stuff I was taling about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
a {text-decoration: none;}
</style>
<script language=javascript>
function checkAll(check) {
for (i=0;i<6;i++) {
if (check) {
document.forms[0].chbx[i].checked=true;
}
else {
document.forms[0].chbx[i].checked=false;
}
}
}
</SCRIPT>
</head>
<body>
<br><br>
<br><br>
<FORM name=formtwo id=formTwo>
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=checkbox NAME="chbx">
<INPUT TYPE=button NAME="btnCheck" VALUE="check All"
onClick="checkAll(true)">
<INPUT TYPE=button NAME="btnCheck" VALUE="unCheck All"
onClick="checkAll(false)">

</FORM>

</body>
</html>
Dr. Web
08-28-2002, 03:12 AM
okay, last one for today... how to strip out HTML from text entry. This is the lo-cal version, which only strips out the '<' and the '>' making the html invalid. Just paste in some HTML code into the left textarea, and click into the right....




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language=javascript>
function change(){
var entry=document.form1.textEntry.value;
//the regExpObj is the actual pattern for matching//
var pattern=new RegExp("[<->]","g");
var modifiedEntry=(entry.replace(pattern, ""));
document.form1.textEntryModified.value=modifiedEntry;
}
</script>
</head>
<body>
<form name=form1>
<textarea name=textEntry rows=15 cols=15 onBlur="change();"></textarea>
<textarea name=textEntryModified readOnly rows=15 cols=15></textarea>
</form>
</body>
</html>
scoutt
08-28-2002, 09:34 PM
hehe I like that scout(t) pretty smart :)

anyway good idea for this, and this is exactly why I have my site so if you post here then please add it to my site as well, but no pressure. ;)

I have one but let me find it. hmmm where did I put it.....
territoryOK
09-01-2002, 10:02 PM
Real quick this is how I animate stuff using one setTimeout() for the whole site. I'm in a hurry to go to work so I was short writing this. You get the idea though. The more "stuff" evaluated within the string "setTimOutStr" the slower evything gets, it would have to be alot and you shouldn't be animated that much. Even if you did, this works alot better then running a couple of setTimout()'s.



var setTimOutStr,run=0
function setTimOut(){
if(setTimOutStr){
run=1
eval(setTimOutStr)
setTimeout("setTimOut()",0)
}else{
run=0
}
}


if(run){
setTimOutStr+="animLayer1();"
}else{
setTimOutStr+="animLayer1();"
setTimOut()
}
if(run){
setTimOutStr+="animLayer2();"
}else{
setTimOutStr+="animLayer2();"
setTimOut()
}
Dr. Web
09-02-2002, 11:18 PM
do you have an example page that demonstrates this? I'm interested how you used it.
territoryOK
09-02-2002, 11:46 PM
Ok, i'm at work right now but as soon as I get home I will give you a working example.
territoryOK
09-03-2002, 03:42 PM
Dr. Web here is an example of my single setTimout() script. In this example for some reason it really doesn't look like there is a difference then using several setTimeout()'s, I don't know why. I will send you a link to my old hier menu script that uses this single setTimeout() script and you'll see how smooth and evenly pased the clipping effects are.

Single (http://www.territoryoverkill.com/data/scripts/singleSetTimeout.htm)

Multiple (http://www.territoryoverkill.com/data/scripts/multipleSetTimeouts.htm)

The buttons on the single page are toggle buttons used to turn them on and off. You can also move more then one. On the multiple page you cant stop the blocks once they are in motion. I am tired and don't feel like coding anymore:( Enjoy:D
fredricknish
09-03-2002, 03:57 PM
Originally posted by territoryOK

Single (http://www.territoryoverkill.com/data/scripts/singleSetTimeout.htm)

Multiple (http://www.territoryoverkill.com/data/scripts/multipleSetTimeouts.htm)


Thats really cool.Good job territoryOK :thumbup:
territoryOK
09-03-2002, 04:07 PM
Thanks:D
Dr. Web
09-03-2002, 06:28 PM
hmmn... nice, not sure how I'd use it... but I'll have to take a copy and store it in my js library. Something that nice is bound to come in useful! :D
scoutt
09-03-2002, 06:34 PM
yeah I ditto what Doc said. if you could, add that to my library, or I can if it is ok with you.
Dr. Web
09-03-2002, 06:53 PM
scoutt,

I'll set aside some time to go through your site and add up anything you don't already have.

I have a lot of scripts, but not sure what would fit into your site.
scoutt
09-03-2002, 07:03 PM
anything you think would come in handy, in the future or for somebody looking for a script that they could just do some small adjustments to make it work for them. yeah, if you look at the few I have, hey aren't really that fantastic but could come in handy.

load them all, ;) if I don't seem them appropriate I can just delete them.
Jon Hanlon
09-04-2002, 12:43 AM
This script allows users to fill-in and submit a form by pressing the <Enter> key.
Netscape started a convention that, if a form consisted solely of one field, then you can submit it by pressing the <Enter> key.
Many search engine sites and shopping sites utilize this quirk.

Tired of watching users grab the mouse to click the next field (only the smarter ones know about the Tab key), I came up with the following.

We construct a form for each field, and have another combined form (mainForm) which is the only one that's actually submitted.
When a user hits <Enter> the script looks to see if any of the other forms' fields are blank.
Only if they've all been filled in is the mainForm submitted, otherwise the first blank field gets focus.

You can also add optional data validation before submitting the mainForm.

<script language="JavaScript">
<!-- Begin

function submitForms() {
if ("put your" == "validation tests here") {
alert("Wonky Data - Form not submitted")
return false;
}
document.mainForm.domain.value = document.domainForm.domain.value;
document.mainForm.username.value = document.userForm.username.value;
document.mainForm.password.value = document.passForm.password.value;
document.mainForm.submit();
return true;
}

function resetAllForms() {
for (var j=0; j<document.forms.length; j++)
document.forms[j].reset();
return true;
}
function checkOtherFields() {
if (!document.domainForm.domain.value) {
document.domainForm.domain.focus()
return false;
}
if (!document.userForm.username.value) {
document.userForm.username.focus()
return false;
}
if (!document.passForm.password.value) {
document.passForm.password.focus()
return false;
}
submitForms();
return false; // stop this form being submitted
}

// End -->
</script>

<form name="domainForm" onSubmit="return checkOtherFields();">
Domain: <input type=text name="domain" size="20" maxlength="20">
</form>

<form name="userForm" onSubmit="return checkOtherFields();">
Username: <input type=text name="username" size="20" maxlength="20">
</form>

<form name="passForm" onSubmit="return checkOtherFields();">
Password: <input type=text name="password" size="20" maxlength="20">
</form>

<form name="mainForm" action="/cgi-bin/some_cgi.pl" method="post" onSubmit="return submitForms()" >
<input type="button" name="doSubmit" onClick="checkOtherFields()" value="Submit">
<input type="button" name="doReset" onClick="resetAllForms()" value="Reset">
<input type=hidden name="domain" value="">
<input type=hidden name="username" value="">
<input type=hidden name="password" value="">
</form>



I actually use this code with username and password, but I added the domain here to make it less trivial.
agent002
02-20-2003, 07:22 AM
Dr. Web, why can't you just use <label> instead of those complicated JavaScripts to make checkbox/radio button activate when clicking on the text?

<label for="chk1"><input type=radio name="choose1" value="opt1" id="chk1"> Option 1</label><br>

<label for="chk2"><input type=radio name="choose1" value="opt2" id="chk2"> Option 2</label><br><br>

<label for="chk3"><input type=checkbox name="choose2" value="selected" id="chk3"> Free option</label>


Works perfectly.
Dr. Web
02-21-2003, 08:32 AM
Originally posted by agent002
[b]Dr. Web, why can't you just use <label> instead of those complicated JavaScripts to make checkbox/radio button activate when clicking on the text?



hmmnnn.... those weren't that complicated at all. Probably the largest reason was that I was writing netscape 4.7x compatible code, and lable isn't backwards compatible. Its a nice shortcut though.
Dr. Web
02-21-2003, 08:36 AM
form tag fieldset tag legend tag input tag



TAG: label

--------------------------------------------------------------------------------
<label> ... </label>
Available in versions: 4.0
Browser compatibility: Explorer 4, 5 Netscape 6

The <label> tag is used to associate text labels with a specific element (control) inside a form (such as an input element). This is done by having the values of the for attribute of the label tag and the id attribute of the form element be the same. Note that you can attach more than one label to the same element. The browser is supposed to render the labels in a special manner to accentuate their appearance.

This tag is one of three tags implemented in 4.0 that help set the appearance of a form. The other two are fieldset and legend.

However, these three tags are poorly implemented by most browsers.

from www.devguru.com

http://www.devguru.com/Technologies/html/quickref/html_label.html