Category Archives: jQuery

Using Tooltipster Plugin with jQuery Validation

Any many websites, during the form filling process, we show error messages in tooltips. Today we are trying to achieve the same for our websites.

Prerequisites:

  1. Tooltipster Plugin version 2.1 or 3.0 (The raw code for version 2.1 can be found inside the first jsFiddle below.)
  2. jQuery Validate Plugin

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

Second, use Tooltipster’s advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

Note that this code example takes advantage of the new Tooltipster API features released in version 2.1 on 2/12/13

For Tooltipster version 3.0

The latest version of Tooltipster, version 3.0, is supposed to be working more correctly than version 2.1.

That’s fine, except that an animation flicker is now occurring on every single keystroke even when no content has changed. I suppose we could disable the default onkeyup option in jQuery Validate, but when multiple rules are used, the user would not be aware of his data entry violation until after leaving the field or clicking the submit button.

The workaround is to set the updateAnimation option to false.

The Tooltipster developer made the following suggestion to preserve the message update animation in version 3.0, which works very nicely. From within the jQuery Validate plugin’s errorPlacement callback function, this simple code makes sure the error message is not blank and has changed before calling Tooltipster’s show method. This has the added benefit of greatly reducing the number of calls to Tooltipster.

 

Display Facebook Albums and Photos On Your Website

Facebook Album Browser is a Reponsive jQuery plugin for browsing public albums and photos from any Facebook account and showcases them as a photo gallery on your website. Albums are displayed with respective cover photos. Click on the cover photo to display all the photos under the album. Click on any photo opens the lightbox with next/prev buttons to navigate.

The main purpose of this plugin is to embed and customize Facebook photo albums in your website without being limited with Facebook styling. It also allows you to use it as picker as it raises events for clicked album/photo.

Plugin is compatible for both desktop and mobile websites.

How to Use:

  1. Load Facebook Album Browser plugin right after the jQuery library as shown below.
  2.  Create a container element in body of the page to display the Facebook Album Browser.
  3. Call Facebook Album Browser in above container element and provide Facebook account to display albums as below.
  4. Use other options listed below to customize Facebook Album Browser plugin.
  5. Use events listed below to perform specific actions on specific user action.
  6. Every event function returns an object with following properties:

 

Download: https://github.com/dejanstojanovic/Facebook-Album-Browser

Demo: http://demo.technoworkshop.in/facebook-album-browser/

How to decode HTML entities using jQuery?

Decoding of HTML entities encoded string will be required specially during the AJAX operation. During AJAX operation, if we get HTML entities encoded string, it is required to be decoded before displayed to users. If you want to display HTML entities encoded string in textarea, then you can use following code,

If you want to display HTML entities encoded string in div, then you can use following code,