jQueryDOMElementRelocation sample

Relocate DOM elements when the browser reaches a breakpoint.

Resize the browser to see it in action.

Resize the browser, "Logo" & "Search box" will be repositioned.

Search box

Basic usage:


<!-- https://github.com/frontid/mediaQueryEvents/releases/tag/v1.0.0 -->
<script src="js/mediaQueryEvents.jquery.js"></script>
<script src="js/DOMElementRelocation.min.js"></script>


$(function () {

  // Define here the elements and the positions will
  // take for each breakpoint. False means original position.
  new DOMElementRelocation(
    {
      breakpoints: {
        desk: '(min-width: 1230px)',
        tab: '(min-width: 768px) and (max-width: 1229px)',
        mob: '(min-width: 320px) and (max-width: 767px)',
        reallySmall: '(min-width: 0px) and (max-width: 319px)'
      },
      elements: [
        {
          element: '.search-form',
          reallySmall: '.sample-page > footer',
          mob: '.sample-page > .region-sidebar-right',
          tab: '.region-sidebar-left',
          desk: '.sample-page > header'
        },
        {
          element: '.logo',
          reallySmall: '.sample-page > footer',
          mob: false,
          tab: ['.region-sidebar-left', 'bottom'],
          desk: false,
        }
      ]
    });

});