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

jQuery Impromptu Download and Docuentation

Related posts:

1. Impromptu 3.2 – Mobile jQuery Prompts
2. Impromptu 3.1 is Here
3. jQuery Impromptu Now on Github

jQuery Impromptu has seen a little attention lately, mostly dealing with some mobile improvements. While it did work before on most decent devices, iPad and company politely decided not to enable the position:fixed css property. Of course the reasoning behind this is logical. If a large element is “position: fixed” on a mobile window, the page can potentially become inaccessible. This was a previous issue with Impromptu anyway.

So the new solution is not to use fixed positioning, but to initialize the prompt at your preferred location in the window’s current viewing area. If you scroll the prompt stays put. If you click on the fade the window scrolls back to the prompt.

This means a few items were added to the list of changes:

• New default show option: promptDropIn slides the prompt down from the top of the window viewing area
• Prompt is no longer fixed position
• Faded overlay click scrolls the window back to the prompts location
• Fade now blocks the entire page, not just the viewing area

There are now many plugins doing dialog and lightboxes, but Impromptu still sits atop the mountain of interactive form dialogs. Check it out, leave some feedback, fork it on Github! Enjoy!

Related posts:

1. Impromptu 3.2 Gets Quick Update
2. Impromptu 3.1 is Here
3. Looking for Impromptu Advice

Well for obvious reasons the way to interact with a dropdown are relatively limited. Key events will need to be allowed for native browser functionality. A click event will need to open the dropdown. Double click just doesn’t seem to fire correctly (I guess since the first click opens the dropdown). And surely not use the focus event to open a search. Well jQuery comes with one nice little event named “contextmenu”. Essentially its a right click or ctrl click. And I got to thinking, you know, that would be a perfect place for such. To me a right click indicates “I need some extra help on this item”. So thats where we are. We will be opening a slick search prompt on right click. Lets see it:

function showDropdownSearch(e){
	var $t = $(this),
		$o = $('option:enabled',$t),
		tval = $t.val(),
		html = '<div id="optionsearch">'+
				'<h3>Search Options</h3>'+
				'<div class="textinput"><label for="">Search <span>type your search term and press Enter</span><span id="optionsearchstatus">Searching, please wait..</span></label><input type="search" id="searchquery" name="searchquery" value="" placeholder="Search.."></div>'+
				'<div id="searchoptionswrapper"><table id="searchoptions" class="radioTable" cellpadding="0" cellspacing="0"><tbody></tbody></table></div>'+
			'</div>';

	e.preventDefault();

	var $imp = $.prompt(html, {
			buttons: { Ok:true,Cancel:false },
			submit: function(v,m,f){
				if(v){
					$t.val(f.searchanswer).change();
				}
			}
		});

	var $so = $('#searchoptions', $imp);

	$so.delegate('input', 'click', function(){
		$('tr.checked', $so).removeClass('checked');
		$(this).parent().parent().addClass('checked');
	});

	$('#searchquery', $imp).focus().keydown(function(event){
		var $i = $(this),
			query = $i.val(),
			re = new RegExp(query,"i"),
			html = "",
			counter = 0,
			$sos = $('#optionsearchstatus',$imp);

		if(event.which == 13 || event.keyCode == 13 && $.trim(query) !== ''){

			$sos.css('display','inline');

			$o.each(function(i,obj){
				var $currt = $(this),
					currval = $currt.attr('value'),
					currtxt = $currt.text(),
					currterm = currval + currtxt;

				if(re.test(currterm) && currtxt !== '' && currval !== ''){
					html += '<tr class="row'+ (counter++ % 2) + (currval == tval? ' checked':'')+'">'+
							'<td class="td-radio"><input type="radio" name="searchanswer" id="searchanswer_'+ counter +'" value="'+ currval +'"'+ (currval == tval? ' checked':'') +'></td>'+
							'<td class="td-label"><label for="searchanswer_'+ counter +'">'+ currtxt +'</label></td>'+
						'</tr>';
				}

			});

			$so.find('tbody').html(html);
			$so.find('tr:eq(0)').addClass('checked').find('input').attr('checked',true);

			$('#searchoptionswrapper',$imp).slideDown('slow', function(){
				$sos.hide();
			});

			event.preventDefault();
			return false;
		}// end if enter key

	});

	return false;
}

