JavaScript on Modern Web

JavaScriptly


Archive for the ‘JQuery’


JQuery Code Content Assistance for Eclipse WTP

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.

 

jquery-eclipse-wtp-ui.gif

 

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.

 

wtp-code-assistance.gif

 

Find more info about JQueryWTP and donate for project here.

Share and Enjoy:
  • description
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Mixx
  • SphereIt
  • TwitThis
  • NewsVine
  • Google
  • Technorati
  • Facebook

JavaScript to Detect Google Chrome

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.

Share and Enjoy:
  • description
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Mixx
  • SphereIt
  • TwitThis
  • NewsVine
  • Google
  • Technorati
  • Facebook

JQuery Site Re-redesign

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! :)

Share and Enjoy:
  • description
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Mixx
  • SphereIt
  • TwitThis
  • NewsVine
  • Google
  • Technorati
  • Facebook