I didn’t have any problems, except when it came to using jQuery UI 1.7.2.

When I open up a jQuery UI Dialog, I want the ‘X’ in the upper right corner to be hidden to force the users to use the buttons. That’s easy enough to do:

When using jQuery 1.3.2 with jQuery UI 1.7.2, this works as expected:

When using jQuery 1.4 with jQuery UI 1.7.2, this doesn’t work as expected:

See for yourself…

• Demo using jQuery 1.3.2
• Demo using jQuery 1.4
• Download the demos in a zip file

I’m not sure if this is a bug in jQuery 1.4, or if jQuery UI 1.7.2 just isn’t ready to be used with jQuery 1.4. I’m getting this problem consistently in FF 3.5 and IE8 on Windows 7 x64.

Ideas anybody?

Plugins and Demos

jQuery Desktop

Demo | Source | Author: Nathan Smith

jQuery Week Calendar

Demo | Source

jQuery Monthly Calendar

Demo | Source

jqTouch

Demo | Source

jStore

If you’re looking to get into cross browser client side storage with HTML5, Gears, or flash this is a great jQuery plugin.

Demo | Documentation | Source

Simpla Admin, a jQuery-powered web based administration system

Demo | Source

Books

Learning jQuery 1.3 from Packt Publishing is a useful update to the previous edition that I reviewed here. It’s a great reference and refresher for jQuery developers at all levels.

jQuery Enlightenment from Cody Lindley is a recent release. I’ve heard rave reviews from jQuery/Twitter users. Everyone should get a copy. It’s only $15!

• Serve IE6 Visitors the Default WordPress Theme
• MobaLiveCD Updates and Adds USB Drive Support
• Brief Insight Into the Life of a Convicted Hacker
• Display a Stylish Sitemap with SlickMap CSS
• Sprite Me! How to do CSS sprites without having to do CSS sprites
• iPhone Gets .Net App Development
• Asus Eee Keyboard Confirmed For October, Wireless HDMI Included
• WP on Palm Pre
• The Sayano-Shushenskaya dam accident
• ExtJS Grid Accepts Data Dragged from Spreadsheet
• Instant LAN File Sharing With Python
• WinToFlash Turns Your Windows Installation DVD into a USB-Based Installer
• Hackers (or Pen-Testers) Hit Credit Unions With Malware on CD
• WPA Encryption Cracked In 60 Seconds
• Using a House’s Concrete Foundation To Cool a PC

• No Windows 7 XP Mode For Sony Vaio Z Owners
• Samsung N510 Ion Netbook Arriving Next Month for $599
• The Right Amount of “Challenge” In IT & Gaming
• Microsoft: IE6 Cannot Die
• Amahi Turns Old Systems into Full-Featured Media Servers
• Software Pricing: Are We Doing It Wrong?
• Netflix Values
• jQuery Weekly Calendar Plugin inspired by Google Calendar
• Laptop Lojack Vulnerability Exposed, Affecting 60 Percent of New Notebooks, BIOS “Rootkit” Preloaded In 60% of New Laptops
• Date display with sprites
• ImgBurn Updates, Adds Advanced Features, Fixes Bugs

Alternatively, you can download all of the jQuery examples in a zip file.

I’ve got another real world example of how to use jQuery to enhance your website. A friend emailed me this morning wondering if it was possible to insert text using the click event or drag n’ drop into a textarea. jQuery and jQuery UI to the rescue! Review the screenshots below or just go check out the demo page.

The jQuery Database plugin takes your HTML tables and allows you to write a query against them similar to MS- or mySQL. I haven’t had a chance to play with this yet, but I can see some potential benefits of bringing some data client side and not having to make a round trip back to the server. Very neat concept.

The jQuery LinkSelect plugin tries to make working in small areas with <select> elements easier. I tried it in FF3, IE6, IE7, and Chrome without any errors. I’m going to take a look around a few of my apps today to see where I could fit it in.

Wordpress has some new features too…

The latest version of the Akismet plugin for Wordpress added an Akismet Stats features to my Wordpress dashboards. I’ve always wondered how much spam I’ve been getting over time and this new feature lays it out for me in pretty graphs. It’s almost disheartening to think about what my site would look like with Akismet installed.

ListNav