Thats the function. Now here is how you fire the contextmenu event on a select with jQuery:

// by direct event
$('select').bind('contextmenu', showDropdownSearch);

// or by delegation
$('#select_container').delegate('select','contextmenu',showDropdownSearch);

Lets see the demo of it in action.

Now of course there is some extra css to go with it. I will let you view the source on the demo page and grab it from there. It just seems like too much bloat for a blog post. So there you have a nice, hidden, discreet option search for your dropdowns. This could also be wrapped up nicely in a jquery wrapper to be more jQuery-like, but I’ll leave that for another post. Enjoy!

Related posts:

1. Filter Select Dropdowns as You Type
2. Impromptu 3.1 is Here
3. Updated jQuery Impromptu Loan Calculator

Its been a while in the making, I’ve finally gotten Impromptu into Github, something I should have done a long time back. I’m excited to see how it evolves now, as it has been at a very stable 3.1 for a while. Also I created a themes folder with alternate themes (cough cough.. if you have some you like to contribute, those go in this folder…). Dive in and take a look, fork it, send over some pulls! The documentation is still at the same place:

• Impromptu Documentation
• Impromptu on Github

Related posts:

1. Impromptu 3.2 – Mobile jQuery Prompts
2. Impromptu 3.2 Gets Quick Update
3. Timepicker Localizations on Github

I guess I should have been a designer?.. I won’t quit my day job…

Related posts:

1. Mootools vs. jQuery: Speed, Smoothness, Friendliest
2. Moopromptu works with Mootools 1.3
3. JSTween: Javascript Tweening

Here goes the rebirth of the code:

function openLoanCalculatorPrompt(o){
	o = jQuery.extend({},{ amount:100000, down: 1500, years:15, rate:5 },o);

	var formstr = '<p>Calculate monthly payments:</p>'+
		'<div class="field"><label for="intamount">Amount</label><input type="text" name="intamount" id="intamount" value="'+ o.amount +'" /></div>'+
		'<div class="field"><label for="intdown">Down Payment</label><input type="text" name="intdown" id="intdown" value="'+ o.down +'" /></div>'+
		'<div class="field"><label for="intyears">Years</label><input type="text" name="intyears" id="intyears" value="'+ o.years +'" /></div>'+
		'<div class="field"><label for="intrate">Rate</label><input type="text" name="intrate" id="intrate" value="'+ o.rate +'" /></div>';

	jqistates = {
		state0: {
			html: formstr,
			focus: 1,
			buttons: { Cancel: false, Calculate: true },
			submit: function(v, m, f){
				var e = "";
				m.find('.errorBlock').hide('fast',function(){ jQuery(this).remove(); });

				if (v) {

					if(isNaN(f.intamount))
						e += "Please enter a numeric amount (No commas)<br />";

					if(isNaN(f.intdown))
						e += "Please enter a numeric down payment (No commas)<br />";

					if(isNaN(f.intyears))
						e += "Please enter a numeric number of years<br />";

					if(isNaN(f.intrate))
						e += "Please enter a numeric interest rate<br />";

					if (e == "") {

						var interest = f.intrate/100;
						var years = f.intyears;
						var amount = f.intamount-f.intdown;
						var n = years * 12;

						if(f.intrate == 0){
							var m = amount / n;
						}
						else{
							var i = interest / 12;
							var i_to_n = Math.pow((i + 1), n);

							var p = amount * ((i * i_to_n) / (i_to_n - 1));
							var m = Math.round(p * 100) / 100;
						}

						jQuery.prompt.getStateContent('state1').find('#intmonthlypayment').text(m);
						jQuery.prompt.goToState('state1');

					}
					else{
						jQuery('<div class="errorBlock" style="display: none;">'+ e +'</div>').prependTo(m).show('slow');
					}
					return false;
				}
				else return true;
			}
		},
		state1: {
			html: 'Monthly Payment: $<span id="intmonthlypayment"></span>',
			focus: 1,
			buttons: { Back: false, Done: true },
			submit: function(v,m,f){
				if(v)
					return true;

				jQuery.prompt.goToState('state0');
				return false;
			}
		}
	};

	$.prompt(jqistates);
}

