Raju Gautam

If you are using jQuery plugin called fancybox for displaying images in the overlay and you want to display some texts on the overlay, you can just set the title attribute of the anchor tag as follows:

Click to show image

Then your plugin implementation code should look like this:

$(document).ready(function() {
	$("# show-image ").fancybox({
		'titlePosition'	: 'inside'
	});
});

And another major problem that I faced recently is, I want to replace the title in the overlay with Cufon. Since the title in the overlay is rendered by the fancybox script, Cofon does not load and work for that. You need to replace the fonts after the overlay is completed. For this there is an event called onComplete in fancybox, where you can call the cufon refresh or replacement function like below:

$(document).ready(function() {
	$("# show-image ").fancybox({
		'titlePosition'	: 'inside',
		'onComplete' : applyCufon
	});
});
function applyCufon(){
	Cufon.replace('#fancybox-title', { fontFamily: 'Deutsch Gothic' });
}

Hope this will help you all who are really having problem with this.

I know most of the JavaScript programmers must have already tried to develop the plugins to extend the functionalities of jQuery. Developing a jQuery plugins is needed when we cannot easily do only with jQuery core framework. Since a couple of months, I have been working with jQuery for several sites and loving to work with this. Here I want to share something on how to develop a plugin for jQuery.

Starting with jQuert extending
There is a property that jQuery object itself has which is used to extend a new function to be a plugin of the jQuery. The property is ‘fn’ of jQuery main object.
Syntax:

jQuery.fn.pluginname = function(){
    // plugin codes go here
}

For example if we are going to develop a plugin named ‘helloword’ then we will do something like this.

jQuery.fn. helloword = function(){
    // plugin codes go here
}

Passing parameters
Parameters can be passed as follows:

jQuery.fn. helloword = function(param1, param2, …., paramN){
    // plugin codes go here
}

Parameters can be of array, object, string, numeric that are accessible in normal JavaScript. Normally for passing the options to the plugin, JSON is used. To understand JSON, please see my previous post.
Read More…

How to download & use jQuery

Developer – John Resig (http://ejohn.org/)
jQuery is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Downloading jQuery

The library can be simply downloaded from its download page.
http://docs.jquery.com/Downloading_jQuery
There are two types of files for jQuery libraries and for other most of the plugins; compressed and non compressed. Compressed files are not easily human readable and non-compressed are normally readable and these can be easily modified hence are also called as source files.

Including jQuery library in the page
http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js – non compressed or
http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js – compressed
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js – non compressed or
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js – compressed

Read More…

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. SON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};

In this example, an object is created containing a single member “bindings”, which contains an array containing three objects, each containing “ircEvent”, “method”, and “regex” members.
Read More…

JavaScript is an excellent language to write object oriented web applications. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don’t realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated.

Objects

An object is a ‘thing’. For example a number is an object. An array is an object. Your browser window is an object. A form in your document is an object. There are hundreds more, and in some cases you can create your own.

Objects can have objects in them. For example, your document can have a form in it. This form is a ‘child object’ of the document. Therefore the document is the ‘parent object’ of the form. To reference the child object, we have to go through the parent object, eg. document.myForm

An array can have numbers in its cells. As we have already discussed, the array is an object, and so would be a cell within it, and so is the content of the cell. We cannot refer to the cell itself, but we can refer to its contents: myArray['cell name or number'] for example. Read More…