vigetlabs / Jquery.transport
Transport elements to other containers based upon media queries.
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
jQuery Transport
Easily move elements between containers with media queries.
Uses matchMedia, if supported, or Paul Irish's polyfill to move elements on resize.
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
-
Development: jquery.transport.js
-
Production: jquery.transport.min.js
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
Visit code.viget.com to see more projects from Viget.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].