I recently had to update my imGoogleMaps JQuery Plugin due to problems that arose from the Geocode request rate limitations. As I researched the problem, I delved even more into the Google Maps API. Although this is a minor release, I decided to add custom marker icons to this version. Now you should be able to easily add custom markers to your Google Maps without having to worry about creating the underlying Google Maps API code – JQuery and the imGoogleMaps plugin helps you create a customized map in the fraction of the time. I also added the ability to display a phone number and a description for each address in the infoWindow.
Archive for the ‘plugins’ Category
While working on the imGoogleMaps upgrade, I realized that I had to add a progress bar. Rather than creating the progress bar functionality in imGoogleMaps, I decided to create a separate JQuery plugin – imProgressBar. It was simple to develop and easy to use – and I even took the time to create over 20 bar graphics.
I finally found the time to upgrade imGoogleMaps JQuery plugin. When I first began the upgrade, my plan was to only add the handful of items that were requested by a few users (and fix a few bugs). When the upgrade was complete, I had incorporated the GStreetviewPanorama object and Street View Overlay into the plugin. I also added the ability to plot multiple addresses ajaxally via a json object and add a business name to the infoWindow.
I created a JQuery Plugin, imValidateForm. As the name suggests, the plugin is used to validate forms. In this post, I will discuss how to use the imValidateForm plugin with CodeIgniter.
I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.
I created simple JQuery plugin that rotates images on a page. Actually, there are three modes: random, rotate, carousel, and portfolio. In the default mode, random, the plugin will display a randomly selected image. In the rotate mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. In the carousel mode, the images will move to the left in a carousel effect. I recently added a portfolio mode that using the same carousel effect, but the images are displayed differently. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image. You can also set the image title and set whether the url will appear in a separate window (target = ‘_blank’) or in the same window (target = ‘_self’).
Read the rest of this entry »
Using JQuery with CodeIgniter is simple. In fact, using most Ajax frameworks with CodeIgniter is easy. I created a simple JQuery plugin that displays randomly selected images (imBannerRotater).
First I use CodeIgniter’s ‘base_url’ function to link the necessary Javascript files in a main view of my application:
<script type="text/javascript" src="js/jquery/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery/jquery.imBannerRotater-0.5.js"></script> |
Next, I define a Javascript variable to be used with by the plugin:
<script type="text/javascript"> //<![CDATA[ base_url = '<?= base_url();?>'; //]]> </script> |
I then use this variable in my JQuery Plugin:
$(document).ready(function(){
$(".randPic").imBannerRotater({
data_url: base_url + 'assets/sidebar/sidebar.php',
base_path: base_url + 'assets/sidebar/'
});
}); |
That’s about it. While this is a simple example, using CodeIgniter’s base_url function is the key to using JQuery or any other Ajax Framework.
Not long after I begin learning a new Javascript Framework, I find a need to create a plugin (or widget). I have created quite a few JQuery plugins (see previous posts) and have recently created a my 4th Dojo Widget (I have also created a few YUI widgets). I recently began working on a JQuery photogallery plugin (I know, why re-create the wheel). I actually created this photogallery quite a few years ago, but not as a JQuery Plugin, but as a Javascript object (class). I am now converting it into a JQuery plugin.
While working on a different project (that uses Dojo), I also had to create a photogallery. While I enjoyed the benefits of using both JQuery and Dojo to re-create the photogallery, I have to say that the ability to create a template (Dojo Widgets) can significanly decrease the time it takes to create a plugin or widget.
When I initially read about Dojo widget templates, I didn’t really understand the need. My perception was that if a developer was fairly proficient with creating and manipulating DOM elements, then what is the need for a template? Well, creating this plugin using both JQuery and Dojo gave me a more favorable perception of using templates – a tremendous advantage.
Although the requirements for the JQuery photogallery plugin was a bit more complex (and although I still find it easier in general to develop using JQuery), I have to say that having the ability to create a template gives Dojo a real advantage over JQuery when creating widgets or plugins. Advantage: Dojo.
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).
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.