[From the site]
We’d always wanted to have a javascript-based control that we could easily apply to long lists of items to allow quickly navigating around the list. Since most lists are alphabetically sorted, we came up with a plugin that allowed us to have a long list and then, by binding the list to our jQuery listnav plugin, an alphabet-based navigation bar would magically appear above the list, showing all of the letters from A to Z. Clicking on a letter dynamically filters the list, so you can, for example, click on C and the list changes on-the-fly to show you only items beginning with C.

[My impression]
It is fast and I can’t believe it took so long for someone to do this. It is very natural and easy to use.

ContextMenu
[From the site]
This is a jQuery plugin to create context (right-click) menus. The primary use for this is for web applications rather than the general web.

[My impression]
I’ve tried a couple of context menus in the past, but this one is the most flexible in usage and design.

jCrop

[From the site]
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

[My impression]
Very smooth and easy to use. One of the better image cropping plugins.

/etc/

Rick Strahl over at West Wind has written up a great introduction to jQuery. Rick got into jQuery with ASP.NET early and it is paying off. If you follow jQuery closely, you probably heard that Nokia and Microsoft are both adopting jQuery as their javascript framework. That kind of mainstream acceptance is great for jQuery and kudos to the jQuery team.

When a request comes into my web app, I check the CONTENT_TYPE header. Most browsers send this…

application/x-www-form-urlencoded

Firefox 3.0.1 is sending…

application/x-www-form-urlencoded; charset=utf-8

…which completely threw my program off when using FF3, while IE6/7, Opera, and Safari were working just fine. The program is using jQuery, the form plugin, etc so the problem could have been anywhere.

I finally broke down and asked for help. Rick was nice enough to point out the flaws in my logic and get me back on track.

2.5 hours of pulling my hair out. Grrr!

Alternatively, you can download all of the jQuery examples in a zip file.

I helped another developer today that had a jQuery question. He wanted the user to be able to ‘check’ a series of HTML check boxes that would then show the total value for each of the checked items.

I whipped something up really quick, and tried it in Firefox 2. Worked great. Then I tried it in Internet Explorer 6/7. Ugh, only calculates once the checkbox loses focus. I then changed the event binding in jQuery from change to click. Now it works just fine cross browser in IE6/7, Opera 9.5, Safari 3, and FF2/3.

Here is the code (using jQuery 1.2.6 min):

If you would like to see it in action, check out the demo.

You can add an event to each day by clicking the small ‘edit’ button next to the day number. I haven’t included anything like security, users, authentication, etc. but I think it is flexible enough too. This comes straight out of my intranet app, so may be a little rough around the edges as I had to generalize it for demo purposes.

Update (08/06/2008): Fixed the download link. Oops.

Download
Download Zip

There is no live demo, as I don’t have a public facing Windows server to put it on. Sorry.

Tested on the following browsers
IE6 on Windows XP (works)
IE7 on Vista (works)
FF2 on Vista and XP (works)
Opera 9 on Vista (works)
Safari on Vista (kinda works, probably fixable)

Written in
VFP 7 and West Wind Web Connection 4.68

Screenshots

Flat Calendar Screenshot 1

Flat Calendar Screenshot 2

Install Instructions
I’m sure you all know how to do this, but just in case. If I miss a step here, please let me know.

1. Download the zip file and unzip to a temp directory
2. Open the folder of the freshly unzipped file. You should see two folders, vfp and www
3. The ‘www’ folder contains a folder called ‘FlatCal’. Place this folder in the root of your IIS install or create a virtual directory in IIS to this folder. Make sure that you have ‘index.html’ as a default document option.
4. Create a scriptmap of ‘.fc’ to the wc.dll in IIS that is accessable from either the wwwroot or the virtual
5. Open the folder called ‘vfp’
6. Place the three files for the ‘flatcal_events’ free-table in your data directory where it is accessible from your wconnect app
7. Place the two prg files in your programs directory where you can add them to your wconnect project
8. Add the ‘FC’ scriptmap extension to the main file in your wconnect app
9. Add this code ‘Set Procedure To flatcal_main Additive’ in the ‘SetServerProperties’ function in the main file in your wconnect app
10. Open your browser and point it towards ‘http://localhost/FlatCal/’

Credits go to

• Brandon Wood for the HTML Template
• Nathan Smith for the Calendar CSS
• John Resig for jQuery
• Rick Strahl for Web Connection
• Trent Richardson for the Impromptu Plugin
• Developed by Shaun Kester (shaun@skfox.com)