Get new jQuery plugins just once a week

×

Pointy

FavoriteLoadingAdd to favorites

May 6, 2015

Pointy | A jQuery plugin that dynamically points one element at another

Pointy is a small yet useful jQuery plugin that dynamically points one element at another with drag enabled.

Created by Rob G

Download

Example

Pointy jQuery plugin

element to element

Pointy Bower Version NPM Version devDependency Status

A jQuery plugin that dynamically points one element at another.

Features

Notes

To Do

Setup

<script src="js/jquery.min.js"></script>
<!-- using jQuery UI draggable -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.pointy.js"></script>
<script>
$(function(){

  // $pointer points at $pointy
  var $pointer = $('.label.pointer'),

    // initialize pointy (showing all options; but not all defaults)
    $pointy = $('.repo-name').pointy({
      pointer      : $pointer,
      arrowWidth   : 10, // width of pointer base
      borderWidth  : 1,  // pointer stroke width
      flipAngle    : 45, // angle @ which to flip pointer to a closer side
      defaultClass : '', // additional class name added to the pointer & the arrow (canvas)
      activeClass  : 'pointy-active', // class added to base & pointer on updating

      // optional; if not set, plugin will attempt to match the base color
      borderColor     : null,
      backgroundColor : null,

      // tweaks
      useOffset : null
    });

  // Using jQuery UI draggable (any draggable code will work)
  $label.draggable({
    containment : '.top',
    drag : function() {
      $pointy.trigger('pointy-update');
    }
  });

});
</script>

Documentation & Demos

Version

v1.0.2-beta (3/22/2016)

v1.0.1-beta (4/28/2015)

v1.0.0-beta (3/14/2015)

Pointy

Related posts:

SPservices
jQuery sheet
focusable

To install using Bower
bower install Pointy

Pointy jQuery plugin

http://jquer.in/wp-content/uploads/2015/05/Pointy.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever