jQuery Howto

jQuery: $.type()

2013-02-18T00:34:00.000-08:00

This post covers all about jQuery’s .type() method. You will learn what it does, see its’ usage examples and understand the difference between jQuery’s .type() and JavaScripts’ typeof operator. Without further ado, let’s find an answer to the following question. What does $.type() do? jQuery.type() method returns internal JavaScript class name of the passed argument. jQuery.type(1) // "

One doesn't simply drop support for oldIE

2013-02-15T01:31:00.000-08:00

This weeks humor post is about dropping IE 6, 7 and 8 support in the next jQuery 2.0 version. One of the advantages of using jQuery is to get on with your app logic and not worry about the cross-browser scripting issues. I don't think anyone would trade their website's IE support for a digit in their jquery.js file. Would you?

JavaScript: typeof & when should you use it?

2013-02-14T05:40:00.001-08:00

In this post, we will talk about JavaScript’s typeof operator. We will start with its’ purpose. Then discuss its’ flaws and finally see when should you use it. typeof's usage doesn’t happen to match its’ initial purpose. What is typeof? The typeof operator is used to identify the type of an object. It always returns a String value, so you should always compare return value to a string. //

ReferenceError: $ is not defined

2013-02-07T09:01:00.002-08:00

This post will explain the root cause of the Reference Error in your browser’s console log. Also, list most common cases with examples and solutions. Without any further ado, lets see what a reference error is. This is a common JavaScript error that says: you are trying to access a variable or call a function that has not been defined yet. Reproducing the error: // VARIABLES foo; //

jQuery: Test/check if checkbox is checked

2013-02-06T05:01:00.000-08:00

Testing if certain checkbox is checked using jQuery is pretty simple task. But I, just like many other developers, keep forgetting the exact syntax. So I decided to carry on a little research on the subject and gather all related information including small caveats and write this article for the future reference. This post covers 4 methods to check if checkbox is checked. All methods especially

jQuery .end() explanation & examples

2013-01-28T12:13:00.000-08:00

jQuery's .end() method is one of the most rarely used methods that I know of. In this post I would like share remind you what it does and how we can use it to make our jQuery code more readable. Firstly, what does it do? Put simply .end() cancels the last filtering action and returns a set like it was before the filtering was applied. It's best explained with an example. Consider we have this

Covering code with tests is not popular

2013-01-25T13:10:00.001-08:00

Covering your JavaScript and jQuery code with tests isn't that popular today. Don't you think?

Bind jQuery events to tab or window close

2013-01-22T09:59:00.000-08:00

This post shows you how to bind JavaScript functions that will fire when user navigates away from your page, closes browser or a tab. Browsers have native JavaScript events on window object: unload and beforeunload. beforeunload is a proprietary event introduced by Microsoft and supported by other browsers, but not all. Please note, these events will be fired when user navigates away from the

No jQuery? Nothing to do here!

2013-01-18T11:28:00.001-08:00

Sometimes, including JavaScript library is an overkill. Example: just to get focus on form field. But sometimes, persisting on writing your own javascript library for a task that is solved by an existing framework is double overkill. And this Fridays humor post is just about that... ) NOTE: I am not against developers creating new stuff and challenging existing norms, on the very contrary.

8+ methods that will not work in jQuery 1.9

2013-01-15T11:49:00.001-08:00

There have been many method additions and deprecations in the last jQuery releases, but never so many changes that remove previous deprecations and make backward incompatible changes in a single release. Final release of jQuery 1.9 will be announced today. This article will help you get an overview of what’s changing and how to get prepared. So lets review these changes. 1) $.browser is no

Learn QUnit in just 2 hours

2013-01-14T10:00:00.000-08:00

This is not a catchy post title or usual marketing trick. 2 hours is actually how long it would take to learn QUnit for an average developer (provided you are familiar with JavaScript and web dev basics of course). Well, that's how long it took me to learn. I read the docs (very short and concise), read QUnit tests of some popular jQuery plugins, wrote some tests of my own, and all these got me

Tough jQuery developer

2013-01-12T11:00:00.000-08:00

