New JS plugin: DOMElementRelocation
08/10/2018 by Capy

I present to you DOMElementRelocation. This is a plugin created to help front-end (like us) to relocate DOM elements to a new position based on the current breakpoint.

Use case

Lets suppose you have a search form at the header of a web page. Now suppose the mobile design requires this form at the sidebar above the search filters...

The problem on this case is the header and the sidebar are not sharing the scope. You can't just tell via CSS "move the search box from header to the sidebar"

So here comes DOMElementRelocation in. This plugin allows you to accomplish this via js. The elements can be moved from its original location and come back to the original place when its needed. 


<script src="js/jquery.js"></script>
<script src="/js/mediaQueryEvents.jquery.js"></script>
<script src="../dist/DOMElementRelocation.js"></script>
$(function () {

  new DOMElementRelocation(
      // Define the breakpoints. there is no limit 
      // and name them as you want.
      breakpoints: {
        desk: '(min-width: 1230px)',
        mob: '(min-width: 0px) and (max-width: 1229px)'
      // Declare as many elements you want.
      elements: [
          // The element.
          element: '.search-form',
          // Move to the footer when "mob" breakpoint gets reached.
          mob: '.sidebar',
          // keep the original position.
          desk: false



On this example (assuming the .search-form is located at the header), the element will be moved to the sidebar when the browser size is less than 1229px and will keep it's original position when reach desktop.

For further info please see

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.