Traceit.js

Traceit is a jQuery plugin based on raphael.js that allows you dynamically trace page elements.

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: valleybazaar.org

1. INCLUDE JS FILES

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/raphael.js"></script>
<script src="../js/jquery.traceit.js"></script>

2. HTML

<div id="example">Let's trace this element.</div>

3. JAVASCRIPT

$('#example').trace();

4. OPTIONS

$('#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();
            });
        }
    }
);

Here are the default options. You can overwrite each and every one of them. The trace constructor accepts the following traceOpt options object.

arrow-end		string		arrowhead on the end of the path. The format for string is 
					type[-width[-length]]. 
					Possible types: classic, block, open, oval, diamond, none, 
					width: wide, narrow, midium, 
					length: long, short, midium.
cursor			string		CSS type of the cursor
fill			string 		colour, gradient or image
fill-opacity		number 
gap-point		string		["top","top_left","top_right","bottom","bottom_left","bottom_right"] 
			or number	0 - 100, where 0 and 100 both mean "top" (@12 o'clock position), 50 is "bottom" (@6pm), 
							25 is "top_right" (@3pm) etc.
opacity			number 
stroke			string 		stroke colour
stroke-dasharray		string 		[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap		string 		[“butt”, “square”, “round”]
stroke-opacity		number 
stroke-width		number 		stroke width in pixels, default is '1'
title 			string 		will create tooltip with a given text

5. 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");

6. 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.");
    },
});