jQuery Smart Guides

An approach which will show smart guides at each cornerend of little boxes. Written in Javascript for webinterfaces.


  • JQuery UI Core
  • jquery.smartguides.js

download: jquery.smartguides.js


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Example: Show smart guides for all elements which refer to the class .box.

<script type="text/javascript">
    $(document).ready(function() {
            distance: 5

<div class="box" style="top:15px;left:200px;height:35px;width:70px"></div>
<div class="box" style="top:50px;left:25px;height:30px;width:65px"></div>
<div class="box" style="top:90px;left:140px;height:40px;width:50px"></div>

Demo: Drag cubes with mouse which show smart guides on left and right sides.

download: jquery.smartguides.js

© Kometschuh.de | Impressum | GitHub | Facebook |