17 ms·
Yeah sorry if this piece is unclear, I could maybe add some more instruction if that would help?? I wanted to make the demo page as minimalist as possible. May
by codez 13y ago
Yeah sorry if this piece is unclear, I could maybe add some more instruction if that would help??
I wanted to make the demo page as minimalist as possible. Maybe I will just add (using js) after step three.
But yes you can use js, something like
$('.myprogrecss').attr('data-progrecss', <PERCENT>); (if using jQuery)
Or I believe
Document.getElementById('myProgrecss').setAttribute('data-progrecss', <PERCENT>);
DISCLAIMER, this code just popped out of my head so it's probably not quite correct but near abouts.
EDIT: I've added that little piece to the demo page.
- gberger 13y agoIf using jQuery this would be better: $('.myprogrecss').data('progrecss', 60);
- codez 13y agoSorry, my bad, that is correct. Thanks!
- crescentfresh 13y agoI don't believe $.fn.data is symmetric with respect to get and set. This will update an in memory cache of "data-*" values only, leaving the corresponding DOM attribute untouched. I don't know why jq does this.
- saraid216 13y agoGuessing, but it's probably because $.fn.data is meant as a storage mechanism, not a DOM manipulation mechanism. Changing the DOM attribute would make it just that tiny bit more expensive and you can already use $.fn.attr to do the same thing.
- codez 13y agoThanks for this saraid216 :) It's always good to know things like this. Thanks again!
- crescentfresh 13y ago$.data is tightly bound to the DOM however - much of jQuery is, in order to reduce developer friction - so this is just more jQuery api asymmetry IMO. To your point, performance is noble goal. Having some asymmetry is no big deal.
- codez 13y agoYeah now this rings a bell I did have a go at using it like this before but the DOM didn't update as mentioned so I reverted to using it how I wrote above. Thanks
- Rajiv_N 13y agoI think jq's data methods allow you to store any type of object. So in the example above, '60' would be stored as a Number and not a String. When you extract it, you would get the Number and this helps if you want to do any math on the value. Since you can't really set element attributes to non-string values, trying to sync the 'data' values with element attributes raises all sorts of unwanted problems.
- woogley 13y agoYou can also just set dataset[0] on the raw element: document.getElementById('myProgrecss').dataset.progrecss = '<PERCENT>'; [0]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...
- codez 13y agoHey woogley, Thanks for that :) I was actually unaware of that method and I prefer that style if I'm honest. Thanks!