Transport elements to other containers based upon media queries.
JavaScript HTML CSS
Latest commit 8fa0989 Dec 24, 2015 Doug Avery Adding plug to README
Failed to load latest commit information.
build Adds minified version of transport to build dir. Feb 4, 2014
src Renames a variable to make more sense Oct 2, 2013
test Simplifies some examples Feb 4, 2014
package.json Updates readme. Replaces old references to tube with transport. Oct 3, 2013

jQuery Transport

Easily move elements between containers with media queries.

Uses matchMedia, if supported, or Paul Irish's polyfill to move elements on resize.




jQuery.Transport looks for the following pattern in a data-transport attribute of an html element:

<div data-transport="[media query key]![selector]|[media query key]![selector]...(and so on)"></div>


You can alias media queries by passing an object into the plugin creation method:

    mobile: '(max-width: 500px)'
    tablet: '(max-width: 1024px)'

With the matching html:

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

    <!-- The Important Stuff -->
    <div data-transport="tablet!#main|mobile!#footer">
            Breakdown: at tablet, screen and (max-width: 1024px), this is transported to $("#main").
            At mobile, screen and (max-width: 500px), this is transported to $("#footer").



View this repo's demo page.

Setup development and run tests

brew install phantomjs
npm test

Code At Viget

Visit to see more projects from Viget.