I'm doing a little work on cleaning up an application and came acrossed an undesirable circumstance related to the UI. The app contains what appears to be a tab navigator, but rather then the tabbed links revealing hidden form elements in another tab they take the user to a whole new page. The obvious problem with this design is that the user may populate elements in the first 'pseudo-tab' and click on the next tab assuming that they will be able to save the data after populating the other tab. Since I'm not at liberty to make massive changes to the UI I came up with the following solution using jQuery so the user is at least warned when they leave without saving their changes. I think it's a workable solution, and better yet it was terribly easy to do.

js-hotkeys is an awesome jQuery plugin that lets you bind a function to just about any key combination you can think of. It can really come in handy to create custom keyboard shortcuts for your application.

Here's another very helpful jQuery plugin that I found recently. The jQuery fieldSelection plugin gives you a simple API to retrieve and replace the currently selected text in an input or textarea.

I just found a handy cheat sheet for doing pretty much anything you need to do with <select> elements in jQuery. This is especially handy for me because for some reason select's are the one element that trip me up the most when working with jQuery.

You can find the cheat sheat here.

There is also a CSS cheat sheet available at the page where I found the select cheat sheet.

Feel free to link to any other jQuery cheat sheets you find useful in the comments.

I just came across a handy little function that emulates ColdFusion's HTMLEditFormat() function. It's quite simple really, but it worked perfectly since I wanted to display some HTML as text (instead of rendering it). Here it is should you ever finding yourself with a need to do the same:

Note: to use the function remove the space after each & - I had to put that in to prevent my blog from rendering them.

I should point also point out that Chris Jordan has a complete package of JavaScript functions that emulate ColdFusion built in functions on RIAForge called CFJS. The package is built to work with jQuery (FTW). I haven't tried it out yet, but from what I hear it comes in handy.

I'm happy to announce that the new and improved SlideSix is now live. This new look and feel is a complete overhaul compared to the original design of the site. The new design uses a lot of gray, blue and black in order to make the site more closely resemble the Flex pieces that were already in place. There are also a lot of rounded corners to take the edge off of the deep colors so they hopefully don't overwhelm. Thanks to some feedback there is also a shiny new logo. Here's the new home page:

More after the jump:

I quietly added a new feature to SlideSix earlier this week which now extracts the text contents of each slide and displays that text as a transcript on the view page of a presentation. The reason behind this enhancement is to dramatically increase the search engine visibility of your presentations since search engines will be basically indexing the content of each of your slides.

SlideSix is slowly gaining traction and some changes were pushed last Friday that should help in getting the site some more market share in the vast online presentation sharing community.

Last night I pushed a small change to SlideSix.com. This change was the simple addition of yet more jQuery in the form of the UI Uploader. I wanted a way to provide some feedback when uploading files (via a progress bar) and just improve the presentation upload experience a bit. Here is a screenshot of the new upload utility:

I had a request via IM for a more complete example of doing validation within a form submission. I threw together a quick example here to better explain my thought process. Please remember I'm new to jQuery so what I'm doing might not be an example of best practices. Feel free to suggest an alternative.

So essentially I need to capture the submit event of my form. In this case I'm assuming a single form so I simply refer to the tag name in my selector, but I'm sure you could just as easily refer to an id. Here is a simple wrapper to capture the form submission: