idTabs Updated for jQuery

Sean Catchpole recently updated his idTabs plugin. I wrote about version 1 some time ago, but haven’t really looked at it since. Come to think of it, I should have subscribed to his RSS feed…done.

As jQuery.UI is still in beta and the tabs demo is broken, I didn’t want to jump into that yet (Rick has), just for a simple tab interface. Klaus has depreciated his tab plugin too in favor of jQuery.UI. The idTabs plugin made it too easy to plugin to my unordered list and it just works without lots of extraneous code.

Thanks Sean!

jQuery Example: Ajax activity indicator

Rick Strahl has been doing some great posts about jQuery on his blog. Yesterday he posted about an excellent resource, ajaxload.info, for creating ajax activity indicators. The second jQuery example that I’d like to share concerns how to display those images on each ajax call. Here is the relevant jQuery code:

The first two jQuery snippets are placed in the $(document).ready function. The HTML body has a div appended to it that will hold the loading image. We then set the CSS properties of that div to hide the image and define the placement.

The last snippet is outside of the $(document).ready function and serves to bind the visibility of the ajaxStart and ajaxStop jQuery events.

Now, everytime an ajax call is placed back to the server, a animated gif image will display in the upper right hand corner of the page to indicate background ajax activity. When the request is finished, the image will hide itself again.

See the demo and view the source to learn more. In this demo, your message is POSTed via ajax to the server which sleeps for 3 seconds then outputs your message into a message box. Make sure to peak at the upper right side of the page to see the activity indicator.

Thanks go out to jQuery for their awesome framework and Mike Alsup, the jQuery Form plugin author, for such a great plugin

jQuery Example: Zebra Tables (Striping)

I’m working on putting some of my most often used jQuery snippets onto SKFox.com. Here is my first such attempt. Table striping makes data easier to read and jQuery has some great selectors for this.

Be sure to check out the table striping demo page and view the source to see the small amount of CSS and javascript it takes to make your tables pop for your users.

UPDATE: jQuery 1.4 offers us a new way to stripe tables.

Learning jQuery

Learning jQuery

Introduction

As a longtime jQuery user I was excited to take some time to read and review two new jQuery books. Packt Publishing provided me free copies of Learning jQuery and the jQuery Reference Guide. I spent most of October reading through them and making the most of my first book review experience. In short, these are both excellent books and getting them together will benefit a developer of any skill level. This review will focus on the books, but is equally a review of the jQuery javascript framework.

Continue reading

Distractionless browsing becoming a reality

Single Page Applications
…or ‘the web as an application’.
Creating a distractionless environment is getting harder with the latest browsers. When creating or browsing normal web pages, I would hate it if a site stripped my browser. In certain circumstances, like internal web based applications, I’m finding it more and more necessary. Keep reading to learn how I do it now and what I see for the future… Continue reading