foundation-mover

Moves elements around the DOM based on Foundation breakpoints.

Target elements are appended to the container element.

Moving an element

• add data-mover attribute to container element
• add data-mover-target="targetElementId:foundationBreakpoint" attribute to container element

<!-- Target element -->
<img id="image" src="image.jpg" />

<!-- Container element -->
<div class="container" data-mover data-mover-targets="image:large;"></div>

@breakpoint == 'large'

<!-- Container element -->
<div class="container" data-mover data-mover-targets="image:large;">
  <!-- Target element -->
  <img id="image" src="image.jpg" />
</div>

Moving an element back

To move an element back and forth you will need two container elements:

<!-- Container element (1) -->
<div class="container-1" data-mover data-mover-targets="image:medium down;">
  <!-- Target element -->
  <img id="image" src="image.jpg" />
</div>

<!-- Container element (2) -->
<div class="container-2" data-mover data-mover-targets="image:large up;"></div>

@breakpoint <= 'medium'

<!-- Container element (1) -->
<div class="container-1" data-mover data-mover-targets="image:medium down;">
  <!-- Target element -->
  <img id="image" src="image.jpg" />
</div>

<!-- Container element (2) -->
<div class="container-2" data-mover data-mover-targets="image:large up;"></div>

@breakpoint >= 'large'

<!-- Container element (1) -->
<div class="container-1" data-mover data-mover-targets="image:medium down;"></div>

<!-- Container element (2) -->
<div class="container-2" data-mover data-mover-targets="image:large up;">
  <!-- Target element -->
  <img id="image" src="image.jpg" />
</div>

Multiple Target Elements

You can move multiple elements, even at different breakpoints:

<!-- Target element (1) -->
<img id="image" src="image.jpg" />
<!-- Target element (2) -->
<p id="paragraph">This is a pragraph!</p>

<!-- Container element -->
<div class="container" data-mover data-mover-targets="image:large; paragraph:xlarge"></div>

@breakpoint == 'large'

<!-- Target element (2) -->
<p id="paragraph">This is a pragraph!</p>

<!-- Container element -->
<div class="container" data-mover data-mover-targets="image:large; paragraph:xlarge">
  <!-- Target element (1) -->
  <img id="image" src="image.jpg" />
</div>

@breakpoint == 'xlarge'

<!-- Container element -->
<div class="container" data-mover data-mover-targets="image:large; paragraph:xlarge">
  <!-- Target element (1) -->
  <img id="image" src="image.jpg" />
  
  <!-- Target element (2) -->
  <p id="paragraph">This is a pragraph!</p>
</div>

Events

Events are triggered before and after a container element moves a target element: Both the event and the target element being moved are passed through as arguments.

// Example jQuery listener (before target is moved)
$(document).on('before_move.zf.mover', function(event, target) {
  // Do stuff
});
// Example jQuery listener (after target is moved)
$(document).on('after_move.zf.mover', function(event, target) {
  // Do stuff
});