Sunday, November 27, 2011

Creating Simple Image Slider Jquery Plugin


Today we will see how to create a simple image slider plugin using jquery. The demo can be seen here

demo: http://designmantra.x10.mx/labs/imageslider/

In here i will be explaining the logic used to build this.


Step 1: Assign css styling to the images which will be part of the slideshow. we will be positioning them absolutely positioning them and adding setting there display property to none.

Step 2: Then set the image display property to block for image you want show.

Step 3: We set a timer of 7 seconds after which jquery will check whether the active image is the last image or not.
If not the last image it will change the display property of next image to block and set display property to none for current image.
If its last image the it will change the display property of the 1st image.

We have also given 2 user controls by which user can move back and forth within these images. One control is pair of arrows that helps you move forward and backward in images.

The next set of controls are image controls which equal to the number of images. On clicking on these you can directly jump to any image.
When user clicks the index value of that element is determined and then the respective image is activated.
Feel free to download the code and experiment

Download code : http://designmantra.x10.mx/labs/imageslider/imageslider.zip


Thursday, November 17, 2011

Yet another portfolio

In my quest to find a more popular portfolio platform which can help me reach out top more people i came across "Behance". After viewing the list of artist and their work displayed here i immediately signed up. This should have been posted almost a year back..... :p.... but some i forgot about posting about it.
So here is the url

http://www.behance.net/anirudh


Wednesday, November 9, 2011

Introduction to jQuery


Javascript is the one of the most important language when it comes to frontend development. Its importance grew further with rise of RIA (Rich Internet Application) and AJAX Technologies. Such rise in usage of javascript lead to development of javascript frameworks which resolved cross browser problems and allowing focusing on building feature rich applications.
jQuery, one of these framework, changed the way web developers used to think and work to create rich functionality in there web pages.

Why should you choose jQuery?

While attempting to add dynamic functionality to your page, you would normally be selecting an element or group of element and then performing some operations like showing or hiding them, changing content or style.
Using javascript would require you to write many lines of code. However creators of jquery have made this a lot simpler for web developers.
Let’s consider an example where you want alternate highlighting for the table row. This can be easily done using jquery in following manner

$(“table tr:nth-child(even)”).addClass(“highlight”);

jQuery Fundamentals

jquery primarily focuses on performing various kinds off operations on page elements. For these operations, you select elements using css “selectors” (selectors specifies an element or group of element based on their attribute or place in DOM).
One major advantage of using jquery is that you can be sure that your code will execute identical in all browser.
In addition to this jquery developers have also provided simple means to extend the library functionality to build plugins or custom functionality.

Selectors and jQuery

CSS “selectors” is a way by which you can refer to page elements. This selection of group is on the basis of element’s attributes or position in DOM.
For example

P a

Will refer to all the links within the paragraph element. This css selector can also be used with jquery to perform some operations on this selection.
To select elements on page using jquery we use a very simple syntax

$(selector)

So our earlier example will look as follows

$(“p a”)

The $() method of jquery returns an array of DOM elements based on the selector provided in form of object. These objects have many methods associated to it for performing different activities.
This programming concept is called “wrapper” cause it wraps the matching element
Let us consider an example where you would like to fade out elements within our previously used selector. You would do that in following manner

$(“p a”).fadeOut();

Here fadeout() is one of the methods provided by jquery. You can also chain these function calls or for simplicity these jquery commands to execute many actions. Example

$(“p a”).fadeOut().html(“Reappeared”);

The selector used can be any kind off selector like id, class, attribute based selector.

The document.ready()

As per unobtrusive javascript paradigm, behavior is separated from structure, so actions on the page elements will be performed external of the document containing the markup. For this to happen we must wait for all DOM elements to be loaded.
In traditional javascript we use “window.onload” for executing functions after entire page is loaded. The syntax of this would look like

Window.onload = function()

{//Some code}

However drawback of his traditional method is that your code will be executed only after all components of that document are loaded, that includes images as well. This causes unnecessary delay even if this code’s execution is not dependent on these components presence.
A better approach to this would be to execute code as soon as browser has converted html code into a DOM structure. Jquery lets you do this using document.ready() function
Syntax for this looks like

$(document).ready(function(){

//Code to execute
});

Document.ready also has a shorthand form which is more easy to use. That is as follows

$(function(){

//Code to execute
});