Sunday, February 15, 2015

Hybrid Responsive HTML with Foundation

If you are using Foundation with Interchange you have seen extra requests that the client has to make to download the content. This is fine for images since that is a separate request anyway, but for HTML content I didn't want that extra request for mobile devices.

My solution, so far, was to exclude my default template size, (small), from the data-interchange variable, and include that small template directly into the div as the default content. This works fine with loading on a small template since no other requests are done. But if the browser is resized to medium and back to small it would stay with the medium html loaded by interchange.

To get around this I setup a new data attribute, and a little javascript.

in the div where data-interchange exists, I added a data-interchangeonreplace attribute.

Here is my example Div
<div id="testcontent" data-interchange="[medium.html, (medium)], [large.html, (large)]" data-interchangeonreplace="[small.html,(small)],[medium.html, (medium)], [large.html, (large)]">
  <div data-alert class="alert-box secondary radius">
    This is the default content.
    <a href="#" class="close">×</a>
  </div>
</div>


Here is the javascript:

$(document).on('replace', 'div', function (e, new_path, original_path) {
 var divid = $('#' + e.currentTarget.id);
 if (divid.attr('data-interchangeonreplace')) {
  divid.attr('data-interchange',divid.attr('data-interchangeonreplace'));
  divid.removeAttr('data-interchangeonreplace');
    divid.foundation('interchange', 'reflow');
 }
});


now when resizing past small it will add small.html back to the list so it if is then resized smaller it will display properly.

The same can be done in reverse, use whatever methods to determine your default template to display and only include it back in if the size changes, eliminating an extra client HTTP request for each block of code you load dynamically on your page.

0 comments:

Post a Comment