The plugin works by piggy-backing your existing SELECT controls.  Since the original controls aren’t destroyed (they’re hidden), you can easily integrate this plugin into just about any existing form. The plugin degrades gracefully, as users without JavaScript will see the default SELECT controls.

Plugin Features

• Easily replace existing SELECT controls
• Supports OPTGROUPs
• Supports standard dropdown controls
• Supports multi-select controls (i.e. multiple=”multiple”)
• Supports inline controls (i.e. size=”5″)
• Fully accessible via keyboard
• Shift + click (or shift + enter) to select a range of options in multi-select controls
• Type to search when the control has focus
• Auto-height based on the size attribute (to use, omit the height property in your CSS!)
• Tested in IE7-9, Firefox 3-4, recent webkit browsers, and Opera.

Please refer to the main source file for implementation examples, a list of known issues, and the change log.

Demo & Download

This project is actively maintained on GitHub.  Please submit all issues and contributions to the project page.  Licensed under both the MIT and the GNU GPL licenses.

Demo Page | Download the latest version on GitHub

$('html, body').animate({
	scrollTop: $("#elementID").offset().top
}, 2000);

Although LocalScroll is good for more advanced applications, this snippet is useful for one-time use applications.  Simply adjust #elementID and 2000 to set the element and duration, respectively.

When it comes to textareas, the concept of word-wrapping is not as easy as it should be. In most browsers, including Firefox, Safari, Chrome, and Opera, you can set the textarea’s wrap attribute to on or off to achieve your preference.  Internet Explorer, on the other hand, requires a special value for the wrap attribute.

Although it should be simple enough to check for the browser type and toggle the appropriate value for wrap on-the-fly, there’s one more problem.  Because it’s not technically a valid attribute, most browsers (other than IE) won’t respond to changes to the wrap attribute that occur via JavaScript.  This means that if you want to have a checkbox next to your textarea that enables and disables word-wrapping dynamically, you’re out of luck.

The Solution

To work around this problem, we need to first check for the browser type and go from there:

1. If IE, update the wrap attribute to be either soft or off
2. If not IE, clone the textarea, set the appropriate wrap attribute, and update the DOM

Here is a really simple jQuery plugin that I’ve created to do just that.

The jQuery Word-wrap Plugin

The plugin is really easy to use.  Just make sure to include jQuery and the plugin in your page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.wordWrap.js"></script>

To enable and disable word-wrapping on-the-fly, simply call the wordWrap() method at any time:

$(document).ready( function() {

	// Enable word-wrapping
	$("TEXTAREA").wordWrap('on');

	// Disable word-wrapping
	$("TEXTAREA").wordWrap('off');

});

You can use any standard jQuery selector.   Note that browsers have word-wrapping enabled by default for textarea elements.

Demo

View a working demo of this plugin.

Download

Version 1.0

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

One thing that makes jQuery plugins truly awesome is their ability to be completely unobtrusive (read: “degrade gracefully”).  In this case, the Star Rating widget makes use of either a group of radio controls or a dropdown menu which get replaced before the page loads.  When you submit the form, the values are carried over just as you would normally expect.  Simple.

Of course, the plugin sports all the features you could possible want for a simple rating widget.  If you’ve been looking for a jQuery UI-based rating widget, you’ll be more than happy with this one.  It would be nice, however, to have a version of this plugin that doesn’t have the jQuery UI dependency.  I’ve got nothing against jQuery UI, but it’s rather heavy if all you’re using it for is a simple rating widget.

Here’s a little gotcha that I uncovered while working with jQuery’s $.live() handler. In short, $.live(‘click’) will detect both left and right mouse clicks (and probably middle clicks, as well). In other words, if you’re expecting to only fire an event on a left click, you’ll have to test for it and, unfortunately, Internet Explorer likes to behave differently here.

So, for all non-IE browsers you can do this:

$("#element").live('click', function(e) {
    if( e.button == 0 ) {
        // Left mouse button was clicked (non-IE)
    }
});

But for IE, you need to do this:

$("#element").live('click', function(e) {
    if( e.button == 1 ) {
        // Left mouse button was clicked (IE only)
    }
});

So let’s make it easier on everyone. Although I hate browser checks, I don’t really know of a way around this without one. (I also realize that $.browser has been deprecated — although still included — in jQuery 1.3.)

$("#element").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        // Left mouse button was clicked (all browsers)
    }
});

Make sure you include the e argument in your anonymous function, otherwise e will be undefined.

• Aspect ratio locking
• Adjustable min/max size
• Useful callbacks
• Keyboard support
• Animated selection line (similar to Photoshop)

Jcrop works in all popular browsers. You can see the plugin in action on Deep Liquid’s Jcrop demo page.

This plugin allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server.

My preliminary review has yielded excellent results, and this is much easier to implement than the YUI Uploader, SWFUPload, and some others I’ve worked with.

GM_jQuery.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js';
GM_jQuery.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_jQuery);

// Wait until jQuery has loaded
function GM_wait() {
    if( typeof unsafeWindow.jQuery == 'undefined' ) {
        window.setTimeout(GM_wait,100);
    } else {
        $ = unsafeWindow.jQuery;
        GM_ready();
    }
}
GM_wait();

// Once document and jQuery are loaded
function GM_ready() {
    //
    // [Your Greasemonkey code here]
    //
}

You can avoid occassional page load lags by changing the link to jQuery to one on your own server. Note that you won’t need to use this code if jQuery is already being used on the corresponding website.

Remove All Stylesheets From a Webpage

This snippet can be used to remove all stylesheets that are <link>ed to the webpage. This will not work for <style>s and inline styles:

for( i = 0; (l = document.getElementsByTagName("link")[i]); i++ ) {
    if( l.getAttribute("rel").indexOf("style") >= 0 ) l.disabled = true;
}

Linking to an External Stylesheet

This lets you append a stylesheet to the page, effectively letting you override all of the other stylesheets on the page:

var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://example.com/styles/stylesheet.css';
document.getElementsByTagName("HEAD")[0].appendChild(link);

Overriding Styles Without a Stylesheet

This is the same concept as above, except you can use the data: protocol to specify your styles in the href attribute:

var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'data:text/css,' +
            // Selectors start here
            '#sidebar { background: #DDD; border: solid 1px #CCC; }' +
            'P { line-height: 1.5; }';
document.getElementsByTagName("HEAD")[0].appendChild(link);

To make sure the image wasn’t corrupt, I saved it again using PhotoShop. No luck. Even after saving the image as a GIF instead of a JPEG, the white noise persisted in IE.

Luckily, some research resulted in finding Alex Judd’s post, which provided a relatively simple solution to the problem.

To summarize, the white noise occurs in both IE6 and IE7 on some (but not all) images when they fade in or out. This is especially true when you’re using a JavaScript library such as jQuery or script.aculo.us.

Evidently, IE mistakes some of the true-black pixels for transparent pixels, which causes the “white” noise (which may not necessarily be white, depending on the underlying background). One work around, as Alex points out, is to adjust the levels of the image in Photoshop very slightly—just enough to eliminate the true-black pixels.

To do this, open the image up in PhotoShop and perform the following steps:

1. Select Image, Adjustments, Levels
2. Move the Output Levels slider a few pixels to the right (or type in a small number, like 5)
3. Save the image

In most cases, there won’t be a noticeable difference in color. Alas, this work around does solve the display problem in IE, but not without tampering with the original image. We’ll have to keep our fingers crossed in that IE8 finally addresses this issue.