Its process is simple, line up multiple container elements inside a container with id=”impress”, and supply those elements with a variety of data coordinates and scaling attributes, resulting in something like:

<div id="block1" class="step" data-x="1000" data-y="1500" data-rotate="90" data-scale="2">
    <p>This is a test</p>
</div>

Impress will take the coordinates and scale and place them on your canvas. You can also apply 3D effects too using the z for the 3rd dimension and rotate on the x and y axis:

<div class="block2" data-x="1500" data-y="2000" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
    <p>This is a test</p>
</div>

Thats all, just line up these different containers in order and Impress does the rest. Style them up a little and you have a snazzy presentation! I will leave you with simple demo I came up with for CarBounce.com

Related posts:

1. Car Bounce – Keep Up with Your Car’s Value

After some time the standard jQueryUI themes can get stale, boring, monotonous, and you need a fresh look. I’ve rounded up a couple very customized, non-”run of the mill” themes you should take a look at.

Absolution (Github) is a very clean theme with support for Uniform and Wijmo. Uniform, as its name indicates, styles form elements to have a uniform look, across all browsers. Drastically, improving the consistency of appearance. Wijmo is a snazzy widget collection providing both an “Open” (open source) and “Complete” (commercial) set of widgets. The developer has a few example widgets on their site showing off the look on all widgets. Another bonus is that development is handled with LESS, making it super easy to tweak. I will definitely keep this close by for future development!

A second theme worth a look is Aristo (Github), a port of Cappuccino. It has a bit more of an OSX look, but still a very clean, beautiful theme. An example of all widgets are included on the developer’s site.

Just looking over the Absolution I am impressed with how LESS makes this look so more portable and themable than if only the CSS were provided. I definitely need to get up to speed on using LESS and the compiler. Better keep an eye out for integration on an upcoming project ;)

Both of these themes appear to work very well with Timepicker as well as the SliderAccess plugin, and are a nice compliment to most any jQueryUI based project! I’m still on the hunt for more quality custom jQueryUI themes for projects, so if you know of any please post them!

Related posts:

1. New Impromptu Theme!
2. Timepicker 0.8, Bug Fix Galore
3. jQuery Timepicker Addon 0.9.2 Available

PostgreSQL has the ability to return multiple cursors to result sets. Using this we can achieve the same effect with php with a little magic. Lets take a look at a simple function which returns three queries by way of refcursor type. Also not that I said “function”, not “procedure”, but never fear, 6 of one, half dozen of the other as far as this topic goes:

CREATE OR REPLACE FUNCTION test_get_users(userID integer) RETURNS SETOF refcursor AS $$

	DECLARE
		ref1 refcursor;
		ref2 refcursor;
		ref3 refcursor;
	BEGIN

	OPEN ref1 FOR
		SELECT id, name, email FROM users;
	RETURN NEXT ref1;

	OPEN ref2 FOR
		SELECT id FROM users WHERE is_active=1;
	RETURN next ref2;

	OPEN ref3 FOR
		SELECT * FROM users WHERE id = userID;
	RETURN next ref3;

	RETURN;

END;
$$ LANGUAGE plpgsql;

So that is pretty simple, we run 3 select queries, and return the refcursor for those. Now the tricky part will be how to read each of these queries on the php end. The values returned from calling this function will resemble the image presented here. These merely represent references to the cursors to each query run, so we will have to use some pg magic to pull those result sets in. It boils down to we need to make one call to the function, then a separate call per result set to bring in those results (note the query has run at this point, its basically reading in the data, which should be quick). Lets look at the SQL which would achieve this:

BEGIN;
SELECT test_get_users(2);
FETCH ALL IN "<unnamed portal 1>";
FETCH ALL IN "<unnamed portal 2>";
FETCH ALL IN "<unnamed portal 3>";
END;

Now it should make a little more sense what has to happen. We call a fetch for each result set to return. So now we just need to process this with PHP:

$conn = new PDO("pgsql:host=localhost;port=5432;dbname=testing", "username", "password");

$userID = 2;

// begin transaction, this is all one process
$conn->beginTransaction();

	// call the function
	$stmt = $conn->prepare("select test_get_users(:userID)");
	$stmt->bindParam('userID', $userID, PDO::PARAM_INT);
	$stmt->execute();
	$cursors = $stmt->fetchAll();
	$stmt->closeCursor();

	// get each result set
	$results = array();
	foreach($cursors as $k=>$v){
		$stmt = $conn->query('FETCH ALL IN "'. $v[0] .'";');
		$results[$k] = $stmt->fetchAll();
		$stmt->closeCursor();
	}
