Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

readme.md

jQuery Transport

Easily move elements between containers with media queries.

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

Screenshot

Heads up!

We are no longer actively using this on projects. Feel free to poke around, however this project may not be compliant with the latest version of jQuery.

Downloads

Usage

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>

Example

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

$('[data-transport]').transport({
	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">
		<p>
			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").
		</p>
	</div>

</aside>

Demo

View this repo's demo page.

Setup development and run tests

brew install phantomjs
npm test

Code At Viget

Visit code.viget.com to see more projects from Viget.

About

Transport elements to other containers based upon media queries.

Resources

Releases

No releases published
You can’t perform that action at this time.