Embedding responsive data layouts using jQuery

When embedding a Query View on a page you can specify the number of columns it should span over, but sometimes you need to allow the number of columns to adjust dynamically depending on the width of the window.

To do this:

Embed the Query's view on the page, and set it to be in just 1 column.

In Source view, surround the embed with a named div:

<div id="responsive">

[embed]

</div>
<div id="responsivediv">&nbsp;</div>

Add an Upload component to the site, and upload the jQuery file

jquery-1.10.2.min.js

Make a note of the page number of the upload component, and replace the nnn in the script below with that number:

In the Behavior Editor / Settings / General Options / Scripts / "<head> Start", add:

<script type="text/javascript" src="../nnn/files/jquery-1.10.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var $list = $('#responsivediv');
$('#responsive table tr td').each(function() {
  $list.append($('<div style="float:left">').html($(this).html() )) + "</div>" ;
});
$('#responsive').remove();
});
</script>
<style type="text/css">
#LOpage[style]{width:100% !important;}
#container[style]{width:100% !important;}
</style>

Translate: