Trent Richardson » Javascript

jQuery Litelighter – Light Weight Syntax Highlighter

trent — Wed, 02 May 2012 17:05:19 +0000

Need a super light weight syntax highlighter for jQuery? This is it, jQuery Litelighter. It’s extremely small, and very easy to use and extend. It has a fully functional api. It comes with two themes built in, and 4 languages: Javascript, Html, CSS, and Generic C-like syntax for C, C++, PHP, Java, etc. A ColdFusion syntax is also provided in the documentation as an example.

The dark theme is very similar font colors, just a darker background.

You will notice it isn’t a super detailed highlighter, that is the objective. Check it out. fork it on Github. Head over to the Documentation. Get your hands dirty!

No related posts.

jQuery Powertable – Move, Show, Hide, Fix Table Columns

trent — Wed, 25 Apr 2012 17:04:46 +0000

jQuery Powertable is a jQuery plugin to help spice up your tables. Of course there are a lot of table plugins, but this plugin gives you all the power, yet stays out of the way for you to style. Complete with a full api to remotely manage your table, you can manage from within the table, or outside the table.

So what type of features does this so called table plugin have that are so amazing?

Move Columns – Works via drag and drop or api call
Show/Hide Columns – Works from generated handle or api call
Fixed Columns – Sets columns as fixed upon initialization or api call
Rows Columns – Sets rows as fixed upon initialization or api call
Persistant – Use browser storage to remember settings or supply your own

And if that isn’t enough the fact that it eats 1,000 row tables for breakfast should be. The plugin digs down below the jquery level to pure javascript for maximum performance. Finally you should know where and how to get it:

Hope you enjoy!

No related posts.

Finance.js – Financing, Loan, Interest Javascript Library

trent — Mon, 02 Apr 2012 12:28:10 +0000

Accounting.js, meet Finance.js. Thanks to the excellent Car Bounce App, a handy new javascript library is now available. Similar to accounting.js, finance.js tackles other money topics: Financing, Loans, and Interest calculations. So what can Finance.js do?

It may be easiest to describe a simple situation. You financed your car, and you know your monthly payment, how much you financed, and how many months you financed, but you cannot recall your interest rate. There is a method for that. Same with the other 3. So we end up with the following functions:

finance.calculatePayment – calculate the monthly payment
finance.calculateAmount – calculate the amount financed
finance.calculateMonths – calculate the number of months financed
finance.calculateInterest – calculate the interest rate
finance.calculateAmortization – calculate an amortization schedule of each month’s interest and balance.
finance.calculateAccruedInterest – calculate the interest money one would gain in an interest bearing account over X months.

Aside from these finance methods are simple number and currency formatting methods. Provided are USD, GBP, and EUR currency formats and add/remove methods to manage more. Enjoy!

New jQuery Timepicker Addon – 0.9.9

trent — Mon, 13 Feb 2012 11:12:32 +0000

I’m excited to announce another great release of jQuery Timepicker Addon! This release brings many fixes and a new feature or two. First thank you to everyone who provided fixes, translations, and bug reports. While I can’t get to every bug report, I do value and appreciate them. With this new version we bring the following fixes and features:

Fix: Option getter/setter
Improvement: SliderAccess integration
Addition: Added Norwegian translation
Fix: Check for tp_inst in gotoToday method
Fix: Swallowing date parsing errors
Fix: Update Russian translation
Fix: beforeShow now returns a value
Fix: missing semicolons
Fix: time parsing bug (“tt h:mm”)
Fix: trim extra spaces after newly formatted time
Addition: New $.datepicker.formatTime method
Addition: Added Korean Translation
Fix: Typo in Hebrew translation

As always you can check out the timepicker over at the timepicker documentation or get involved over at Timepicker’s Github page. Thanks Aagain!

New Impromptu Tour Feature

trent — Mon, 06 Feb 2012 11:31:20 +0000

This is HOT! You have a new website, which is a bit complex. You’re afraid your users don’t understand where all the features and functionality is located. What do you do? You give them a quick tour of the site!

Impromptu can now position itself per “state”. If you’re unfamiliar with states check out the documentation. A state is similar to a wizard step. It only makes sense that each step be able to position itself in specific locations. The result is a touring like functionality. You can still do all the fun form stuff you did before.

Per state you can now pass in a “position” option, which is a hash with the following properties:

container: a jquery selector of the anchor element.
x: The horizontal offset from the origin from the anchor’s position.
y: The vertical offset from the origin from the anchor’s position.
arrow: where to position the arrow.

Not only tours, but you can also create highly functional tooltips. Impromptu just stepped up to another level from the competition, leading the way for all tooltip, modal, and touring javascript plugins!

I’ve provided a great example in the documentation, and of course a tour of Impromptu itself, so head on over!

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!