Moving Your Markup with jQuery Transport

Chris Manning, Development Director

Article Category: #Code

Posted on

During our work on a responsive news website for WRAL, some design strategies called for custom content placements at various breakpoints. And by custom, I mean custom––the kind of flexible placements where CSS alone is not a realistic or responsible solution.

Reflow Options

Reflow Options Illustration

Our team identified a need for a 'blended' solution. We knew that JavaScript would be necessary, but we also wanted to create a framework that was easy for non-JS developers to use. With this in mind, Nate Hunzaker wrote Transport, a small (2kB) and simple jQuery plugin for moving HTML at matching media queries.

How it Works

Transport uses matchMedia (with a polyfill included for older browsers) to check for predetermnined breakpoints. When a match is found, the HTML is appended to the specified destination for that breakpoint.

HTML
 <main id="main"></main>
<footer id="footer"></footer>
<aside id="sidebar">

  <!--
  Transport looks for a pattern in the data-transport attribute:
  [media query key]![jQuery selector to transport to]
  Multiple matches should be delimited by pipes, i.e. '|'
  -->
 <div data-transport="tablet!#main|mobile!#footer">
 <p>
 Breakdown: at tablet, (max-width: 1024px), this is transported to $("#main").
 At mobile, (max-width: 500px), this is transported to $("#footer").
 </p>
 </div>

</aside>
JavaScript
 $('[data-transport]').transport({
    mobile: '(max-width: 500px)'
    tablet: '(max-width: 1024px)'
});

 

Here is an illustration of how content could transport to a completely different area of the page at the “tablet” breakpoint:

 

Tablet Layout Transport Locations

Ease of Use

Transport was designed to require as little JavaScript knowledge as possible. Once the initial script is set up, anyone with a working knowledge of HTML can customize the position of content by editing data-transport attributes.

Download and Demo

jQuery Transport is available on Github. A demo is also available here. Please let us if there are any ways we could improve Transport by opening an issue.

Visit https://viget.com/work/wral for more details about our work on WRAL's site relaunch.

Chris Manning

Chris is a developer who's passionate about web performance. He works in our Durham, NC, office for clients such as ESPN, Dick's Sporting Goods, and the Wildlife Conservation Society.

More articles by Chris

Related Articles