JavaScript
Article

jQuery Embedded Help System (Guest Post)

By Sam Deering

embedded-help-jquery-plugin

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.

ehelppic1

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?)

ehelp2

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:
http://sourceforge.net/projects/embeddedhelp/
http://plugins.jquery.com/project/embedded-help

Author: Josip Kalebic from Croatia – a Web Developer.
Contact Author

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.