Animation not smooth / appears jerky

Sometimes CSS animations using jQuery can not appear smooth or comes across jerky.

The reason for this is jQuery is animating the height of the container without including the padding that may be being applied.

The very simple solution is to wrap the content with a container that doesn’t have any padding.

Making table rows sortable with jQuery

Making table rows sortable.

.sortable({
  axis: 'y',
  containment: 'parent',
  items: '> tr',
  handle: '.item-order-handle',
  placeholder: 'change-order-placeholder',
  tolerance: 'pointer'
 });
.ui-sortable-helper {
  display: table;
}

Notes

  • Need to explicitly set the column widths in your TD tags (using <col width=”20″> doesn’t pass on to the helper)

References

Re-order columns with CSS

I needed to re-order my Bootstrap columns (rows + col) when viewing the page on a mobile.

<div class="row">
<div id="first-column" class="col"></div>
<div id="second-column" class="col"></div>
<div id="third-column" class="col"></div>
</div>
#first-column { order: 1; }
#second-column { order: 2; }
#third-column { order: 3; }

@media (max-width: 768px) {
#second-column { order: 3; }
#third-column { order: 2; }
}

References