Trent Richardson » Javascript

Using Impress.js for a Car Bounce Video

trent — Wed, 25 Jan 2012 11:43:16 +0000

I was pretty amazed when I first saw Impress.js. It’s ability to take a very simple html page and use transformations to create a presentation phenomenal. This plays right in to the hands of developers who want to create something snazzy, but do not have the video experience to do so. It is also probably worth noting that it has likely been done before, but this is the first I’ve seen (I didn’t do much research on it, I was happy with what I saw).

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:



    This is a test

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:



    This is a test

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

Car Bounce – Keep Up with Your Car’s Value

Make jQueryUI and Timepicker More Beautiful

trent — Mon, 23 Jan 2012 11:24:28 +0000

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!

UberUploadCropper V2 – Upload, Crop, No Flash

trent — Tue, 20 Dec 2011 11:51:19 +0000

Finally, UberUploadCropper gets a much needed update. First off, flash is gone. Now you can upload and crop with just javascript and your serverside language of choice. What is UberUploadCropper? It is a jQuery plugin which pulls together jCrop, Impromptu, and FileUploader plugins into one uniform unit to upload and crop images.

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

Clientside Plugin Available for Gedit 3

trent — Thu, 15 Dec 2011 11:34:57 +0000

The Gedit Clientside plugin is now available for Gedit 3. All the features remained the same, just some minor tweaks throughout. You can still find both Gedit versions of the plugin on Github:

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!

jQuery Timepicker Addon 0.9.8 Available

trent — Wed, 07 Dec 2011 11:18:24 +0000

A new jQueryUI Timepicker Addon is now available. With this release comes many additions, including support for touch/mobile devices through integration with the sliderAccess plugin. Here is an overview list of the updates:

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!

Add UI-Slider Accessibility to Timepicker

trent — Mon, 05 Dec 2011 11:18:10 +0000

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:

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!

Discussion – How Asynchronous Should We Get

trent — Fri, 02 Dec 2011 11:06:51 +0000

I recently read an article about turning the “asynchronous-ness” up a notch. His reasoning was very good, response times keep users on the site longer. Lets go in to more detail.

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?

jQuery UI Sliders and Touch Accessibility

trent — Fri, 11 Nov 2011 11:32:40 +0000

jQuery UI is now a main stream user interface toolkit. It works most everywhere, but touch devices currently struggle with some of it’s widgets, including the Slider. The problem is touch and drag events can get mixed up between the web page and the browser. In other words when does a swipe indicate to scroll the page or slider adjustment. Currently after a couple searches there are a couple attempts to fix this without much effort beyond including a javascript file:

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">' +
 				    	'' +
 				    	'' +
 				    	'');

 				$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

Impromptu 3.2 Gets Quick Update

trent — Fri, 04 Nov 2011 11:20:29 +0000

If you recently downloaded Impromptu 3.2, you may want to grab it again. A small bug was fixed. I didn’t find it worth while to create a new version, it was a line of code. On top of that the bug was merely a visual detail, and not critical. Long story short the overlay always stopped a few pixels short of the bottom of the document. Thanks to the users for catching this! Enjoy!

jQuery Impromptu Download and Docuentation

Creating a DateTime Range with Timepicker

trent — Fri, 21 Oct 2011 11:07:19 +0000

I’ve had a lot of users recently asking how to create a date/time range using the timepicker addon. Currently the jQuery UI documentation has an example using just datepicker, but it won’t quite work the same when using the timepicker. Why? The example from the jQuery UI docs explicitly only sets the date. But never fear, we can just as easily (if not easier) accomplish the same with Timepicker Addon. Lets start with a couple inputs:

Ok, we have two inputs, one for the start datetime, and one for the end datetime. Now to make this work correctly, when start date is updated, we need to set the “minDate” of the end date. And in reverse when end date is updated we need to set the “maxDate” on the start date. Here is how we do this:


$('#startDate').datetimepicker({
	onSelect: function (selectedDateTime){
		var start = $(this).datetimepicker('getDate');
		$('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()) );
	}
});

$('#endDate').datetimepicker({
	onSelect: function (selectedDateTime){
		var end = $(this).datetimepicker('getDate');
		$('#startDate').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
	}
});

Pretty straight forward. You could consolidate it all like on the datepicker example, but I decided to break it out for simplicity. Now lets add one more step, courtesy of Dana in the comments. We need set the opposite input date when either picker closes with a date, so lets do that:


$('#startDate').datetimepicker({
	onClose: function(dateText, inst) {
		var endDateTextBox = $('#endDate');
		if (endDateTextBox.val() != '') {
			var testStartDate = new Date(dateText);
			var testEndDate = new Date(endDateTextBox.val());
			if (testStartDate > testEndDate)
				endDateTextBox.val(dateText);
		}
		else {
			endDateTextBox.val(dateText);
		}
	},
	onSelect: function (selectedDateTime){
		var start = $(this).datetimepicker('getDate');
		$('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()));
	}
});
$('#endDate').datetimepicker({
	onClose: function(dateText, inst) {
		var startDateTextBox = $('#startDate');
		if (startDateTextBox.val() != '') {
			var testStartDate = new Date(startDateTextBox.val());
			var testEndDate = new Date(dateText);
			if (testStartDate > testEndDate)
				startDateTextBox.val(dateText);
		}
		else {
			startDateTextBox.val(dateText);
		}
	},
	onSelect: function (selectedDateTime){
		var end = $(this).datetimepicker('getDate');
		$('#startDate').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
	}
});

I will be adding this example to the documentation as well for reference. Hope you enjoy!