jQuery plugin based on raphael.js that lets you dynamically trace page elements. Now also available as AngularJs directive:
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
js
README.md
bower.json
traceit.jquery.json

README.md

traceit

traceit is a jQuery plugin based on raphael.js that allows you dynamically trace page elements. It was written using jQuery prototypal inheritance plugin boilerplate Authors: Alex Sexton & Scott Gonzalez.

traceit adds a dynamic trace to any element on a page; configure its stroke width, animation speed, stroke/fill color and opacity as well as onHide, onClick and onEndTrace callback functions.

v 1.0 Trace size does not adapt to contents.

Plays nicely with Backbone.js and RequireJS

Examples

jquery.traceit.js examples

Now available as Angularjs directive

Usage:

//Initialize a trace instance with:
$('#elem').trace();

//you can later refer to it by doing:
var inst = $('#elem').data('trace');
inst.myMethod();

//or call
$("#elem").trigger("myEvent");

What can I configure? All options are optional. Here are the default options. You can overwrite each and every one of them. The trace constructor accepts the following traceOpt options object.

$('#example2').trace({
    traceOpt: {
        traceCanvasPadding: 10,
        redrawSpeed: 3500,
        traceDivPref: "_wrap",
        traceCursor: 'pointer',
        traceOpt: {
            'stroke': 'yellow',
            'stroke-width': 5,
            'stroke-opacity': 1,
            'fill': 'none',
            'fill-opacity': 0,
            'zindex': 9999
        },
        isVisible: true,
        // will position relative to the document by default
        useRelativePositioning: false, 
        onHide: function () {
            console.log("onHide callback was invoked.")
        },
        onEndTrace: function () {
            console.log("onEndTrace callback was invoked.")
        },
        onClick: function (me) {
            me.options.shape.animate({
                opacity: 0
            }, 1000, function () {
                me.hideTrace();
            });
        }
    }
);

Methods and Events

Methods are actions taken on trace instances. Methods can be called directly or by triggering the following events: hide.trace, show.trace, adjust.trace.

//to hide the trace shape do:
$("#elem").trigger("hide.trace");

//or call hideTrace method directly:
ints.hideTrace();

//to show previously initialized trace shape do:
$("#elem").trigger("show.trace");

//or call showTrace method directly:
inst.showTrace();

//to replay trace animation do:
$("#elem").trigger({
    type: 'adjust.trace',
    adjustments: adjustments_object
});

//or call reTrace(opt) method directly:
inst.reTrace(adjustments_object);

To call the onClick callback function do:

$("#elem").trigger("click.trace");

//or
inst.click();

We can delete trace instance by triggering "delete.trace" event.

$("#elem").trigger("delete.trace");

Callbacks

Can I have callbacks? Sure.

$('#elem').trace({
    onClick: function () {
        console.log('triggered when user clicks on a trace shape.');
    },
    onHide: function () {
        console.log('triggered when hide animation completes.');
    },
    onEndTrace: function () {
        console.log("triggered when trace animation completes.");
    },
});

Author

Yuna Portnoy / valleybazaar.org

Licence

Do what you like, give credit when you can.