$conn->commit();
unset($stmt);

echo '<pre>';
print_r($results);echo "\n"; // all record sets
echo '</pre>';

Now first off, we call the select test_get_users(), which returns a list of refcursor names. So with this we know how many queries were returned. Just loop through this list and fetch each result set. It is essentially the same process used from the Sql Server example, except the nextRowset() is not yet implemented for the pdo pgsql extension, so we just manually call the fetch. No Biggie. You would then receive something similar to the following:

Array
(
	[0] => Array
		(
			[0] => Array
				(
					[id] => 2
					[0] => 2
					[name] => John Doe
					[1] => John Doe
					[email] => test2@test.com
					[2] => test2@test.com
				)

			[1] => Array
				(
					[id] => 3
					[0] => 3
					[name] => Jane Doe
					[1] => Jane Doe
					[email] => test3@test.com
					[2] => test3@test.com
				)

			......

		)

	[1] => Array
		(
			[0] => Array
				(
					[id] => 3
					[0] => 3
				)

			[1] => Array
				(
					[id] => 1
					[0] => 1
				)

		)

	[2] => Array
		(
			[0] => Array
				(
					[id] => 2
					[0] => 2
					[name] => John Doe
					[1] => John Doe
					[email] => test2@test.com
					[2] => test2@test.com
					[password] => zxcvxcvczxcv
					[3] => zxcvxcvczxcv
					[is_active] => 0
					[4] => 0
				)

		)

)

If you’re still feeling frisky at this point, there are all sorts of ways to “fetch” the result sets, just take a look at the docs on cursors. The more I use PostgreSQL the more I am becoming a fan. It’s power and features go far beyond my skill set, but it feels good always knowing you have the best tool at hand for whatever task you have ahead of you. As always feel free to chime in and leave any knowledge you may have, especially on Postgres!

Related posts:

1. Making Sense of Stored Procedures with PHP, PDO, and Sqlsrv
2. Thought: Is else return really necessary?
3. CakePHP, PostgreSQL, and Regex

The latest version can be found with all it’s glory on Github, along with 2 examples. The examples provide a very basic, upload and crop routine. The second, a much more advanced example, demonstrates how to handle large images efficiently. Both examples should be fairly easy to merge into your own projects. Here is a video of version 1 of UberUploadCropper in action. I will provide a newer video shortly:

This plugin uses these three fantastic plugins:

• jQuery Impromptu for modal windows.
• Jcrop to crop the images.
• FileUploader to upload the images.

The plugins mostly differ in using ajax upload instead of Uploadify. So all options which use to target Uploadify have been removed and replaced with the corresponding FileUploader options. The examples are commented and should be pretty clear cut. Enjoy!

UberUploadCropper on Github

Related posts:

1. UberUploadCropper 0.2 With Example
2. Javascript: Finding the Focused Element
3. Impromptu 3.2 – Mobile jQuery Prompts

• Clientside Plugin for Gedit 3+
• Clientside Plugin for Gedit 2

I moved the old Gedit 2 version to a separate branch on Github, so both versions of the project are still available.

If you’re unfamiliar with the Clientside plugin you just found a real gem. The plugin bundles together functionality to minify, format, batch minify, and run a lint service on both Javascript and CSS. Hope you enjoy!

Related posts:

1. Gedit Clientside Plugin gets Batch Minify Option
2. Gedit Clientside Plugin
3. Updated Lint for Clientside

• Fix Daylight Savings bug.
• Fix and Add several localizations/translations.
• Fixed getter/setter bug.
• Fixed timepicker update issue with undefined “inst”.
• Updated CSS and generated markup.
• Added integration with sliderAccess for touch devices.

As always feel free to check out timepicker on Github. If you’re upgrading be sure to grab the new CSS, as the markup generated has been changed. Hope you enjoy!

Related posts:

1. jQuery Timepicker Addon 0.9.7 Now Available
2. Add UI-Slider Accessibility to Timepicker
3. Timepicker Addon for jQuery UI Datepicker

