The fade effect, as its name denotes, is an animation used to fade an element off of a page. You can find a demo of it in the jQuery documentation.

To begin, let’s create a fade function that accepts a DOM element and a time as parameters:

function fade( elem, time )

To achieve the fade effect, we can use the CSS opacity property, which determines the transparency of an element. Setting the opacity to 1 means the object is fully visible. As the value lowers, so too does the transparency. Consequently, 0 represents a completely invisible element.

Our logic will roughly abide by the following outline:

1. Find the starting opacity of elem, the given element. This is the value we have to reduce to 0 in time, the given number of milliseconds.
2. Begin an asynchronous recursion loop that runs every 100 milliseconds.
3. In the loop, decrement the opacity by the correct fraction to ensure that in time milliseconds, elem has an opacity of 0.

The correct fraction noted in step 3 will be equal to the starting opacity divided by time / 100. This is because the loop will go through time / 100 iterations in time milliseconds. In each iteration, the opacity must be decremented by the starting opacity / ( time / 100 ) to ensure that it will end up as 0 (the total decrement will equal the starting opacity) after the loop finishes its execution.

Let’s write some preliminary code based off this outline:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );
		setTimeout( go, 100 );
	})();
}

Note that startOpacity is assigned to 1 if elem.style.opacity is not explicitly set. This explains why we have to set elem.style.opacity in the following line, as it may not be defined.

After finding the opacity, the go function is recursively called as per our specifications. In the code’s current state, however, it does not stop. To determine when it should finish executing, we have to check whether the element has faded. This can be done by monitoring its opacity in relation to the target value, or 0:

if( elem.style.opacity > 0 )
	setTimeout( go, 100 );
else
	elem.style.display = 'none';

Not only do we stop calling go when we’re done, but we also set the display to none so that other elements are repositioned; elem should not continue to take up page space after it has faded. This is the typical functionality of JavaScript libraries and applies to our code as well.

To ice our cake by making the code compatible with IE, we can use the filter property:

elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

The final code is included below:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );

		// for IE
		elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

		if( elem.style.opacity > 0 )
			setTimeout( go, 100 );
		else
			elem.style.display = 'none';
	})();
}

And that’s it! See you next time.

View the Demo Download the Files

To begin our mad science, we’ll first need to include the API itself (note the HTML 5 that omits the type attribute of the script tag):

<!-- sensor=false tells google images we aren't trying to sense the user's location -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Moving forward, we’ll create a function which, when given an address, will display a dynamic map centered on it. Dutifully called setMapAddress, the function will have the following container:

function setMapAddress( address )
{
	// code goes here
}

To specify a location, Google Maps requires a latitude and longitude. As a result, our first task will be to convert the given address into the necessary format. Of course, this process has it’s own scientific term: geocoding. Being both scientifically and technologically-savvy, Google does the work for us in their Geocoder object. All we need to do is instantiate one and subsequently call its geocode method:

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { address : address }, function( results, status ) {

} );

The geocode method requires, as arguments, an object as well as a callback function. Looking at the first parameter, { address : address }, may strike initial confusion. The first use of the word address refers to a property of the object. On the contrary, the second use refers to the variable passed into the setMapAddress function, which we are trying to geocode.

Once the geocoding finishes, the callback function is invoked with a results array and status that is used to determine success. If the status notes a successful geocode, we’ll have to get the location (latitude/longitude) from the results array, setup options (similar to the options for the static images in the previous article), and finally construct the map. In its completed form, the callback function is:

if( status == google.maps.GeocoderStatus.OK ) {
	var latlng = results[0].geometry.location;
	var options = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	new google.maps.Map( document.getElementById( 'map' ), options );
}

The options object specifies the zoom, center, and type of the resultant map. In this case, these have been set to 8, the given address converted to a latitude/longitude, and road map respectively.

In addition, note that the constructor requires a DOM element and the aforementioned options. This means we’ll have to create the element, which has an id of map.

