Move Elements Between Containers Based On Screen Size - HookTo
File Size: | 5.92 KB |
---|---|
Views Total: | 417 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

HookTo is a tiny and configurable jQuery plugin which has the ability to automatically move any element between containers depending on the screen size.
How to use it:
1. To use the plugin, include the main JavaScript file after jQuery.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.hookto.js"></script>
2. Create an element and specify the destination element using the data-hook-to attribute.
<div class="container-1"> Container 1 <div class="hookto" data-hook-to="#hookto-element"> Element To Move </div> </div>
3. Insert a meta element to the destination element.
<div class="container-2"> Container 2 <meta id="hookto-element"/> </div>
4. Determine the position after the element is moved: 'after' (default), 'inside', or 'before'.
<div class="container-1"> Container 1 <div class="hookto" data-hook-to="#hookto-element" data-hook-to-position="before"> Element To Move </div> </div>
5. Make the element return to its previous position when the screen size is smaller than x pixels.
<div class="container-1"> Container 1 <div class="hookto" data-hook-to="#hookto-element" data-hook-to-return="960"> Element To Move </div> </div>
6. Make the element return to its previous position when the screen size is larger than x pixels.
<div class="container-1"> Container 1 <div class="hookto" data-hook-to="#hookto-element" data-hook-to-mobile-first="false" data-hook-to-return="960"> Element To Move </div> </div>
7. You can also init & config the plugin via JavaScript:
$('.element').hookTo(destinationHook, { 'hookOriginPrefix': 'hookto-orig', 'position': 'after', 'returnAt': '768', 'mobileFirst': true });
8. Callback functions.
$('.element').hookTo(destinationHook, { 'onInit': function () { }, 'onHook': function () { }, 'onUnhook': function () { } });
This awesome jQuery plugin is developed by Sade. For more Advanced Usages, please check the demo page or visit the official website.