jQuery Response

Set the scroll property of the jqxResponse. Author: http://jqwidgets.com

by redoak2000

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="currentWidth">Width:</div>
<table>
  <tr>
    <td>1 row, 6 columns</td>
    <td>2 rows, 3 columns</td>
    <td>3 rows, 2 columns</td>
    <td>6 rows, 1 column</td>
  </tr>

  <tr>
    <td>>=1170px</td>
    <td>>=970px</td>
    <td>>=750px</td>
    <td>>=0px</td>
  </tr>
</table>
<div class="row" id="row">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
</div>
<table>
  <tr>
    <td>1 row, 3 columns</td>
    <td>3 rows, 1 column</td>
  </tr>

  <tr>
    <td>>=970px</td>
    <td>>=0px</td>
  </tr>
</table>
<div class="row" id="row2">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</div>
<table>
  <tr>
    <td>1 row, 2 columns</td>
    <td>2 rows, 1 column</td>
  </tr>

  <tr>
    <td>>=750px</td>
    <td>>=0px</td>
  </tr>
</table>

CSS

body,html
{
  overflow: hidden;
}
       .row div {
          background: #5cb85c;
          color: #fff;
        }
        
        .row {
          overflow: auto;
        }
        
        table {
          margin-top: 30px;
          margin-bottom: 30px;
        }
        
        td {
          padding: 5px;
          border: 1px solid #aaa;
        }
        
        #currentWidth {
          position: absolute;
          top: 10px;
          right: 10px;
        }

JavaScript

var response = new $.jqx.response();
  response.responsive({
    container: $("#row"),
    deviceTypes: "Desktop, Tablet, Phone",
    margin: {
      left: 1,
      top: 0,
      right: 0,
      bottom: 0
    },
    padding: {
      left: 5,
      top: 15,
      right: 5,
      bottom: 15
    },
    colWidths: [0.16666, 0.16666, 0.16666, 0.16666, 0.16666, 0.16666],
    breakpoints: [{
      colWidths: [0.33, 0.33, 0.33, 0.33, 0.33, 0.33],
      width: 1170
    }, {
      colWidths: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
      width: 970
    }, {
      colWidths: [1, 1, 1, 1, 1, 1],
      width: 750
    }]
  });
  response.responsive({
    container: $("#row2"),
    deviceTypes: "Desktop, Tablet, Phone",
    margin: {
      left: 1,
      top: 0,
      right: 0,
      bottom: 0
    },
    padding: {
      left: 5,
      top: 15,
      right: 5,
      bottom: 15
    },
    colWidths: [0.25, 0.5, 0.25],
    breakpoints: [{
      colWidths: [1, 1, 1],
      width: 970
    }]
  });

  $("#currentWidth").html("Width: " + $(window).width() + "px");
  $(window).resize(function() {
    $("#currentWidth").html("Width: " + $(window).width() + "px");
  });