Using jQuery.resize to Enhance Responsive Design

Twitter Bootstrap provides some convenient grid scaffolding to use for responsive design applications.  The xs-sm-md and lg classes allow you to adjust your design based on the screen real estate available.  Sometimes, however, this isn’t enough.  Recently when working on laying out a couple portlets horizontally on a page I discovered that I needed some additional control over the display (or lack thereof) of some columns in my portlets. In short, I wanted to hide some of those columns when the width of the screen was at a certain horizontal threshold.  The standard bootstrap classes were not granular enough for my needs.    Time for some jQuery wizardry.

Plan:

  1. Use $(window).resize to listen for the window size changing
  2. Check the size of the desired elements against certain thresholds
  3. Perform DOM manipulation as necessary to add/remove elements
	<div class="panel panel-primary panel-heading-custom">
		<div class="panel-heading">
			<h2 class="">
				Extending Responsive Design with jQuery.resize()
			</h2>
		</div>
		<div class="row row1">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 panel-body-header">Panel Left</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 panel-body-header">Panel Right</div>
		</div>
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 panel-body-header">
				Width:<span id="panel-left-width"></span>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 panel-body-header">
				Width:<span id="panel-right-width"></span>
			</div>
		</div>
		<div class="row">
			<div id="panel-left" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 panel-body-custom">
				<div class="panel-body-inner-left">
					<table>
						<thead>
							<th class="c1">Column 1</th>
							<th class="c2">Column 2</th>
							<th class="c3">Column 3</th>
							<th class="c4">Column 4</th>
						</thead>
						<tbody>
							<tr>
								<td class="c1"></td>
								<td class="c2"></td>
								<td class="c3"></td>
								<td class="c4"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="panel-right" class="col-lg-6 col-md-6 col-sm-6 col-xs-6  panel-body-custom">
				<div class="panel-body-inner-right">
					<table>
						<thead>
							<th class="c1">Column 1</th>
							<th class="c2">Column 2</th>
							<th class="c3">Column 3</th>
							<th class="c4">Column 4</th>
						</thead>
						<tbody>
							<tr>
								<td class="c1"></td>
								<td class="c2"></td>
								<td class="c3"></td>
								<td class="c4"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

The following bit of javascript will check the size of the panels and remove a column if the width of the panel becomes less than 500 (and then 400) pixels.

$('document').ready( function() {
	// initialize panel width display
	resizer();

	$(window).resize(function(){
	    resizer();
	});
});

function resizer() {
    $('#panel-left-width').text($('#panel-left').width());
    $('#panel-right-width').text($('#panel-right').width());
    plw = $('#panel-left').width();
    prw = $('#panel-right').width();
    $('#panel-left-width').text(plw);
    $('#panel-right-width').text(prw);
    if (plw &lt; 500) {
	$('.c4').hide();
    } else {
	$('.c4').show();
    }
    if (prw &lt; 500) {
	$('.c4').hide();
    } else {
	$('.c4').show();
    }
    if (plw &lt; 400) {
	$('.c3').hide();
    } else {
	$('.c3').show();
    }
    if (prw &lt; 400) {
	$('.c3').hide();
    } else {
	$('.c3').show();
    }
}

Simple and effective. This could be extended to other uses as well, taking into account different devices in addition to screen size.

See a working demo here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s