Have a question about my projects, or want to suggest a new feature for traceit?
Feel free to email me at:
yunayyahoo.com
Get the latest version of jquery.traceit.js.
traceit on GitHub
Include the jquery.traceit.js script and it's dependencies jQuery (tested with jquery.js 1.10.2), Raphaël (tested with raphael.js 2.1.2) ) in your page.
<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>
Or include jquery.traceit.min.js script and jquery.min.js. raphael_traceit.min.js is combined and minified raphael.js (v2.1.2) and jquery.traceit.js.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael_traceit.min.js"></script>
Choose an element you would like to trace. For instance:
<div id="example">Let's trace this element.</div>
If you would like to see your element be traced immediately initialize a trace instance with:
//Initialize a trace instance with: $('#example').trace();
Or initialize a trace instance with 'isVisible' option set to false. Then later in your code you can call reTrace({isVisible: true}) method or trigger its equivalent 'adjust.trace' event to start the animation.
//Initialize a trace instance with isVisible set to false $('#example').trace({isVisible: false}); //then later in your code you can call reTrace({ isVisible: true }) method var inst = $('#example').data('trace'); inst.reTrace({ isVisible: true }); //or trigger its equivalent 'adjust.trace' event $('#example').trigger('adjust.trace');
To trace this element click here.
What can I configure? All options are optional. You can overwrite default options by initializing 'trace' instance with options object 'traceOpt'. See the list of trace options below.
//Initialize a trace instance with options object. $('#example2').trace({ traceOpt: { 'stroke': 'blue', 'stroke-width': 3, 'stroke-opacity': 1, 'fill': '#00ff00', 'fill-opacity': 0.2, 'gap-point': 'top_left', 'title': "see, this is example2! Click to hide." }, redrawSpeed: 6000, traceCanvasPadding: 8 });
You can similarly set new options when calling reTrace method or when triggering 'adjust.trace' event
//$('#example31').trace({isVisible: false}); var inst = $('#example31').data('trace'); inst.reTrace({ 'stroke': 'red', 'stroke-width': 2, 'stroke-opacity': 1, 'arrow-end': 'classic-wide-long', 'isVisible': 'true' }); //or trigger 'adjust.trace' event //$('#example32').trace({ isVisible: false }); $('#example32').trigger({ type: 'adjust.trace', adjustments: { 'stroke': '#aa0000', 'stroke-width': 4, 'stroke-opacity': 1, 'stroke-dasharray' : '--..', 'gap-point': 'bottom_right' } });
Can I have callbacks? Sure.
//or trigger 'adjust.trace' event $('#example4').trace({ traceOpt: { 'stroke-width': 4, 'stroke-opacity': .5, 'title': "click to trigger onClick function." }, onClick: function (me) { alert('triggered when user clicks on a trace shape.'); me.options.shape.animate({ opacity: 0 }, 1000, function () { me.hideTrace(); }); }, onHide: function () { alert('triggered when hide animation completes.'); }, onEndTrace: function () { alert("triggered when trace animation completes."); } });
Resizing a window or pressing the escape key will redraw all the traces.
The list of trace options
/******************************************************************************************************************** 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 **********************************************************************************************************************/