jQuery FocusOn – Highlight an area of your website


Tired of your clients missing some important feature of your web site?, maybe it’s new and you want to make them notice it.

jQuery FocusOn is a plugin that makes your clients fully focus on a certain area of your web site, it receives an element and will highlight the area of that element an make every thing else opaque and disabled for clicking.


  • Highlight the area of the desired element by making every thing else opaque and disabled
  • Display a descriptive message on top of the page (optional)
  • Display a close button next to the message (optional)
  • Close on click out the highlighted area (optional)
  • Can apply margins to the highlighted area (for example: 20px more at the bottom)
  • Close after desired milliseconds (optional)
  • Autoscrolls to the position of the element to focus on
  • Custom opacity of the opaque overlay
  • Show shadow effect inside the highlighted element (optional, and not on IE)
  • Custom fadeIn and fadeOut effect duration
  • Multiple events to know when the FocusOn starts and ends
  • Method for closing the FocusOn manually
  • Fully CSS customizable (Overlay color, shadow color, message fonts sizes, etc)
  • Tested in IE6, IE8, Chrome 12, Firefox 5, Opera 11.10, Safari 5

Vendor Information