Move Elements Between Containers Based On Screen Size - HookTo

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.