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

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

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

Ok, as you could tell the first step is to open up Synaptic (or just use apt-get) and install “gimp-resynthesizer”. This will add a few “Smart” commands under the Filter->Enhance menu. Now our tools are in place, lets get rolling.

1. First choose the Select by Color Tool, and set your threshold to about 60 (that worked great for me, you may have to tweak the threshold depending on your image)
2. Click on your timestamp to select it, if your threshold is set properly your entire timestamp should be selected with one click.
3. Under the Select menu choose Grow. Depending on the size of your image, and if your timestamp has a slight glow/shadow/feathering/fade you may need to tweak the grow by variable to make sure the selection covers it all.
4. Now under Filter->Enhance menu choose Smart Remove Selection. The variable option I used was 100px. This determines how much of the image surrounding the selection will be used to determine the pattern to replace it with.

Thats it, pretty easy? I think this approach works pretty darn well, plus you got to learn a new tool which will work for much more than a removing a timestamp. Also if you’re not an Ubuntu user the link above for the plugin provides a manual download instead of using Synaptic.

Related posts:

1. New Gimp Out!

Timepicker Documentation and Download

Related posts:

1. Timepicker Addon 0.2
2. Finally, Updated Timepicker – Localization
3. Timepicker Addon for jQuery UI Datepicker

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

Lets start with our html. For this table example we may be using a few tags you aren’t very familiar with: thead, tbody, col. Here is a snippet of our html to create the table (I’ve cut out a bunch of the table rows just to shorten it up.

<table cellpadding="0" cellspacing="0" class="stripeTable">
	<col class="col0">
	<col class="col1">
	<col class="col0">
	<col class="col1">
	<col class="col0">
	<thead>
		<tr>
			<th>Year</th>
			<th>Qtr 1</th>
			<th>Qtr 2</th>
			<th>Qtr 3</th>
			<th>Qtr 4</th>
		</tr>
	</thead>
	<tbody>
		<tr class="bg0">
			<td>1990</td>
			<td>987</td>
			<td>456</td>
			<td>159</td>
			<td>159</td>
		</tr>
		<tr class="bg1">
			<td>1991</td>
			<td>1234</td>
			<td>2345</td>
			<td>346</td>
			<td>457</td>
		</tr>
	</tbody>
</table>

You see there is a corresponding column with each column in the row. These span vertically the height of the table, underneath each table row and cell. We can assign styles to these but the only problem is we can’t see the styles because the coloring of tr and td overlays them. The solution? Use rgba for background colors of your tr. Here would be our css for our table rows:

.stripeTable tbody tr.bg0{  background-color: rgba(244,244,244, .7); }
.stripeTable tbody tr.bg1{ background-color: rgba(255,255,255, .7); }

That should give us some alternating row colors. If you’re not familiar with rgba, it resembles rgb, except one more parameter for opacity. Now lets style our columns:

.stripeTable .col0{ background-color: #cfcfcf; }
.stripeTable .col1{ background-color: #ffffff; }

We use a solid color for columns to be sure they are strong and show through. Now, this should pretty well work for the most part, but don’t we all like to highlight rows of a table as we hover over them? Lets do that with the help of some pseudo class selectors:

.stripeTable tbody tr.bg0:hover{ background-color: rgba(255, 191, 85, .7); }
.stripeTable tbody tr.bg1:hover{ background-color: rgba(255, 191, 85, .7); }

And now the final part, just for fun, lets highlight our first column, because it could have some important data in it. We’ll do this with the first-child pseudo selector:

.stripeTable col:first-child{ background-color: #FfBf55; }

This all works pretty well with our browsers that support CSS3 fairly well, Chrome, Firefox, but IE as always has a hard time with it.

View the Demo

Related posts:

1. Execute Excel-like Formulas on your Tables and Grids
2. Use CSS3 to Spice Up Impromptu Buttons
3. Variable Columns with CSS

As if there aren’t enough web galleries out there I’m adding one more, FetchIdeas.com. This is a site which I have created over the past couple months, with a different approach than other galleries. My aim is to create better organization, publish only useful resources, and most of all provide a great place to Fetch Ideas!

I’ve categorized everything in design, graphics and fonts, clientside (css, javascript, etc..), and serverside (php, python, mysql, etc..). The categorization alone seems a bit different than most sites. The site is now stable but I have many plans for it in the coming months, so don’t be shy if you notice something wrong, want to suggest something, or anything else. Do you have any resources to suggest?

Also don’t for get, you can follow FetchIdeas.com on Twitter!

Related posts:

1. Update on Everything
2. CSS Bubble Tooltips

1. Yet Another Related Posts Plugin
2. wp-cache
3. Sociable
4. Bird Feeder
5. All in One SEO Pack
6. Google XML Sitemaps
7. Resorted to a more CSS based design with fewer images to load
8. And a change of servers, so hopefully the site will load a bit faster

Most of these are simply plugins, so they are dirt simple changes. Google Sitemap Generator took a little thought in tweaking its configuration, and same goes with the others as well so they fit my needs. I also am trying to keep the site clean looking, and not become cluttered, which forces me to be careful selecting plugins which may harm the visual aspect of the site. I’ve also considered a translation plugin. Does anyone have any experience or suggestions on these? Or whether or not it would help? Hope these tips help you as well as it did me!

No related posts.

Related posts:

1. How I’ve Nearly Doubled Website Traffic