This week's "Friday jQuery humor" post is a bit late. Anyway, let's see how tough are you?

All about jQuery plugin manifest file

2013-01-06T23:15:00.000-08:00

As it was described in our previous post “How to prepare your plugin for the new jQuery plugins site” you will need to add a manifest file if you want your plugin to appear on the new jQuery plugins site. In this post we will cover everything you need to know about the manifest file, how to format it and where to put it. What is a jQuery plugin manifest file? It is a JSON file (not JavaScript

MEME: jQuery version

2013-01-04T14:38:00.001-08:00

I thought I’d spice thing up a bit with some humour related to jQuery and JavaScript from my experience. With the new work and responsibilities, this kind of “surprise” happened to me more than once :) If you like it, please share. Depending on the interest, this might become more periodic thing.

How to prepare your jQuery plugin for the new plugins.jquery.com site

2013-01-04T11:48:00.001-08:00

It’s been over a year since the unfortunate event that whipped out the plugins.jquery.com site’s database. But sometimes unfortunate events lead to better things and that’s the case with the Plugins site. Instead of trying to reinvent the wheel and create a website equally useful for plugin users and plugin developers (while fighting spam, maintaining the servers, etc.), the team decided to

“It’s alive” - new theme design, interesting posts & more…

2013-01-03T07:25:00.001-08:00

Happy New Year everyone! I would like to give you a heads up with the news that the blog will become “live” again with more regular and interesting posts around jQuery and JavaScript. For the last couple of years I have been involved in a very fast growing start-up with a vibrant developers team. I have learned a lot during this period, so I decided to also cover topics about maintaining

NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]

2012-12-23T16:30:00.000-08:00

This is a common error in Firefox. It is logged in console when you try to call on non existent DOM API method. Seeing this error message is very common with methods call to alert(), confirm(), drawImage() (canvas) and window.open(). You may think "how those methods could be 'non-existent'?", since they are standard APIs of the window object. Well, that's true, they can't, but consider the case

