Using HTML5 data-attributes


March 07, 2012

Using the idea from my Conditional Slideshow technique, I had the problem of pulling in appropriate content designed for specific pages in a CMS system while working on a project this week. I wanted a way to store some data tied to a particular page and use that page data to ajax in some content. Five pages within the site would have animated scenes carrying with them 4 heavy images. Not ideal for small screens so some conditional loading via ajax would be nice when the viewport reached a suitable width.

For the first time I found a use for the data- attribute. I was able to store page data in a variable and echo into the data attribute in the footer. Passing this variable into my ajax function, I could bring in the appropriate content tied to that page.

var $footer = $('#footer'),
  $themeURL = $footer.data('theme'),  
  $currentPage = $footer.data('page');
window.onload = function () {
  var display = $('#scene').css('display');
  if (display == 'block') {       
    displayFeatures();
  }
}(this);
function getHTTPObject() {
    var xhr = new XMLHttpRequest();
    return xhr;
}
function displayFeatures() {
  var request = getHTTPObject();
  if (request) {
  request.onreadystatechange = function() {
    displayResponse(request);
  };      
   request.open("GET",$themeURL+"scene-images.php?page="+$currentPage, true);
   request.send(null);                             
  }
}
function displayResponse(request) {
  if (request.readyState == 4) {
    if (request.status == 200 || request.status == 304) {
      var container = document.getElementById("scene-container");
      container.innerHTML = request.responseText;        
    }
  }
}

Latest Thoughts

Thanks for stopping by!