You knew it was coming! An example of integrating my jQuery UI Slider Touch Accessibility addon to the jQuery Timepicker Addon. Before getting started I must note that this currently will only work with the latest Timepicker (version 0.9.8+). I had to clean up the markup generated in timepicker to make this easier, as well as other adjustments (Thanks to Dana over on the sliderAccess post).

First, start off with a normal timepicker. This means include all the scripts and initiate (jquery, ui, timepicker, and sliderAccess plugin):

The HTML:

<div id="datepicker"></div>

The JS:

$('#datepicker').datetimepicker({});

Ok, with the newest timepicker addon there are two new options, addSliderAccess (true/false), and sliderAccessArgs (object of sliderAccess options). Now we can attach our accessibility addon for touch devices:

$('#datepicker').datetimepicker({
	addSliderAccess: true,
	sliderAccessArgs: { touchonly: false }
})

These two new options are solely for sliderAccess, and will attach it to any visible slider. I passed in the touchonly option just so its immediately visible to you that it is installed. In production you may want to either set to true or omit passing this option. Then it will only be visible when a touch device is present.

Wow! Thats it! Check with the Slider Accessibility docs for more options. I have also added this example to the timepicker documentation. Enjoy!

Related posts:

1. jQuery Timepicker Addon 0.9.8 Available
2. Timepicker Addon for jQuery UI Datepicker
3. Adding Tooltip to Timepicker Sliders

Ajax requests allow users to stay on the same page, while the site contacts the server in the background. This may be to post some information, or retrieve information, and the polite thing to do these days is to indicate to the user “Yes, we’re processing your request, please wait..”. But the claim here is there is no need to keep the user waiting. It’s pointless and they may as well have done a complete page reload.

Since we can use asynchronous requests the user can continue what they were doing, while the page request runs in the background. This makes the response “feel” faster to the user, even though it may not technically be. Now the problem comes in when the user navigates the browser away from the page before an ajax request has completed, causing data incomplete data, or loss of data. Where is the line drawn where it is “safe” to use this method. To keep all data integrity I would have to say never.

However, I’m not going to say “never”. Fact I believe with a little though we can avoid this almost always. He notes that Google Mail nicely displays a message which is visible, but not in the way of the user moving on to their next task. And although its ugly we could easily add onbeforeunload listeners to warn the user about navigating away from the page, then remove the listener when the request successfully completes.

So my thoughts are, why not?

Related posts:

1. Clientside Discussion
2. Filter Select Dropdowns as You Type

I would like to take a moment to introduce my newest creation, CarBounce.com. Car Bounce is a simple website, which aims to help keep you informed of your position financially with your vehicles. Far too often people go months, even years, without checking on their financial position with their vehicle. Car Bounce brings an end to that! How does it work?

Car Bounce provides a free breakdown of your vehicle with month by month estimates of it’s value, how far ahead/behind you are, and how much it would cost to purchase again at any point in time. On top of that it also provides interactive graphs and tools to help you visualize and decide when may be the best time to trade, pay off, or even hang on to your car.

But Wait, There’s More! In addition to the month by month breakdown and tools, you can also receive a summary email each month, export PDF’s, and Spreadsheets of the breakdown of each vehicle, bringing CarBounce right to your phone or desktop.

You no longer have any reason to forget about the value and financial position of you and your vehicles! Sign Up for free!

Related posts:

1. Using Impress.js for a Car Bounce Video

• Touch Punch
• jQuery.UI.iPad plugin

Essentially these two plugins listen for touch events and pass the event on to jQuery UI so they can be processed. But still these can be cumbersome in my findings. So I’ve come up with a quick solution.

When we use a slider, and touch events are available we know it is a touch device, so we can insert a couple jQuery UI buttons to increment and decrement the sliders.

Adding this ability can be as simple as one more method chained after your slider:

$('#slider').slider().sliderAccess();

On top of that if you want it to always show, even when it’s not a touch enabled device, you can specify that as well:

$('#slider').slider().sliderAccess({ touchonly : false });

Ok, so you this is easy enough to use, lets see the goods:

