Now it is time for Christmas and if you want to add some snows to a picture like the below example, a cool jQuery plugin — created by Jason Brown — can come to help.

• View Live Demo
• Download Plugin

Read the rest of this entry »

I know quite a few JavaScript MVC frameworks out there but corMVC is what makes me exited at most for a few reasons.

corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below.

corMVC Overview

Not like other JavaScript MVC solutions, corMVC is very simple and has very small footprint. It also does not require you to build the application using scaffolding or any other command-line utilities.

Read the rest of this entry »

Recommended Reading

Eloquent JavaScript: A Modern Introduction to Programming

"A concise and balanced mix of principles and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest... Read More >

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to lear... Read More >

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully re... Read More >

Installation

FireQuery is an extension of Firebug created by BinaryAge to help developers to keep track with jQuery expressions, data and collections as expressed on tool website:

• Query expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page

You can install the tool from official Mozilla add-on page (it requires Firebug 1.3+ already existed.) One note: You may have to find an older version (v0.3) to make it work with current official Firebug release (v1.4) as my experience on Windows.

In Action

After installing the add-on and restarting Firefox, just go to the test page to see how FireQuery tracks embedded jQuery data on FireBug’s “HTML” tab. The image below illustrates the data embedded in accordance with the jQuery codes to inject them to the page.

Read the rest of this entry »

Recommended Reading

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to lear... Read More >

CSS: The Missing Manual

Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as ... Read More >

The Foxfire Book: Hog Dressing, Log Cabin Building, Mountain Crafts and Foods, Planting by the Signs, Snake Lore, Hunting Tales, Faith Healing, Moonshining, and Other Affairs of Plain LivingIn the late 1960s, Eliot Wigginton and his students created the magazine Foxfire in an effort to record and preserve the traditional folk culture of t... Read More >

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.

Read the rest of this entry »

Recommended Reading

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to lear... Read More >

Programming AndroidWhat does it take to build well-engineered Android applications? Explore Android's core building blocks and APIs in depth with this authoritative guid... Read More >

jQuery in Action, Second Edition

A really good web development framework anticipates your needs. jQuery does more-it practically reads your mind. Developers fall in love with this ... Read More >

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 ),

Read the rest of this entry »

Recommended Reading

My Google ChromebookStep-by-step
instructions with callouts to Google Chromebook
photos that show you exactly what to do

Help
when you run into Chromeboo... Read More >

jQuery CompressedThe books examples are verified to work with jQuery 1.7

jQuery is a JavaScript API that makes it easy to make your HTML pages come to life.... Read More >

jQuery Pocket Reference

"As someone who uses jQuery on a regular basis, it was surprising to discover how much of the library I’m not using. This book is indispensable f... Read More >

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.

Read the rest of this entry »

Recommended Reading

Data standards called crucial to patient safety: IOM calls for federal initiative.(Practice Trends)(Institute of Medicine): An article from: Family Practice NewsThis digital document is an article from Family Practice News, published by International Medical News Group on February 1, 2004. The length of the ar... Read More >

Is carotid stenting primary treatment for extracranial carotid artery disease?(PRO & CON): An article from: Internal Medicine NewsThis digital document is an article from Internal Medicine News, published by International Medical News Group on January 1, 2005. The length of the a... Read More >

jQuery: Novice to Ninja

jQuery: Novice to Ninja is a compilation of best-practice jQuery solutions to meet the most challenging JavaScript problems. In this question-and-a... Read More >