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.
See also: Selecting items with Drag n’ Drop
Two new jQuery plugin caught my eye recently and I wanted to take a moment to share.
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.
jQuery continues to be a VIP in my development world. I’ve covered some must have jQuery plugins before and they are all still going strong. Three new plugins have been released recently and I think they will each bring an important GUI element to your web application.
[From the site]
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.
[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.
I’ve tried a couple of context menus in the past, but this one is the most flexible in usage and design.
[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.
Very smooth and easy to use. One of the better image cropping plugins.
So, FF 3.0.1 was seriously pissing me off today. I’ll spare details as not very many people are VFP developers but it came down to something fairly simple.
When a request comes into my web app, I check the CONTENT_TYPE header. Most browsers send this…
Firefox 3.0.1 is sending…
…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!
If you are going to copy/paste the page for use on your computer, please remove the reference to https://skfox.com/mint and the google analytics script at the bottom. Otherwise, I get a bunch of clicks/statistics on my server that corresponds to your testing.
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:
If you would like to see it in action, check out the demo.