Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
 
 
 
 

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.

About

jQuery plugin based on raphael.js that lets you dynamically trace page elements. Now also available as AngularJs directive:

Resources

You can’t perform that action at this time.