Using HTML5 Data Attributes

One of the coolest features in HTML5 is the data attribute. You can now build out attributes on your own to customize content as you see fit. They aren’t rendered by the browser, simply added to the objects as data for you to play with. Let’s have a look.

Writing the HTML

<div id="myReport" data-limit-data="30" data-query="users">
    ...Report stuff here...
</div>
<div id="results" data-columns="3">
    ...Results here...
</div>

So we’ve built two divs, each with a custom attribute added to it. The first could be used as a param to limit the report’s range. The second could be used to tell the CSS how many columns the div will have (and style it accordingly). Let’s see how we can reference them.

In JavaScript

var reports = document.getElementById('myReport');
reports.dataset.limitDays // 30
reports.dataset.query // users

var results = document.getElementById('results');
results.dataset.columns //3

So, you can see we can grab the data out of the HTML. Perhaps use the first divs data to build a report (query and limit) and put the results inside it or the next div down.

In CSS

div[data-columns='2'] > div.column {
  width: 600px;
}
div[data-columns='3'] > div.column {
  width: 400px;
}
div[data-columns='4'] > div.column {
  width: 300px;
}

Now we can get the CSS to adapt to the size of the columns based on an attribute that was defined in the parent div.

 notesMaker: An Example

So using these concepts, we can build a poor man’s CMS with JavaScript. The JavaScript takes content from a JSON object (in real life, you would do this as an AJAX call to the backend) and puts it into the post-it notes on the screen.

Grab the Code from GitHub

notesMaker.js

//Putting data in a flat file so we don't 
//have to mess with AJAX calls in our demo.
var data = [];
data["intro"] = {  
  title:"Introduction",
  content:"This is content. It's built out of a JSON object in notesMaker.js. You can also make an AJAX call and load the content dynamically.",
  date:"2016-05-04"
};
data ["message"] = {
  id:"message",
  title:"A Message",
  content:"This is a message from the great beyond. Can you hear me? Wooo. It's scary, isn't it? And there's another thing I've been wanting to tell you, Zaphod.",
  date:"2016-02-15"
};
data["end"] = {
  id:"end",
  title:"Conclusion",
  content:"And that's all I have to say about that.",
  date:"2016-02-15"
};

//This would be simpler with jQuery, 
//but we'll do it without so you're seeing just vanilla JS.
var e = document.getElementsByTagName("*");
for (var i=0; i<e.length;i++){
  if(e[i].dataset.notesContent){
    var c = e[i].dataset;
    var d =data[c.notesContent];
    var content = d.content;
    
    if(c.notesLength){      
      var addon = "";
      if (d.content.length>c.notesLength){
        addon = "...";
      }
      d.content = content.substr(0,parseInt(c.notesLength)) + addon;
    }
    e[i].innerHTML = "<h2>"+d.title+"</h2><p class='noteContent'>"+d.content+"</p>";
    if(!c.notesHideDate){
      e[i].innerHTML += "<p class='noteDate'>Posted: "+d.date+"</p>";
    }
  }
}

index.html

<html>
  <head>
    <title>Data Attributes</title>
    <link href="style.css" rel="stylesheet"/>    
  </head>
  <body>
    <h1>Using Data Attributes</h1>    
    <div id="wrapper">
    <div class="notes" id="firstNote" data-notes-content="intro"></div>
    <div class="notes" id="secondNote" data-notes-content="message" data-notes-length="100"></div>
    <div class="notes" id="thirdNote" data-notes-content="end" data-notes-hide-date="true"></div>
  </div>
    <footer>Copyright 2016 by <a href="http://www.brianrollins.com">Brian Rollins</a></footer>
    <script src="notesMaker.js"></script>
  </body>
</html>

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {font-family:"Open Sans", sans-serif; background-color: #eee;}

a {color:navy; text-decoration: none;}

footer {padding-top:20px;}

.noteDate {font-size: small; text-align: right;}

#wrapper {display:inline-block;}

.notes {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
  
  width:300px;
  height:300px;
  padding: 10px;
  margin:10px;
  float:left;
}
  
#firstNote {
  background-color: #eae672;
  transform: rotate(2deg);
  
}
#secondNote {
  background-color: lightblue;
  transform: rotate(-1deg);
}
#thirdNote {
  background-color: lightgreen;
  transform: rotate(1deg);
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.