September 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The Top 10 jQuery Plugins for the JavaScript-Weary

  • March 3, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

5. jQuery Facebox

Facebook's interface has really excelled in its use of floating dialog windows, which allow the user to perform certain tasks (such as send friend requests) without having to tediously navigate multiple pages. The Folks at FamSpam apparently like the effect so much that they created a custom jQuery dialog plugin themed in homage to Facebook. The result is a great looking dialog, complete with curved corners, as shown in Figure 4.


Figure 4.
Using the Facebox Plugin (screenshot of demo on Facebox web site)

Yet Facebox's appeal is more than skin deep; in addition to text, it can display images, remote pages, and even Ajax-initiated content. To give you a taste of just how easy it is to integrate Facebox into your site, we'll consider a simple example involving a warning message.

Using Facebox is incredibly simple; just head over to the project's home page and download the latest release. Then integrate the Facebox JavaScript and CSS file into your site. One caveat: you'll need to place the Facebox directory in your web site's root directory because of path definitions in the CSS file.

Next, define both the content you'd like to appear in the Facebox dialog and the link used to display the dialog.

<a href="#info" rel="facebox">Please read the warning</a>
<div id="info" style="display:none;">
 <b>Warning</b>: You are about to enter a super-duper restricted area.
</div>


Next, add the following JavaScript, which triggers the dialog display. This JavaScript attaches an event listener to all hyperlinks assigned the attribute rel=facebox. You can use the loading_image and close_image attributes to define graphics that inform the user that the information is still loading (as might be the case when pulling data from the server) and as an icon for closing the window, respectively.

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
    loading_image : '/facebox/loading.gif',
    close_image   : '/facebox/closelabel.gif'
  })
})
</script>


Executing this example produces the dialog shown in Figure 5.


Figure 5.
Creating a Simple Facebox Dialog

6. jQuery Expandable

By their very nature, textarea fields consume quite a bit of valuable screen real estate. As such, they often force developers to limit the user's ability to review all of the entered text simultaneously. The jQuery Expandable plugin solves this dilemma by allowing the developer to define textareas of any size, while enabling the textarea size to expand as the user begins to exceed the predefined textarea boundaries.

Attaching this behavior to a textarea requires just one line of code:

$('#expandableDemo').expandable();


7. jQuery Timeago

It's often useful to provide users with a temporal reference of the last time they interacted with a form element, last saved their work, or opened a particular page. The team over at Yarp built a very impressive plugin called Timeago, which is capable of doing all of the dirty work for you! Figure 6 illustrates how the plugin is utilized at Yarp, allowing users to keep close tabs on how much time has passed since a comment was posted.


Figure 6.
Keeping Tabs on Elapsed Time at Yarp

To begin using Timeago, just download the latest version from the site and install it per usual. Next, decide what page elements you'll be associating with Timeago, and attach the timeago() method to them, as demonstrated here:

 $(document).ready(function() {
     $("b.timeago").timeago();
 });


Finally, add the page elements and insert an ISO 8601- formatted timestamp within the element title. Timeago will automatically convert these timestamps to the human-friendly phrases, and regularly update them as time passes. Because you're presumably pulling these timestamps from a database such as MySQL, they likely will have an ugly syntax. But don't worry because most languages and databases support an easy conversion feature. Here's an example of what one such page element will look like:

<b class="timeago" title="2010-02-25T014:18:17Z">Last Updated</b>


Rendering a page with this particular timestamp to the browser produces the output displayed in Figure 7.


Figure 7.
Rendering a Timestamp with Yarp

8. jQuery Password Strength

Prompting users to provide sufficiently strong passwords when they create accounts can be a challenge. Of course, you don't want to frustrate the user by repeatedly informing him that the password he's chosen doesn't meet the required level of security. Using the Password Strength plugin, you can provide users with real-time feedback regarding the password strength (see Figure 8)!


Figure 8.
Checking Password Security Level with Password Strength (screenshot taken from Password Strength demo site)

9. jQuery Corner

Have you ever wanted to use rounded corners as element borders but were confounded by CSS and image layout issues? Enter the jQuery Corner plugin, which completely removes all such complexity with a single line of code. For instance, the rounded corners in Figure 9 were created with nothing more than the CSS border attribute and a single call to Corner!


Figure 9.
Creating rounded corners with Corner

To recreate this effect, download jQuery Corner and integrate it per usual into your web page. Then define the element that you will modify to use the rounded corners, as demonstrated here:

<div id="menu">
  <a href="">Google Maps API</a><br />
  <a href="">jQuery</a><br />
  <a href="">MySQL</a><br />
  <a href="">PHP</a><br />
</div>


Next, define the CSS that will be used to specify attributes such as the element width. The only one that really counts to Corner is the border attribute:

#menu {
 border: 1px solid red;
 padding: 5px;
 width: 150px;
};


Finally, add the JavaScript that tells Corner which element(s) to round!

$(document).ready(function() {
$("#menu").corner("round corners 2");
})


10. jQuery Word and Character Counter

You should often limit the number of characters that users can enter within textareas such as blog comments. To help the user keep tabs on his current character count, check out the jQuery Word and Character Counter, which can provide real-time monitoring of this important metric.

Share Your Top Pick

Have you written your own jQuery plugin for UI enhancement, or do you want to mention one not introduced in this article? Tell me about it in the comments!

About the Author

Jason Gilmore is founder of EasyPHPwebsites.com. He is the author of several popular books "Easy PHP websites with the Zend Framework," "Easy PayPal with PHP," and "Beginning PHP and MySQL, Third Edition."


Tags: CSS, JavaScript, jQuery, user-generated content, user interface



Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel