My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
Accessible Context-sensitive Help with Unobtrusive DOM Scripting
This article demonstrates two methods of calling context-sensitive help in a web form, in an accessible manner, using unobtrusive DOM scripting.( Read the article )
Frank
Originally posted by tdzark:
You should add live demo pages of the tutorials here on Dev.Opera. Really!
Done! See the new line in the introduction. Thanks for the suggestion.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Nice article. It's a great idea to add contextual help in this way.
I think you could improve on the markup for the help links. Right now the semantics for having a 'help' image don't seem quite right: what does this image mean? It is really a link button. Maybe something like this:
<label for="email">Email (required) <a class="help" id="emailhelp" href="#emailhelptxt">Help</a></label>
In the markup, the various help text goes right at the bottom of the form.
If Javascript is not enabled, then clicking the help link will jump down the page to #emailhelptxt.
If Javascript is enabled, then all that help text is hidden, and the help text is inserted just below each label when the help link is clicked (like you have now).
And you style the help links using CSS:
a.help {
background: transparent url(help_small.gif) center center no-repeat;
display: block;
height: 16px; width: 16px;
text-indent: -999em;
}
I think you could improve on the markup for the help links. Right now the semantics for having a 'help' image don't seem quite right: what does this image mean? It is really a link button. Maybe something like this:
<label for="email">Email (required) <a class="help" id="emailhelp" href="#emailhelptxt">Help</a></label>
In the markup, the various help text goes right at the bottom of the form.
If Javascript is not enabled, then clicking the help link will jump down the page to #emailhelptxt.
If Javascript is enabled, then all that help text is hidden, and the help text is inserted just below each label when the help link is clicked (like you have now).
And you style the help links using CSS:
a.help {
background: transparent url(help_small.gif) center center no-repeat;
display: block;
height: 16px; width: 16px;
text-indent: -999em;
}
Originally posted by chrismills:
Some hint about having to be logged in for being able to look into the examples would be useful, M/B?See the new line in the introduction.
◇ OPERA V8.54 (Win NT4) & V9.27 & V9.52[b10108] & V9.62[b10467] & V10[b1413] standard on (Win 98 SE) / (Win NT4) / (Win 2000 pro)
◇◇ UserJavascript "zz-spoof-id"! ◇◇◇ [Thanks for Finally Considering this Petition!] Composing Emails in the HTML Format in Opera
◇◇ UserJavascript "zz-spoof-id"! ◇◇◇ [Thanks for Finally Considering this Petition!] Composing Emails in the HTML Format in Opera