non-standard attributes question

I've made up my own attributes, but it works

[pixeltierra]

I don't do a lot of javascript, but I recently developed a complex calendar system showing all types of appointments for an interpreting company. The company has now requested that I make a "filter" system to restrict which appointments are visible on screen (client-side) based on things like, language, status, follow-up completion etc...

So I've made each appointment in a div like this:

<div class='appt' language='Spanish' status='3' interpreter_ID='45'>8:00am [link] [link]</div>

Essentially I've made up my attributes like I would xml. So I toggle the div's visibility based on it's attributes and it works fine. BUT IS IT STANDARD or am I abusing something here?

[bobming]

Hi

There are arguments for and against the use of custom attributes. As you've found out, pretty much all modern browsers allow access to these custom attributes and values through the DOM with no problems. However, when it comes to W3C validation your pages will undoubtedly fail. Also, some of the names you choose for custom elements may become relevant in future and cause problems.

It's basically a matter of balancing the pros and cons for each individual case.

One way around this could be to use names of valid attributes that are hardly ever used in html markup, such as "onmousemove" or "lang" (which would be pretty ideal in your case). This way the site has the same functionality and will pass W3C validation.

Rik

[pixeltierra]

>use names of valid attributes that are hardly ever used in html markup, such as "onmousemove" or "lang"

An interesting idea I hadn't thought of, but something in me recoils at actually doing this. I guess I rather push the envelope of standards while staying in the spirit of them.

While we're at it can anyone think of any other way to accomplish this?

Essentially I need to label the div in at least 4 different ways in so that each one can be used to control visibility.

What about class="spanish status_3 interpreter_none" I could parse the class attrib as delimited (on " " )text and control it that way. But that is UGLY.

Or I could do this

<div class="appt">
<div class="spanish">
<div class="status_3">
<div class="interpreter_none">

Which is also UGLY.

Thoughts?

[daveVk]

<input type="hidden" value="...¦...¦..." > probably most standard complient way or encode into id="..._..._...". Overuse of Id tags seems to slow IE down.