jQuery Embedded Help System (Guest Post)

Share this article


Today we have another guest post on our jQuery blog. Josip Kalebic from Croatia who is a Web developer who specialises in jQuery and PHP. He has helped develop this awesome embedded help plugin! The animated help tool is really something special you must check it out! Over to him.

Embedded Help Site
Download Page
See Demo

Embedded help is designed as a complete web help system, which consists of two main parts:

One is a Context-sensitive box containing questions (help links) depending on the current user interface.


Second part is a embedded procedural assistance whether it is a step by step animation or static view of the numbered points. Procedural help answers the question “How to ..?”. (How to do something?)


The problem with classical “Context-sensitive help” is, If a user encounters a problem during his working operation that can not be resolved, he is forced to search for problem and answer. And when he finds it, he hawe to study it and then aply it to his situation. So, the emebedded help system provides less time for searching the problem and visual appliance of answer in actual situation.

The goal of embedded help was to make such a system that would not requested additional changes to user interface insted to use the existing structure elements using only html tags, classes and ID-s as the selectors, where jquery imposes as a perfect tool. Plugin works on the principle of defining the paths(points) as arrays in JSON format[http://www.json.org/] which describes the movement of pointer and “what to do” action for each element(point) and paths file is separated from the rest of web aplication. So the whole embedded help can be created at the very end (when the web application is fully developed) or it can be subsequently integrated into existing web applications.

Although the plugin can be used on any web interface, the original purpose is for web applications, CMS and E-commerce systems

Technical characteristics of the embedded help plugin:

  • Two way method: animated and static
  • Tooltip align i duration options
  • External function call system
  • ‘Esc’ key function
  • Viewport system
  • JSON paths definition

At the end, I would like to thank the people who participated in the development of the plugin: Piotr Roznicki and Székely Szabolcs and invite other jquery developers to get involved with their improvements of embedded help or developing new systems of embedded help. Join sourceforge project.

More about embedded help system can be found at:
Author: Josip Kalebic from Croatia – a Web Developer.
Contact Author

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form