jQuery Smart Guides



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

Dependencies

  • JQuery UI Core
  • jquery.smartguides.js

download: jquery.smartguides.js

Recommended

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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


<script type="text/javascript">
    $(document).ready(function() {
        $('.box').smartguides({
            color:'green',
            distance: 5
        });
    });
</script>

<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 |