And to run this beast is pretty easy, even if you’re not that familiar with javascript, it is a single simple javascript function call:

openLoanCalculatorPrompt({amount:150000, down:1000, years:30, rate:5.25});

There was previously a video of it in action, which is out of date but it does show how it works:

Thats it, hope you enjoy!

Related posts:

1. jQuery Loan Calculator – Impromptu Style
2. Impromptu 3.2 – Mobile jQuery Prompts
3. Filter Select Dropdowns – Approach 2

My thoughts on the new release is one of hope. I hope all the changes have been made as far as depreciating methods from here on. Its difficult to maintain code with methods becoming obsolete. That being said I like their decisions to drop the $extend type functions and move to a more object based convention. Anyway, here are some links:

• Moopromptu on Forge
• Moopromptu/Impromptu Documentation

Related posts:

1. Moopromptu – A Mootools Version of Impromptu
2. Mootools vs. jQuery: Speed, Smoothness, Friendliest
3. A Few New Colors, and Some Moo

The journey was very educational. I found that I like and dislike some things about Mootools, but overall it was an enjoyable experience. I’ll write up another post on my likes and dislikes, this post is about the Mootools version of Impromptu. So yep, there is now a Moopromptu! I’ve converted all the methods of the jQuery versions, and to my knowledge the only option which is irrelevant is the “show” option, simply because with Core there aren’t any such functions. So to call this beast we have $prompt instead of $.prompt, and we must call .show(msg, options) to open the prompt. (because I decided give it as much of the Mootools feel as possible)

$prompt.show('hello world!', {
	buttons: { Ok: true, Cancel: false }
});

If you need to create a new instance of Impromptu it would look like the following:

var myPrompt = new Impromptu();
myPrompt.show('hello world!');

And to access all the properties you would call them just like with the jQuery version:

$prompt.goToState('myStateName');
$prompt.close();
// etc...

Really the only difference is $.prompt converts to $prompt, and to show it you call $prompt.show(). Moopromptu only requires Core, so there are no real requirements. This is the first version, and my first Mootools plugin, so if any Mootools gurus out there notice I’ve not done something the Mootools way, let me know, or if you find a bug let me know, or if you just want to let me know how awesome Impromptu is (and I know it is) let me know :) Enjoy!!

Impromptu Downloads and Documentation

Related posts:

1. Moopromptu works with Mootools 1.3
2. Impromptu 3.2 – Mobile jQuery Prompts
3. jQuery Impromptu – Final Call for Version 1.0

I thought I would share with you quickly how you can use CSS3 selectors to spice up your Impromptu buttons. Lets say you have a prompt with a Delete button. Delete normally indicates caution/danger/warning which is usually represented by a red color. We can let our CSS do the dirty work and have it find any buttons inside Impromptu which has an id ending with “Delete”. Here is how you would do such:

.jqi button[id $='Delete']{ background-color: #aa0000; }

And now you have a pretty red button like so:

Thats all there is to it. Be sure to check back first of the week for a super post! Enjoy!

Related posts:

1. Coloring Columns and Rows on Tables with CSS3 and RGBA
2. New jQuery Impromptu Theme
3. jQuery Impromptu Now on Github