"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Articles - jquery entries

Putting links into jTip

0 comments | Published on Wednesday, July 22, 2009 11:19 am

First of all, you will need the jTip library, which can be found here. Now, I recognize that this tooltip plugin is no longer supported, but a lot of people are still using it. So, for those people this is for you. If you want to check out the newer one, look up clueTip.

The Additional Code

If you open the jtip.js file, you will see that when the document loads, it starts the JT_init() function. This function sets a hover function on any link that has the class jTip. We want to modify this just a tad-bit to allow a tooltip to be shown after you mouse off.

Of course, we don't want ALL tooltips to do this. We will add a new class called "extendedJtip" that will represent a tooltip that we want to stay open for an extended period of time.

Let's replace the JT_init() function with this:

Collapsible Fieldsets jQuery plugin - Drupal Style

48 comments | Published on Monday, July 20, 2009 11:17 am

Well, let's get started. First, let's make a simple HTML page to start with.

	
Collapsible Fieldset - jQuery plugin

	
 		Cannot collapse me 		
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisi magna. Pellentesque volutpat, enim et faucibus placerat, est lacus rutrum ante, sollicitudin lobortis massa sapien eget urna. Curabitur ac risus eget turpis blandit scelerisque. Nulla egestas mollis velit quis mattis. Morbi id dui venenatis nisi tincidunt tempor. Morbi libero erat, suscipit quis dictum nec, mattis quis lectus.
 	

	
 		Can Collapse Me! 		
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.."

Modify jQuery's Quicksearch plugin to include reset button

2 comments | Published on Tuesday, June 16, 2009 4:19 pm

To follow through this tutorial, you will first need to have the quicksearch plugin, which can be found here.  

At work, we recently had a client that wanted to search through a table.  This plugin worked great for that.  Well, then he decided it would be great to have a little button next to the text field that allows the user to clear the search, and have the table return to its default state.  Well, that meant diving into the code.  So... here's how to do it...

 

When you open the file, you will find several functions that do different things.  You will also see near the bottom, a list of options.  We will need to first add some options for the reset button. Here is what I used:

reset: false,					//Is reset enabled? (true/false)
resetId: 'resetQS',				//ID for reset button.
resetClass: null,				//Class for reset button.
resetLabel: 'Reset',			//Text inside reset button.

You can see the comments for what each of these do. Now, let's put those to work!

We first will make the function that actually inputs the button.  Place this anywhere with the other functions (I put it in front of the init() function.