Category Archives: plugins

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins
May18

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

Continue reading →

Share

jQuery Plugin: gpImageRotate – Create Portfolios, Carousels, Galleries, and more

Ajax, JQuery, plugins
Oct14

A few years ago, I created the jQuery plugin imBannerRotater. I have tweaked this plugin for various projects over the years, but I recently made so many changes to the plugin that I decided to create a new plugin: gpImageRotate. The code in the new plugin is more optimized than the original. And, not only did I enhance the existing functionality, I added 4-5 additional image rotation options. Lastly, one of the major reasons that I decided to create a new plugin is that I am working on a Drupal module based upon the plugin and so I changed the code so that the Drupal module could easily interact with it – so the naming convention for many of the styles is more verbose than the original imBannerRotater plugin.

Continue reading →

Share

jQuery Plugin: imMultiLineList – A Multi-Line ListBox plugin.

Ajax, JQuery, plugins
Dec29

I have been working on a project where I needed a ListBox that displays multiple lines of information per row. The user must select from a list of offices, but many of the office names are the same and the only way to distinguish one office from the other is by the office address. Because a ListBox does not allow multiple lines in each row, I decided to create the imMultiLineList jQuery plugin. This plugin will turn any div into a multi-line multi-select list. And because I need to interact with the plugin, I decided to create it using an Object Oriented approach.

The imMultiLIneList plugin is fairly simple to use. Multiple items can be added to the list ajaxally using a JSON object, but the plugin will also allow single items to be manually added.

Continue reading →

Share

JQuery Plugin: imGoogleMaps-0.9.2, Custom Marker Icons

Ajax, API's, Google Maps, JQuery, plugins
Jan05

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.

Continue reading →

Share

A JQuery Progress Bar Plugin

Ajax, JQuery, plugins
Jan04

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.

Continue reading →

Share

JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View

Ajax, Google Maps, JQuery, plugins
Dec24

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.

Continue reading →

Share

JQuery Plugin: imBookFlip. Page Turning without Flash

Ajax, plugins
Oct26

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.

Continue reading →

Share

JQuery Plugin: imBannerRotater

Ajax, plugins
Oct26

Note: The imBannerRotater has been replaced with gpImageRotate.
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’).

Continue reading →

Share

Using JQuery with CodeIgniter

Ajax, Codeigniter, JQuery, plugins
Jul06

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:

?View Code HTML
<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:

?View Code HTML
<script type="text/javascript">
//<![CDATA[
base_url = '<?= base_url();?>';
//]]>
</script>

I then use this variable in my JQuery Plugin:

?View Code JASVASCRIPT
$(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.

Share