Understanding HTML5 Data Attribute

Question

I am new to javascript / jQuery, however I am working hard to understand what I am doing. I was inspired by the diesel site . On this site, data attributes are used for text blocks on the main page. data-color . I want to perform this function on my site . The ability to change the color of each block on the record, since the user scrolls down the page, it starts in different ways.

I came here for help since I have not seen any tutorial on the functionality that I am trying to achieve. Does anyone know how to do this? I believe that this would be useful for those who want to perform the same or similar functionality.

 getColorMod: function(color, val) { var hexToRgb = function(hex) { var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(hex); return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false; } var array = hexToRgb(color), r = parseFloat(array[0] + val), g = parseFloat(array[1] + val), b = parseFloat(array[2] + val), rgb = array ? { r: r >= 250 ? 200 : r, g: g >= 250 ? 200 : g, b: b >= 250 ? 200 : b } : false; return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'; }, 

Answer 1

The HTML5 data attribute exists simply to store additional information inside html elements. I used it when printing various data sets programmatically to include information such as user account numbers. bits of data that you can get with javascript or jquery

You can see the excellent documentation / tutorial on HTML5 data attribute by webtutsplus

The data attribute is interesting in that you can define it as you like:

  data-[NAME]="[VALUE]" data-color="blue" data-price="$19.96" 

Later versions of jQuery also have built-in easy-to-use functions specifically for working with Retrieving and setting HTML5 data attributes - the documentation is here

Imagine a hypothetical html:

  <span id="fluxCapacitor" data-gigawats="1.21"></span> 

Calling a .data handler on our jquery element with a stream capacitor will return "1.21"

  $('#fluxCapacitor').data('gigawats'); // "1.21" 

And you can use two features to tune your stream capacitor to more than 9000 gigawatts.

  $('#fluxCapacitor').data('gigawats', "over 9000"); 

Result:

  <span id="fluxCapacitor" data-gigawats="over 9000"></span> 

---

edit: adjusted power levels for historical accuracy.

Answer 2

 <div class="bg"> <div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div> </div> 

using the library of your choice

Diesel seems to perform color transitions.

 var $bodyBg = $('<div />'), $bg = $('<div />').addClass('bg').append($bodyBg), $arrow = $('<span />').addClass('arrow'); this.$navs.append($bg).append($arrow); this.$navs .on('hide', function() { // hide navigation bar $(this).addClass('hide'); }) .on('show', function() { // show navigation bar $(this).removeClass('hide'); }) .on('changeColor', $.proxy(function(e, color) { var $elm = $(e.currentTarget), $bg = $elm.find('.bg div'); if (Modernizr.csstransforms && Modernizr.csstransitions) { // css3 transition $bg.css({ transition: 'background 500ms ease', backgroundColor: this.getColorMod(color, 12) }); } else { // no css3 transition support $bg.css({ backgroundColor: this.getColorMod(color, 12) }); } }, this)) .trigger('hide') .appendTo(this.$el);