Dynamically change using jQuery</h1> <p>2012-12-10T10:30:00.000-08:00</p> In this post I will show how to dynamically change document's title using JavaScript and jQuery. Browsing the web (and StackOverflow) I saw a lot of posts that say you can't do it using jQuery. Actually, there is a jQuery syntax that is basically a wrapper for javascript code (see below). Note: just to clarify, by document title we mean the text that is displayed in the browser window or a tab.<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=Ai3WQswgmKc:htFOeVnzXx0:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=Ai3WQswgmKc:htFOeVnzXx0:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=Ai3WQswgmKc:htFOeVnzXx0:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=Ai3WQswgmKc:htFOeVnzXx0:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=Ai3WQswgmKc:htFOeVnzXx0:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>jQuery “double click” event binding</h1> <p>2012-11-23T12:00:00.000-08:00</p> This post explain how one can register (bind) an event handler function to user’s double click event on any element using jQuery and JavaScript. Also, it gives practical advise about double click and other event combination usage. Double click event Double click event is JavaScript native event and can be bound to any HTML element on the page. The JavaScript event name for double click is <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=1AoddUfxcKw:RoZX8YtHCsE:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=1AoddUfxcKw:RoZX8YtHCsE:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=1AoddUfxcKw:RoZX8YtHCsE:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=1AoddUfxcKw:RoZX8YtHCsE:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=1AoddUfxcKw:RoZX8YtHCsE:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>The difference between == and === in jQuery/JavaScript</h1> <p>2012-11-09T01:19:00.000-08:00</p> In this post I would like to explain the difference between double (==) and triple (===) equals in JavaScript/jQuery. A quick and short explanation is that == does type coercion (conversion) before checking for equality; and === does strict equation which requires values to have the same type as well. Here is what it means: 0 == false // true 0 === false // false, because they have <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=OR-FEHA0Xa4:7mvsD4hgd78:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=OR-FEHA0Xa4:7mvsD4hgd78:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=OR-FEHA0Xa4:7mvsD4hgd78:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=OR-FEHA0Xa4:7mvsD4hgd78:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=OR-FEHA0Xa4:7mvsD4hgd78:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>Add jQuery to your Greasemonkey script</h1> <p>2011-08-05T06:07:00.001-07:00</p> Greasemonkey is a Firefox add-on that lets you run JavaScript on web pages you specify. Using Greasemonkey you can improve and change the way websites look and behave (see examples of what is possible here). To learn more about it see it's official site, to learn how to include and write your own custom scripts (aka "user scripts") visit coder's manual. Usually Greasemonkey scripts work with the<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=arLerMEFXmc:9yKHz51kCVY:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=arLerMEFXmc:9yKHz51kCVY:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=arLerMEFXmc:9yKHz51kCVY:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=arLerMEFXmc:9yKHz51kCVY:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=arLerMEFXmc:9yKHz51kCVY:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>HTML: The difference between attribute and property</h1> <p>2011-06-13T04:37:00.001-07:00</p> In this short post I will explain the difference between attributes and properties in HTML. The .prop() function introduced in jQuery 1.6 raised a lot of questions about the difference and I hope this post will help you to understand it. What is an attribute? Attributes carry additional information about an HTML element and come in name=”value” pairs. Example: <div class=”my-class”></div>. Here<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=cu7Bj-CuBU8:JKpbWQj8IbU:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=cu7Bj-CuBU8:JKpbWQj8IbU:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=cu7Bj-CuBU8:JKpbWQj8IbU:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=cu7Bj-CuBU8:JKpbWQj8IbU:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=cu7Bj-CuBU8:JKpbWQj8IbU:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>Check if a language file is loaded for jQuery Globalization plugin</h1> <p>2010-10-15T13:23:00.001-07:00</p> Recently, I wrote my first jQuery Globalization plugin introductory post. I mentioned that I will write a tutorial for Globalization plugin and I am. While writing the tutorial I thought I’ll write one of my short Friday jQuery tips. In this post you will learn how to check if a specific jQuery Globalization plugin language file is loaded or not. Globalization plugin saves localization data and <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=qeZG9Xj0JjA:PmCln1a5fQw:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=qeZG9Xj0JjA:PmCln1a5fQw:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=qeZG9Xj0JjA:PmCln1a5fQw:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=qeZG9Xj0JjA:PmCln1a5fQw:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=qeZG9Xj0JjA:PmCln1a5fQw:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>JavaScript to detect iPad visitors</h1> <p>2010-10-06T13:15:00.001-07:00</p> This post gives you a short JavaScript function to detect your iPad users. Without any further ado, a javascript code to detect iPad users: function isiPad(){ return (navigator.platform.indexOf("iPad") != -1); } You can also detect browser version and some other stuff by parsing user agent string. Here is an iPad Safari’s user agent string for your reference: Mozilla/5.0 (iPad; U; CPU OS 3<div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=wjgRD6kWDkA:FCFRDdO4yf0:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=wjgRD6kWDkA:FCFRDdO4yf0:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=wjgRD6kWDkA:FCFRDdO4yf0:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=wjgRD6kWDkA:FCFRDdO4yf0:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=wjgRD6kWDkA:FCFRDdO4yf0:V_sGLiPBpWU"></img></a> </div> </article> <article> <h1>jQuery Globalization plugin — jquery.glob.js</h1> <p>2010-10-05T15:17:00.001-07:00</p> This is the first post of a series that are dedicated to jQuery’s new Microsoft contributed Globalization plugin or shortly jquery.glob.js. In this first post I will try to cover the very basics like library licensing, “the good & the bad” and some thoughts on how it could be improved (IMO). I will be post some jQuery globalization plugin tutorials in coming days, so bare with me. Before we <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=WXLyDrgcXDs:ft87LwJuvwc:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=WXLyDrgcXDs:ft87LwJuvwc:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=WXLyDrgcXDs:ft87LwJuvwc:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=WXLyDrgcXDs:ft87LwJuvwc:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/jQueryHowto?a=WXLyDrgcXDs:ft87LwJuvwc:V_sGLiPBpWU"></img></a> </div> </article> </main></body></html>