Trent Richardson » CSS

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.

Impromptu 4.0 is More Eventful

trent — Mon, 05 Mar 2012 11:41:44 +0000

The avid Impromptu enthusiast will be much pleased with the advancement of using events. Not only does 4.0 bring more events, it also brings better events. First and foremost I must point out there is a change to the state’s submit parameters. The first parameter is now an jQuery.Event, followed by the original 3 parameters from older versions. For backwards compatibility you can find on Github a tag for 3.3.3 which was committed with the new events, but with backwards compatibility of keeping the original parameters for the classic style of passing the submit option during the $.prompt call.

Ok, so why the change?

So far with Impromptu you had to return true/false inside the submit callback to tell Impromptu whether or not to close the prompt. You can still do this, however the more appropriate way is to use the first parameter to call event.preventDefault() to prevent the prompt from closing. Think of it as how you would treat an anchor tag’s click event.
You can call event.stopPropagation() to prevent event bubbling.
You can now bind as many events as you like, though only one may be passed in the $.prompt() options.
More events available through the same interface.

In addition to the change of how events work, there were additional events. Here are all available events:

promptloaded: called when the prompt has been displayed. Parameters (event)
promptsubmit: called on button click. Parameters (event, value, message, formVals)
promptclose: same as callback option. Called when prompt has closed. Parameters (event[, value, message, formVals]). Optional parameters are only available when a button was clicked.
promptstatechanging: called before state change. return false or event.preventDefault() stops the state change. Parameters (event, fromStateName, toStateName)
promptstatechanged: called after the state change is complete. Parameters (event, stateName)

Now you want to see what the difference is. Lets look at a quick example. I must mention you can still call $.prompt just like before, but just consider these changes “Extras”.


var jqi = $.prompt('Hello World!');

jqi.bind('promptsubmit', function(event, val, msg, fields){
    // To hold the prompt open you can either:
    // event.preventDefault()
    // or
    // return false;
});

Pretty straight forward. Again you can still use the submit, loaded, and callback options just like before with the exception of adding the event parameter first. Feel free to share your opinions!

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!

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!

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

Updated Lint for Clientside

trent — Fri, 23 Sep 2011 11:04:53 +0000

For those fans of Gedit and Clientside plugin it is time for you to update! The plugin now has updated versions of CSSLint, JSLint, and JSBeautify.

As you may know Clientside Plugin provides several utilities to Gedit for working with CSS and Javascript, including minifying, formatting, and error checking/lint. Also as a bonus it can batch minify multiple css or javascript files. Where it really comes in handy is formatting old code from yesteryear, when the developer had no coding style at all.