Custom values into HTML elements as attributes?

Question

I'm currently working on a very simple calendar using Jquery.

Actually, We need a Weekly view for some events, with the possibility to change the week using Jquery (like on Google Calendar).

The easiest way I thought is wrapping each week into a <div>, and with Jquery moving along the different divs / weeks in a slider-like style.

Actually I need a way to number the single divs, and I was thinking to use a "virtual" attribute week-number, i.e.

<div week-number="3"> ... </div>

That's ok when moving to next weeks, but to go to the previous one? Logically, I would get negative week numbers, providing the starting week is numbered "1", that's to say

<div week-number="-3"> ... </div>

I really don't like so much this approach, so have you any idea about identifying the different divs / weeks?

EDIT : Thinking about it: what about using numbered classes? as example class="week-1",class="week-2", etc. ?

score 7 · Accepted Answer · edited May 23 '17 at 12:08

7

This is why data attributes exists: http://ejohn.org/blog/html-5-data-attributes.

And of course you can be with a valid XHTML: How can I use HTML5 Data Attributes in XHTML?.

About your edit, I emphasize even more the use of data attributes. What you suggested works, but is merely a workaround to fix something that already has a right solution.

Even you could include in your project Modernizr if you really believe may have problems with older browsers. Well, I never had these problems.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 16 '11 at 14:32

Erick Petrucelli

14,386
8
64
84

Thanks, buy won't it give any compatibility problem with non HTML5 browsers? I wanted to stay XHTML compliant and avoid extra html markup... – Juan Sebastian Totero Jun 16 '11 at 14:36
1

It's pretty the same idea, the good thing is that it will be html5 ready. Thanks 4 sharing the link – Mauro Jun 16 '11 at 14:36
@Juan: custom data attributes are one of the bits of HTML5 that work pretty well in older browsers. You’ll need to do a bit of work to use the same methods for accessing them, but it’s very do-able: see http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – Paul D. Waite Jun 16 '11 at 15:47
Thank you for your explanation. I understand data-custom represents the HTML5 standard, but it's not so easy to me accepting I have to store data into markup. It smells me of tag-soup. But that will be the standard so, I have to accept it :). @Paul : thanks for the link ;) – Juan Sebastian Totero Jun 16 '11 at 16:08

score 0 · Answer 2 · answered Aug 14 '14 at 18:41

Try adding the value attribute, and then you can read it with the standard JavaScript getAttribute('value') method.

<div value="3"> ... </div>
<div value="-3"> ... </div>

Or even easier, use the id attribute and put the number there.

This attribute will be silently ignored by any browser and no warnings will be raised. I always avoid implementing HTML5 for features that can be implemented in HTML4 somehow.

Custom values into HTML elements as attributes?

2 Answers2