/*
 * jQuery UI Slider Access
 * By: Trent Richardson [http://trentrichardson.com]
 * Version 0.2
 * Last Modified: 12/12/2011
 *
 * Copyright 2011 Trent Richardson
 * Dual licensed under the MIT and GPL licenses.
 * http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
 * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
 *
 */
 (function ($) {

 	$.fn.extend({
 		sliderAccess: function (options) {
 			options = options || {};
 			options.touchonly = options.touchonly !== undefined ? options.touchonly : true; // by default only show it if touch device

 			if (options.touchonly === true && !("ontouchend" in document))
 				return $(this);

 			return $(this).each(function (i, obj) {
 				var $t = $(this),
 				    o = $.extend({}, {
		 				    	where: 'after',
		 				    	step: $t.slider('option', 'step'),
		 				    	upIcon: 'ui-icon-plus',
		 				    	downIcon: 'ui-icon-minus',
		 				    	text: false,
		 				    	upText: '+',
		 				    	downText: '-',
		 				    	buttonset: true,
		 				    	buttonsetTag: 'span',
		 				    	speed: 150
	 				    }, options),
 				    $buttons = $('<' + o.buttonsetTag + ' class="ui-slider-access">' +
 				    	'<button data-icon="' + o.downIcon + '" data-step="-' + o.step + '">' + o.downText + '</button>' +
 				    	'<button data-icon="' + o.upIcon + '" data-step="' + o.step + '">' + o.upText + '</button>' +
 				    	'</' + o.buttonsetTag + '>');

 				$buttons.children('button').each(function (j, jobj) {
 					var $jt = $(this),
 						timeout = null,
 						increment = function($jt, $t, e) {
						 		var step = $jt.data('step'),
									curr = $t.slider('value'),
									newval = curr += step * 1,
									minval = $t.slider('option', 'min'),
									maxval = $t.slider('option', 'max');
								e.preventDefault();
								if (newval < minval || newval > maxval)
									return;
								$t.slider('value', newval);
								$t.slider("option", "slide").call($t, null, { value: newval });
						 	};

 					$jt.button({
 						text: o.text,
 						icons: { primary: $jt.data('icon') }
 					})
 					.bind('touchstart mousedown', function (e) {
 						increment($jt, $t, e);
 						timeout = setInterval(function () {
 							increment($jt, $t, e);
 						}, o.speed);
 					});

 					$(document).bind('touchend mouseup', function () {
	 						clearInterval(timeout);
	 						return false;
	 					});

 				});

 				// before or after
 				$t[o.where]($buttons);

 				if (o.buttonset) {
 					$buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset();
 					$buttons.eq(0).addClass('ui-corner-left');
 					$buttons.eq(1).addClass('ui-corner-right');
 				}

 				// adjust the width so we don't break the original layout
 				var bOuterWidth = $buttons.css({
 					marginLeft: (o.where == 'after' ? 10 : 0),
 					marginRight: (o.where == 'before' ? 10 : 0)
 				}).outerWidth(true) + 5;
 				var tOuterWidth = $t.outerWidth(true);
 				$t.css('display', 'inline-block').width(tOuterWidth - bOuterWidth);
 			});
 		}
 	});

 })(jQuery);

A quick look at the source and you will notice I also threw in a few options to make things more versital. The options are:

• touchonly – true/false – Show this control Only for touch devices.
• where – before/after – Show this control before or after the slider.
• step – [0-9]+ – How much each button press increments. Defaults to slider step.
• upIcon – one of ui icon names – defaults to “ui-icon-plus”.
• downIcon – one of ui icon names – defaults to “ui-icon-minus”.
• text – true/false – Show text in buttons?
• upText – string – Text of up button, default is “+”.
• downText – string – Text of down button, default is “-”.
• buttonset – true – Wrap the button in a button set?
• buttonsetTag – tagName – element type to wrap the buttons with, default is “span”.
• speed – [0-9]+ – Interval speed on touch-hold or click-hold to increment, default is 150

It should also be noted that for this plugin to work you will need to include the button widget in your jQueryUI build. From there we handle the rest. When a button is clicked the change event will be fired through the slider, however the slide event will not. This plugin makes no attempt to stop the click event on the buttons, so if you need to catch these events since there is not slide event you may do it the natural way.

One final note for this plugin. It is small, I will likely not be making many updates to it. If you need to tweak something feel free, and if you like post your changes here. I may integrate it if I see the need. The downfall and updside is as time passes jQueryUI will likely improve their support, so this plugin will become irrelevant. Enjoy!

Last updated: 2011-12-12

Related posts:

1. Add UI-Slider Accessibility to Timepicker
2. Adding Tooltip to Timepicker Sliders
3. jQuery Timepicker Addon 0.9.8 Available