Creating a text rotator with jQuery

quote

jQuery is appropriately described as the “write less, do more” library. Few lines of code, if written appropriately, can produce wonderful tools or utilities.

In this article we will create a simple text rotator (or banner rotator whatever you want to call it). Simply put, there will be a placeholder which will have multiple quotations written inside it. These quotations will be displayed one by one with a fading effect. Have a look at the demo to see how it will look like.

View Demo

Now that you have seen the demo and you find it interesting enough, here is how to create it.

Write the following html which will create a container div with id quotes. Inside this div, create multiple divs, each of which will hold a quotation and assign a css class textItem to them.

Except for 2 things, you can style the elements as per your wish. First, div with id quotes should have position as relative and each textItem should have position set to absolute. Absolute positioning for quotations will ensure that they are stacked on top of each other. This way if we fade out a quotation and fade in the next one, it will give desired effect.

Continue reading Creating a text rotator with jQuery

jQuery: Difference between .each and jQuery.each

It can be quite confusing when you have 2 methods in an API with same names. Hopefully, this post will clear up your doubts.

.each is an iterator that is used to iterate over only jQuery objects collection while jQuery.each is a general function for iterating over javascript objects and arrays.

Still confused? Let us look at the usage of both of these with examples.

.each()

Consider the following markup.

<p> paragraph element </p> span element

Suppose we want to find out the tag name of each element present inside this div. In this case we will use .each iterator
Continue reading jQuery: Difference between .each and jQuery.each

Guys, I am writing a book

PHP jQuery Cookbook

Yes that’s right and it is called PHP jQuery Cookbook.  As the name suggests, it’s about creating rich internet applications using 2 of my favorite technologies – PHP and jQuery.

I love coding web apps and helping others find solutions. Perhaps that is the reason I agreed to write when the wonderful people at Packt Publishing contacted me. (Also, a book on resume isn’t that bad either ;))

Another reason is I love Open source. It is a lovely philosophy and I am a strong believer in it. Having learnt so much from the Open source community since I started coding, I have always wanted to return something back. Nothing could have been better then this. And did I mention, Packt pays direct royalty to a project if they sell a book written on the same.

Continue reading Guys, I am writing a book

jQuery Tip: Finding tag name of an element

While coding jQuery or javascript, sometimes we need the tag name of an element. This post will show how you can retrieve the tag name of an element easily using jQuery

We know that each DOM element has a tagName property. We also know that most jQuery methods return jQuery object. Therefore to get the tagName, we need to extract the DOM element from it. This can be achieved in 2 ways.

Method 1: Using get() method of jQuery

jQuery’s get() method returns the collection of DOM elements for a jQuery collection.

Consider the following markup

This is a div

Continue reading jQuery Tip: Finding tag name of an element