<div id="map"></div>

#map also needs a defined width and height:

#map {
	width: 512px;
	height: 512px;
}

Last, but certainly not least, we have to call the setMapAddress function we recently finished:

setMapAddress( "Chicago, IL" );

Voila! That’s all we need for a functioning dynamic map. You can view the demo or download the files.

Slider – The easiest known way to showcase your images and photos on the web in style.

Who can deny it? This is the generation of web 2.0 sliders. A few JavaScript files, some CSS, and a bit of markup is all you need to generate an elegant showcase of your images. Best part? 99% of it is done for you.

Well, that’s the ideal situation. Unfortunately, it’s often times much more complicated. That’s why I created Lateral Slider.

View the DemoPurchase it from CodeCanyon

Lateral Slider is a jQuery slideshow plugin that I recently released on CodeCanyon. How does it work? Simple.

1. Include the CSS/JavaScript

CSS:

<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />

JavaScript:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Lateral Slider -->
<script src="slider.jquery.js"></script>

2. Write the Markup

All you’ll need is a div and a few images:

<div id="slider">
	<img src="image1.jpg" alt="Image 1" />
	<img src="image2.jpg" alt="Image 2" />
	<img src="image3.jpg" alt="Image 3" />
</div>

3. Activate Lateral Slider

<!-- no need for type="text/javascript" in HTML 5 -->
<script>$( '#slider' ).lateralSlider();</script>

4. Celebrate

Lateral Slider is ready to be displayed.

5. Oops, was there supposed to be a fifth step?

Nope. You’re done.

Features

Simple setup is great, but I’m sure you’re also looking for features. Fear not:

• 13 different transitions
• Support for all major browsers (including IE6)
• Image linking
• Many configurable options
• Controls (forward, back, pick a slide)
• Comprehensive documentation
• Much more…

Want to know more? Check out the description at CodeCanyon. Better yet, why don’t you take a look at the live preview and see Lateral Slider for yourself.

Purchase It!

Interested? It’s only $10. Why not purchase it from CodeCanyon?

In these past few days, I’ve been writing a jQuery slider plugin with various transition effects. To make the code succinct, I decided to use a base Transition object that other objects, which define a specific type of transition, inherit from. This led me to the question of JavaScript inheritance.

Inheritance in JavaScript has been a controversial subject. Should a standard be set to use classical inheritance or should the base prototypal system be favored? Both paths have their own advantages and disadvantages. The readings listed below will hopefully give you enough information to choose which method you want to use.

1. Private Members in JavaScript

This reading isn’t really about inheritance, but it’s an important primer on object-oriented programming in JavaScript which will help give you a deeper understand of what is to come.

2. Simple JavaScript Inheritance

John Resig, the creator of the jQuery JavaScript library, presents his own take on inheritance. Using his utility, it’s possible to change JavaScript into more of a classical inheritance scheme.

3. JavaScript Inheritance via Prototypes and Closures

Steffen Rusitschka explains the advantages and disadvantages of prototype-based and closure-based (more classical) inheritance. He also presents his own derivative of Resig’s script.

4. Classical Inheritance in JavaScript

This reading, by Douglas Crockford, a well-known JavaScript developer, is yet another way to achieve the classical inheritance scheme in JavaScript. In addition to presenting his extension, Crockford also explains the added functionality that JavaScript can provide.

5. Prototypal Inheritance in JavaScript

In this reading, Crockford analyzes his old classical inheritance and realizes the benefits of sticking with the prototypal structure. This last article expresses the flip side of the controversy, explaining why there is no need for a classical inheritance scheme.

