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

Articles - jQuery entries

Creating input fields that only accept integers - jQuery

7 comments | Published on Saturday, October 23, 2010 12:27 am

Wouldn't it be nice to force only certain characters into a text field? How about for a field asking for age? You would only want integers. Same with height, weight, or even a phone number. Well, here's a quick snippet that'll do just that!



$(document).ready(function() {

	$("#inputField").keypress(function(event) {

		return /\d/.test(String.fromCharCode(event.keyCode));

	});

});

So, what's happening here? Well, it adds a keypress event to the input field with id "inputField" (feel free to change to whatever you need). Whenever a key is pressed, this function is fired. If the function returns false, the key pressed is not added to the input field. If it returns true, it is added.

The function is given an Event object, and the keyCode value is a numeric value. The String.fromCharCode converts that to the actual character that the user inputted. It is then tested if that character was an integer, using a regular expression test. If it is not an integer, false is returned, and the character is not added to the field! Pretty simple, huh?

Putting links into jTip

2 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

64 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.



<h1>Collapsible Fieldset - jQuery plugin</h1>

<fieldset>

  <legend>Cannot collapse me</legend>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisi magna.</p>

</fieldset>

<fieldset class="collapsible">

<legend>Can Collapse Me!</legend>

  <h2>1914 translation by H. Rackham</h2>

  <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment...,"</p>

</fieldset>

You'll notice that the first fieldset has no class, while the second one has a class of collapsible. We will be using this later on. You'll also want to go ahead and include the javascript source file for jQuery.

The jQuery plugin

Now, let's take a look at the actual plugin. What makes it work? How's it do it? Well, let's find out!

Modify jQuery's Quicksearch plugin to include reset button

4 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.