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.
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 textItemto them.
Except for 2 things, you can style the elements as per your wish. First, div with id quotesshould 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.
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.
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.