Hopefully, these links have shed light on the debate between prototypal inheritance and classical inheritance. Although I used Resig’s script in my slider plugin, I recently came across Crockford’s prototypal inheritance article (#5) and am now rethinking my ways for future projects.

So, what’s your take on JavaScript inheritance? Leave a comment below. I would be glad to hear more arguments for either side!

Recently, I ran into this exact problem when finishing one of my XHTML/CSS templates. I couldn’t find a simple, effective slider that was easy to use, simple to style, and a breeze to get working. Luckily, after enough searching, I came across Nivo Slider, and my problems were solved.

Nivo Slider is a 7 KB (compressed) jQuery plugin that provides a simple and intuitive way of creating sliders. With various transition effects, settings, general features, and great browser support, it beats out the competition. Unlike many other scripts, Nivo Slider’s instructions come on a single page and, more importantly, are easy to follow. No searching required.

Other than including the CSS/JS files, all it took to get a Nivo Slider working on my theme was this HTML:

<div id="slider">
	<img src="slider/slide1.jpg" alt="Slide 1" title="Post 1" />
	<img src="slider/slide2.jpg" alt="Slide 2" title="Post 2" />
	<img src="slider/slide3.jpg" alt="Slide 3" title="Post 3" />
	<img src="slider/slide4.jpg" alt="Slide 4" title="Post 4" />
	<img src="slider/slide5.jpg" alt="Slide 5" title="Post 5" />
</div>

and this JavaScript:

$( '#slider' ).nivoSlider();

How much more can you ask for? Even if the plain, default theme isn’t enough, styling is a breeze! Not only that, but if the slider styling on the front page is exactly what you’re looking for, there is even a style pack that you can download.

The only slight concern you may have with the script is the lack of support for IE6. Since I’m not interested in supporting this ancient browser anymore, this wasn’t too big an issue for me. Nevertheless, the use of IE6 is steadily decreasing and, with all of its features and advantages, Nivo Slider is certainly a good choice for an effective, customizable image slider.

With the rise of this new beast comes a few issues. The biggest libraries out there aren’t too small in terms of code size. Each one can add significantly to load time even when minified. Another problem resides with extra HTTP requests; each new file is accompanied by an extra request. Ultimately, this once again leads directly to a larger wait for users.

Although the first problem can’t be solved simply, reducing HTTP requests is a trivial task; just combine all of your JavaScript into one file. Unfortunately, sometimes it might be difficult or just annoying to do so. That’s why we created JMerge.

JMerge is a simple web application that combines JavaScript files for you. Using it is very simple. When you first enter the page, you’ll see a URL form field:

Type in the URL of your website and hit continue. After a second or two of loading, you’ll see an unordered list of JavaScript files that are used in the specified URL:

Click on any of the files you don’t want to merge. This will make them disappear from the list:

Now just click “combine them” and copy/paste the new code into one, merged file! That’s all it takes to combine JavaScript files with JMerge.

What do you think about JMerge? Was it useful for your site? Did you have any issues using it? Tell us in a comment below.

In the following 5 minute (yes, it only takes 5 minutes) screencast, we present a way to discover search suggest with the jQuery Autocomplete Plugin.

Screencast

Please watch the video in full screen (button on the bottom right) for full clarity.

Comments?

Do you have any comments, questions, or concerns? Just share them with us below!

Here is a basic primer in using OOP in Javascript.

Methods vs Objects

In Javascript, both general methods and objects are defined using the function keyword. For example, the method and the object definitions below are both denoted by function.

function add( a, b ) {
	return a+b;
}

function sum( a, b ) {
	this.total = a+b;
}

The difference between a method call and an object instantiation call is the keyword new. The difference is illustrated in the example below:

var addition = add( 1, 2 );
var summation = new sum( 1, 2 );

Fields

In OOP in Javascript, objects have fields that store data. You have already seen an example of this earlier in the sum object, which stores the sum of a+b as total. All of these fields are public – that is to say, modifiable by elements other than the object itself. For example:

var summation = new sum( 1, 2 );
alert(summation.total); // shows 3
summation.total = 5;
alert(summation.total); // shows 5

Methods in Objects

Next, objects can declare their own methods. These methods can be defined within the object definition, or outside of the definition and assigned to a variable within the object definition.

This provides an example of the former:

function sum( a, b ) {
	this.total = add( a, b );
	this.print = function() {
		print(this.total);
	}
}

and this provides an example of the latter:

function sum( a, b ) {
	this.total = add( a, b );
	this.print = print;
}

function print( total ) {
	print(total);
}

Inheritance

Finally, a major part of OOP is inheritance. Inheritance is when a “subclass” takes on all the methods of a “superclass”. Inheritance in Javascript is done using two lines:

this.inheritFrom = ;
this.inheritFrom();

Here is an example of the subclass retaining the methods of the superclass while adding methods of its own.

function super() {
	this.alert = function() {
		alert("Hello!");
	}
	this.alert2 = function() {
		alert("Hello2!");
	}
}
function sub() {
	this.inheritFrom = super;
	this.inheritFrom();

	this.alert3 = function() {
		alert("Hello3!");
	}
}
var c = new sub();
c.alert(); // alerts "Hello!"
c2.alert2(); // alerts "Hello2!"
c2.alert3(); // alerts "Hello3!"

While this primer is not necessarily in-depth, it has hopefully given you a basic understanding how OOP works in Javascript.

While reading this jQuery publication, I was very surprised by the comprehensiveness provided by the authors. Many books regarding systematic subjects often require a baseline knowledge to convey their information appropriately. Learning jQuery 1.3 presents a solution for both complete beginners and experienced users. It covers simple jQuery topics – including the DOM, selectors, and basic functions – while still giving advanced users the viable alternative to move to later chapters. In fact, the book’s sections are based completely on a building process: Rather than covering topics that have little to no relevance in each chapter, Learning jQuery 1.3 smoothly transitions into new subjects, giving the reader an efficient way to learn and develop.

In the chapters themselves, this publication uses a basic learning style that gives it a characteristic development process. Throughout each section, new concepts are introduced with simple code snippets. Before putting such information away and introducing the next idea, examples are given to induce a deeper knowledge of the subject. Instead of only showing what can be done, the book emphasizes on why and how it is done. I found this to be a key help when understanding new concepts. It is one thing to just have another tool under your tool belt; if you know how to use it, you save yourself a world of time.

For example, in the Events chapter, the authors use the example of an interactive style switcher. From this one application alone, they present the creation of buttons, event handlers, special jQuery-applied CSS properties, event propogation/delegation, namespacing, and more. The maintenance of this single real-world application explains to the reader exactly how and why certain techniques should be used.

Just as the explanations are aided through examples, the whole publication is filled with images, notes, and code that help teach the reader in an organized manner. Most every example found has an accompanying image or diagram that further conveys its job. When certain features are implemented, images clearly express the new function. Furthermore, notes present in small blurbs throughout chapters add tips, tricks, and in-depth information to a jQuery application. Along with the code and images, they make new information easy to apply.

In addition to a solid explanation style, the book focuses a lot on implementation and efficiency. Learning how something is done only exemplifies a single dimension of jQuery. Understanding what the problems are with an application and how they can be solved efficiently brings more genuine content into this publication. It elucidates on frequent dilemmas and presents various solutions in the form of minimal code.

With all of the above features, Learning jQuery 1.3 is quite a unique and comprehensive book. Its presentation style brings a new dimension to the normal way of teaching jQuery. Even though I did have experience with the subject matter prior to reading this publication, I learned quite a lot on my adventure through it. I would recommend this book to most anyone interested in taking a ride through the features and abilities of jQuery.

With jQuery, we can easily add impact to our actions through a set of simple visual effects, and even craft our own, more sophisticated animations. jQuery effects certainly add flair, as is evident when we see elements gradually slide into view instead of appearing all at once. However, they can also provide important usability enhancements that help orient the user when there is some change on a page (especially common in AJAX applications). In this chapter, readers will explore a number of these effects and combine them in interesting ways.

To read more kindly visit http://www.packtpub.com/files/learning-jquery-1-3-sample-chapter-4-effects.pdf.