[thelist] [OT] Da Vinci
Christian Heilmann
codepo8 at gmail.com
Sat Apr 16 10:57:53 CDT 2005
<tip type="Beware the JavaScript expanding menus" author="Chris Heilmann>
Beware of the bad practises this incorporates:
1) block/none should not be used to show and hide things as it also
hides them from assistive technology:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
2) Hiding something with inline styles and showing it via JavaScript,
means you make it dependent on JavaScript, which is not accessible.
3) Table rows don't use display:block, but display:table
http://www.quirksmode.org/css/display.html
4) "Click me" is bad wording, as the user might activate the link differently.
5) We add two links for the effect, both of which don't do anything
without JavaScript. Markup that is dependent on scripting should be
added via scripting.
An unobtrusive example:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
</tip>
On 4/15/05, Rob Smith <rob.smith at thermon.com> wrote:
> Hi list,
>
> I'm sorry, but I got a good laugh about this one. Put your cursor on the
> bridge of his nose.
> http://www.mos.org/leonardo/ I'm sure Leo would think highly of us geeks
> that we did this to him.
>
> <tip type="JavaScript expanding menus" author="Rob.Smith">
> I realize this may be novice material, but I'm in the middle of it right now
> and thought to share it.
>
> <html>
> <head>
> <script language="javascript">
> function toggleSub(submenu) {
> if (document.getElementById(submenu).style.display == 'none') {
> document.getElementById(submenu).style.display = 'block'
> } else {
> document.getElementById(submenu).style.display = 'none'
> }
> }
> </script>
> </head>
>
> <body>
>
> <table border="0" cellspacing="2" cellpadding="0" bordercolor="#FFFFCC"
> width="100%">
> <tr>
> <td width="200" class="header">
> <a name="aBC"></a><a href="#aBC" onclick="toggleSub('BC'); return
> false">Click Me</a>
> </td>
> </tr>
> <tr id="BC" style="display: none;">
> <td>
> content is king!
> </td>
> </tr>
> </table>
>
> </body>
> </html>
> </tip>
>
> Rob Smith
> --
>
> * * Please support the community that supports you. * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
More information about the thelist
mailing list