imList is a JQuery plugin that began as a way to “Ajaxally” (Adjective: Meaning to post or retrieve information without having to refresh the page) create html tables using JQuery. After creating the table plugin, I realized that I could apply much of the same functionality to any type of list that is displayed on a web page, to include: ul/ol, comboboxes, lists, and divs. The power of this plugin is it’s regular expression functionality that will allow developers to display anything they wish within a list. I have also built in a delete row capability that can, not only delete the row that is displayed on the web page, but also allow the developer to delete the record from the server (ajaxally, of course).

Read the rest of this entry »

Depending upon the number of elements on a page, retrieving data from a database and populating a web page with the data can be a very tedious task. In the past, I have always used server-based technologies (PHP, Coldfusion, etc) to populate a page. After growing tired of creating the structures over and over again, I decided to create a JQuery plugin that would do the work for me. Most of the page population plugins I have seen only populate form elements. The imPagePopulate plugin will not only populate form elements, it will populate any HTML element on a page.

Read the rest of this entry »

Prior to using JQuery, I had developed Javascript object that validated forms prior to submission. I got the basic concept (and some code) from the book, “Beginning Ajax with PHP: From Novice to Professional” by Lee Babin. I modified it a great deal. Once I began using JQuery, I converted the Javascript object to a JQuery plugin. Unlike most validation plugins which validate input on exit of the field (onBlur), the imValidateForm plugin validates the entire form once the user clicks the submit button. The plugin also handles the submission (Ajaxally, of course) and allows you to disable the submit button to prevent double-clicking.

Read the rest of this entry »

One of my primary motivations for creating JQuery plugins is to make my life easier by enabling me to develop websites quicker. Early in my application development career (Delphi), a manager once told me, if you use a routine more than once, create a function. At the time, I had created some functions, but more often than not, I would copy/paste the same code in different places throughout the application. This revelation of creating functions was one of those “When you can pull the pebbles from my hand” moments. How interesting. What a novel idea…

There are a number of repetitive tasks that developers perform when creating web sites, especially as it relates to the gui. I was developing a web site where the owner wanted multiples lists of checkboxes on various pages of his website. On most the pages where these checkboxes appeared, the owner wanted the check boxes to have a 4-column display, but there were other pages where he wanted a 3-columns display. I got tired of copying/pasting the php/html structure from page to page, so I decided to create a JQuery plugin (imCheckBoxDB), that would layout the check box lists for me. The checkbox list is created Ajaxally. Both an id and label can be retrieved for each checkbox.
Read the rest of this entry »

This Plugin has been updated. See imGoogleMaps 0.9 – Multiple Addresses, Street View

Although there are other JQuery plugins that enable a developer to integrate Google maps API into websites, I wanted to create a simpler implementation, one that did not have all the options, only the basics. I think that in most situations, a website owner only wants an end-user to be able to view the owner’s address and be able to map directions to that address. In addition, I wanted a plugin that displayed a map interface that is similar to what one would see on Google Maps (auto mode) while also giving the developer the ability to style their own interface (manual mode). This plugin will also display certain Google Map errors codes. In addition, this plugin will allow you to use Ajax to retrieve an address as well as Reverse Geocoding.

Read the rest of this entry »

I decided to redesign my company site (intriguingminds.com). I hadn’t touched it in about 3-4 years, so it was long overdue. With its simplistic design, I decided to use the imUpSideDownTabber JQuery plugin that I had created a few months ago. I soon learned that, due to my design, the plugin was not robust enough for the functionality that was necessary, so I decided to create an upgrade. The new functionality was significant enough (it does more than just up-side-down-tabbing) that I decided to rename the plugin altogether (imAnimTabber). I never did like the name ‘imUpSideDownTabber’. The imAnimTabber plugin can be used to display content with the following animated options:

slide (imUpsideDownTabber)
height
width
fade
carousel

As with the imUpSideDownTabber, the tabs can be created dynamically (‘auto’ mode), but I added a ‘manual’ mode so that the plugin can function when the tabbing interface is already created (the ‘carousel’ option can only be used in ‘manual’ mode). One of the major changes in this JQuery plugin is that the tabs can be individually styled. I needed this functionality for my IntriguingMinds.com (link) site. Unlike the imUpSideDownTabber, I created a demo page so that you can see how to set it up.

Read the rest of this entry »

While designing this blog, I decided that I wanted to use tabs to display certain pages. I needed a JQuery Plugin that worked similarly to jTabber except that I wanted the tabs to display underneath the content. In addition, I wanted the relevant content to slide down (animated) when the tab was clicked. I read somewhere that I could use jTabber to accomplish this, but I thought that it would be easier if I just created the plugin myself. So I created the JQuery Plugin, imUpsideDownTabber (I couldn’t think of a better name). Click on the menu items at the top of this page (about, links, recent) to see the plugin in action.

Read the rest of this entry »

Although I had created a few code snippets using Scriptaculous/Prototype, Dojo Toolkit was the first Javascript Framework that I really learned. I had read about (and downloaded) it quite a few years before I actually used it. I purchased a couple of books (Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers) and Dojo: The Definitive Guide) to help me get started. I was working on a project where web pages would be dynamically created. I have to admit, I struggled. Although Dojo is a  “Javascript” Framework, learning it was like learning a new language – before the discovery of the Rosetta Stone. While I was able to learn the basics from reading the books and looking at the examples on Dojo’s website, in many cases, I just could not find the documentation to do what I wanted to do (or how I wanted to do it). So I guessed. And guessed again. And continually guessed until, “Eureka!”. No that didn’t work either…

Read the rest of this entry »