[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