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

Ajax, JQuery, plugins

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

Checkout My New Site - T-shirts For Geeks

jQuery: Dynamic Form Creation/Submission – IE8 Bug

Ajax, JQuery

I noticed a problem with IE8 today. I dynamically created a form and submitted it with jQuery. The form did not submit in IE8, but worked in all the other browsers that were tested (Firefox, Chrome, Safari). The code is quite simple:

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var id = jQuery('#product_id').val();
	jQuery('#content').append(
		jQuery('<form></form').attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
			jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	));
});

Again, this worked fine in other browsers. Upon further inspection, I found that the IE8 seemed to strip the quotes from around the form attributes:

<form name=frmReturnToProductPages id=frmReturnToProductPages action=/provisioning/product-pages />

To fix the problem, I decided to add the form attributes after appending the form to the page.

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var frm = jQuery('<form></form>').appendTo(jQuery('#content'));
	jQuery(frm).attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
		jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	).submit();
});

I tested this with the IE8 developer tools and the form submitted successfully. Enjoy.

Checkout My New Site - T-shirts For Geeks

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

Ajax, JQuery, plugins

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

Checkout My New Site - T-shirts For Geeks

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Continue reading

Checkout My New Site - T-shirts For Geeks

ActionScript: Using Lightbox With Flash

Actionscript, Flash, JQuery

I’m working on a portfolio site where I’m using Flash to display my work. When a user clicks on a link for a website that I designed, they will be taken to the actual website. But when the user clicks on the link for book cover or magazine, I want the large image to be displayed using lightbox (A JQuery Plugin). The primary reason is that I want to use lightbox is because the Flash movie has a height of 225 pixels – not nearly enough to display a large image. Surprisingly, with the help of ActionScript’s ExternalInterface Class and JQuery, creating this functionality was easier than I thought.

Continue reading

Checkout My New Site - T-shirts For Geeks

Drupal, JQuery: Dropdown Menus

Ajax, Drupal, JQuery

I needed to add Dropdown menus to a site that a designed using Drupal. I found a few modules (Nice Menus, etc) that would enable me to easily add dropdown menus to my site, but I wanted to use the CSS Drop-Down Menu Framework that I discussed in a previous post. With a little help from JQuery, I was able to add dropdown menus to my site without having to use a Drupal module.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery 1.4, YUI: JSON ParseError – Quotes Required

Ajax, JQuery, YUI

Someone just sent me a message asking me to update my imBannerRotater plugin because they were receiving a parseerrormessage with JQuery 1.4.

I tested the plugin with JQuery 1.4 and I too received the parseerror message. I knew immediately that the problem was with the Json record that was returned via an ajax request. Looking at the json record, I noticed that quotes were placed around the value, but not the name/key, so I added the quotes:

?View Code JAVASCRIPT
// originally
{name: "joneil.jpg", url: "http://www.imdb.com/character/ch0005968/"}
 
// changed to
{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/"}

I tested and no longer received the parseerror message.

The reason I knew that the error was due to the json record is because I ran into a similar problem with YUI last week. I received a parse error with a json record because I used single quotes rather than double quotes. I thought it was odd (and I was a bit displeased).

Knowing about the problem with YUI and single quotes, I tested json object above using single quotes:

?View Code JAVASCRIPT
{'name': 'joneil.jpg', 'url': 'http://www.imdb.com/character/ch0005968/'}

I again received the parseerror message. So you must use double quotes. I went back and read the Json specs. It mentioned placing double quotes around the value, but did not mention anything about placing quotes (double or otherwise) around the the name/key. But YUI and JQuery 1.4 both require it so it must be required.

Checkout My New Site - T-shirts For Geeks

Javascript: Inversely Proportional

Javascript, JQuery

I’m working on a project that uses the JScrollPane JQuery Plugin to scroll a number of records. My client wanted the scroll bar to have a variable height (like most modern scroll bars). The height of the scroll bar should be determined by the number of records – the height should decrease as the number of records increase. So the scroll bar height is inversely proportional to the number of records.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imGoogleMaps-0.9.2, Custom Marker Icons

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

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

Checkout My New Site - T-shirts For Geeks