JavaScript code content assistance built in Eclipse WTP does very good job that I found even better than the same functionality in some commercial solutions, however, JQuery’s syntax is not supported (no surprise). That’s why jQueryWTP tool comes to help adding JQuery support to Eclipse WTP (and Eclipse PDT, MyEclipse which are based on WTP too.)

This is not an Eclipse plugin instead a tool to patch the existing plugin and inject JQuery’s syntax support into it. First download the tool from SourceForce; it’s a Java executable JAR so you can double-click to it or run it from command line:

java -jar jqueryWTP0.2forJQuery1.2.6.jar

Now browse to plugin file

org.eclipse.wst.javascript.ui_xxxxxxx.jar

and set output directory to generate the patch. Please backup the original file and set output directory different from source one.

Select “Generate” button to get the patched file then copy over original file. Start Eclipse and open a HTML or script file to see JQuery’s functions listed on code assistance like image below.

Find more info about JQueryWTP and donate for project here.

Here are some quick and useful JQuery plugins from Jason Frame’s “JQuery Grab Bag“.

Auto-Grow TextArea

The technique is borrowed from Facebook that uses an off-screen <div> to calculate the required dimensions of the textarea to reveal all texts inside instead of to display vertical scrollbar. Run the following code line to enable auto-grow behavior to all textareas on page.

$('textarea').autogrow();

Online Demo

Input Hint

It’s not always necessary to attach label to every text field in web form, instead you can use hint to tell user what to type in the fields. This plugin will help keeping away from tedious codes to add hints to input boxes.

First, add hint attribute to input fields.

<input type="text" hint="Your first name" name="firstname" />
 
<input type="text" hint="Your last name" name="lastname" />

Then, simply get the functionality work on the fields.

$('*[@hint]').inputHint();

Online Demo

Text Resizing from Cookie

This is not a JQuery’s plugin but still depends on JQuery to allow user to select appropriate text size on reading. Of course, some modern browsers feature zoom functionality but not equally good. So, users still want to resize text on fly.

We’ll need to define some styles with different font sizes for body tag.

body.small { font-size: 10px; }
body.medium { font-size: 12px; }
body.large { font-size: 14px; }

And some links for size selection accordantly.

<div id='sizer'>
      <a href='#' class='small'>small</a>
      <a href='#' class='medium'>medium</a>
      <a href='#' class='large'>large</a>
</div>

Then call cookieResize() function on load. Done.

cookieResize('#sizer a', 'medium');

Online Demo

Download example codes

The negative side of having a new (and promisingly become popular) browser, no matter how good it can be, is you’ll have to test your web apps with it among many others.

Probably, the first step is to detect the browser from JavaScript code by parsing browser’s user agent, and here is what of Google Chrome.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

I guess old JavaScript codes can mistakenly tell it Safari like when running the code snippet below using JQuery’s browser utility.

1
2
3
4

$.each($.browser, function(i, val) {
	 $("<div>" + i + " : <span>" + val + "</span></div>")
		.appendTo(document.body);
});

It may be no problem until you find something wrong when your apps running on Chrome only. So, here is the code line to detect Chrome generally:

1

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

We’ll have to change the JQuery browser utility to support Chrome detection as follows:

1
2
3
4
5
6
7
8
9
10
11

var userAgent = navigator.userAgent.toLowerCase();
 
// Figure out what browser is being used
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Now, correct result shows on test screen:

Just one notice: Current version of JQuery (1.2.6) is treating Chrome as if it was Safari and basically no serious problem has been found yet. Modifying browser detection can cause the lib render pages/elements incorrectly for it has no knowledge of Chrome’s rendering engine. To keep compatibility, you can change line 7 back to:

7

	safari: /webkit/.test( userAgent ),

But in this case the browser will be detected as both Chrome and Safari — not nice solution, I accept.

Anyway, it’s very likely that JQuery and other JavaScript frameworks will include Chrome to browser list for detection in next versions.

The redesign of JQuery DOT COM site recently gained a huge amount of comments; unfortunately most of them were not positive. Developers who have come along with the library feel unhappy with new slogan “Be a Javascript Rockstar” that, said, makes them look unprofessional.

Response to a post on Ajaxian, shypht commented:

Hate to say it, but image is everything. If I was trying to sell my manager on using jQuery, Prototype, Mootools or Dojo, and sent them to those sites, I think based on look alone jQuery would be at a disadvantage. “Write less, do more” is a great slogan, “Be a Javascript Rockstar”, not so much.

Strikes me as being an amateur, and more focused on flashy effects than functionality. I love jQuery, it’s helped me loads on my most recent project, but that header just makes me cringe a bit on the inside when I see it.

While Glen Lipka described his feeling in more colorful words on his blog post:

Truthfully, I feel alienated by it.  It doesn’t resonate with me.  It makes me feel old and lame.  My hair is not long and flowing. The rockstar isn’t me.  jQuery is me.  It’s different.

Obviously John Resig & team did listen to the community and decided to kill the “JavaScript RockStar” on JQuery site.

Apart from the new glossy UI, the best of JQuey site’s new design is to organize documentation for the library itself separately from hundreds of plugins and extentions. The new search functionality allows user to fine tune query to specific documents or keywords.

Well, however, please keep in mind that nobody want to be a JavaScript rocktar!