How to: Circle Marks With Traceit.js and jQuery

In classic whiteboard or flipchart presentations, keywords are often circled to underline their importance. This option of marking can now be transferred to web projects using the jQuery plugin „traceit.js“. Without much effort, chosen HTML elements can be marked with a circle that resembles the hand-drawn circles of whiteboard presentations. „traceit.js“ works especially well with tutorials as the important aspects can be marked very easily and efficiently. Integrating and Using Traceit.js To use „traceit.js“, both jQuery and the JavaScript-library „Raphaël“ need to be incorporated as the plug-in uses the SVG-drawing methods of „Raphaël“. Alternatively, there is also a combined JavaScript file that contains the plug-in as well as the „Raphaël“ library. Once the files are integrated, any content can be circled like this: <p><span id=”schlagwort”>Schlagworte</span> sollten immer auffallen.</p> In the example, the content of a „“-Element is circled. To do so, an ID is distributed and transferred to „traceit.js“ to use the plug-in on the content. $(“#schlagwort”).trace(); Default Encirclement The plug-in makes sure that the content is circled depending on its size. The encirclements are not restricted to text elements as „traceit.js“ can also be used on images. However, there can be problems when trying to circle multiple words that […]