Coding javascript and css reliant UI elements

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm pondering what the various drawbacks are of the methods to code UI
elements who's function relies on javascript and css.

Currently on I use styled <a>
elements to display two UI elements that via javascript select alternate
stylesheets that enable or disable the left utilities panel and/or the
navbar. (both are there for the convenience of desktop users, they are
not essential, likely to be a nuisance on narrow viewports or in aural

Because these UI elements are useless when either javascript or css is
disabled I use js document.write for js off situations, css background
images for css off situations, css generated content or content wrapped
in a IE conditional comment for css2 aural renderers or IE based aural
renderers (content is positioned off screen).

The current method only displays small coloured boxes in images off
situations, but I'm ok with that.

I'm mainly pondering on the use of styled <button> elements instead of
styled links. Are there objections to using a form element like <button>
in a non form context?

Afaics a possible benefit of using <button> elements is that Opera has
separate keyboard controls for link and form elements, this potentially
allows a user quicker access to the UI controls, there is one (1 field +
1 button) search form on all pages and typically a lot more links to
step through.

The drawback I currently see is that the button element renders in css
off situations, whereas styled links disappear.

Currently I use href="javascript:void(function())" to activate the js
function, this causes the links to be included in the keyboard
navigation step sequence, if I use onclick then it (understandably)
doesn't in some browsers (IE and/or Mozilla IIRC). The drawback of using
href="javascript:void(function())" is that Opera displays that in it's
tooltip box, this I mainly consider an Opera quirk but I'd prefer to
avoid it if I could do so without causing other problems.

Any considerations I've missed?


Re: Coding javascript and css reliant UI elements

Spartanicus wrote:

Quoted text here. Click to load it
You mean css off situations?
Quoted text here. Click to load it
You mean js off situations?

And, do you have a really _good_ reason to  be using js navigation?
Is it backed with <noscript> navigation?

Quoted text here. Click to load it

Using a button outside a form _might_ result in it not working as you
intend in some browsers.  Is there a reason you can't use form tags
around it?

Quoted text here. Click to load it

Unless you're on an _intranet_ where most of your users are on Opera
_and_ trained to use keyboard shortcuts, I think any benefits to users
would be tiny.  Upkeep of weird markup, on the other hand, is a pain.

Quoted text here. Click to load it

If the styling of links disappears with CSS off, I can understand.  If
the links themselves disappear, you are doing something wrong.

Quoted text here. Click to load it

You mean
       <a href="javascript:void(function())"

Why don't you remove non-essential stuff and post the code?
I can't make much sense of the following paragraph.

Quoted text here. Click to load it


Site Timeline