Sunday, December 4, 2011

Creating an on hover lightbox plugin using jquery

Welcome to yet another article of jquery. Here we will be creating an "onhover lightbox". I had seen this kind off lightbox on few portfolio websites i was going through recently.

Demo Link:

The procedure to create this very simple.

1. We first detect if there is a lightbox container on the page, if it doesnot exist create one using javascript.

2. Create an image object of target to be loaded. On the onload event of that object detect the width of the image and calculate the margin from the left.

Formula for that would be
(screen width - image width)/2

Then fade in the lightbox div and assign the margin value to its and change or set src attribute of image tag within this div.

The source code for this can be downloaded from

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


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 :

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

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


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


//Code to execute

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


//Code to execute

Saturday, June 11, 2011

A new addition to my skills. LESS Css

After a very long duration i found some time for myself. This i spent in learning and improving my skills. I learnt a "NOT SO COMPLEX" yet a very useful framework related to CSS called LESS - The dynamic stylesheet language

The idea behind this is pretty apply fund-as of OOP such re-usability to CSS to make CSS writing a very easy and less time consuming task. The code that you write will be stored in a file with ".less" extension.

Now How to use this file?

There are two ways of using LESS. One is server side where you use a LESS compiler to compile the .less files into proper CSS. (This requires ruby installation). and other is client side usage where you get a "less.js" file which will compile the less file for when loaded in browser. I haven't tried the server part yet but it seems quite easy to use as client.

About the language

Dont worry about any learning curve at all!! people who are good at CSS will find that its just like an addon to that language. Honestly it just took me like a day to learn and implement a few examples of this. The syntax and reference has been provided on the site itself. Additionally the code is also available on github too.
The framework not only converts less file into css but also performs optimizations for it like rearranging properties and compressing and minifying the code.
Its a great language to use if you wish to speed up your designing work.

Sunday, February 20, 2011

Something to keep in mind while freelancing

I might be just too young to write this but yes based on my experience with clients i had, i did like to put forward some points which i think every freelance IT professional must keep in mind

1. Always Freeze the requirements with the clients. Make sure "This is what they want". If possible get a signed approval from them

Its better if you complete this procedure in beginning of project so that you can avoid suffering in end. In many cases clients start demanding changes that are totally different from what they had asked in beginning. By getting this approval you can save your self from extra efforts being forced on you. For anything extra demanded make sure you charge them separately.

2. List down what you will be providing in maintenance.

In many cases clients over period of maintenance demand changes which in themselves are project and which cant be denied cause of service u need to provide them. To avoid this kind off issues, make sure you finalize terms and conditions of maintenance as well. i.e what all services or changes will you provide in maintenance.

3. Never take "Replicate a site" project

These are highly paid and very attractive for new freelancers but trust me.... they will screw up your reputation.

and this one is for web developers

4. Clarify well in advance what clients can expect to see on IE

Many times clients will complaint that site does not work as jazzy as it does on firefox or chrome or any other browser. We all know its not developers fault. IE sucks Bigtime!!! (Be it any version). Make sure that you tell clients this well in advance. If possible tell them what they wont be seeing on IE.
If client insist that he need exact output on IE you have 2 choices. 1 degrade the sites transitions and any latest improvements in css or js used or say "NO" to that project.

Well thats all on this. Will add to this as i learn more and more from clients ;)

Small issue of padding difference observed between chrome and firefox

In some elments like heading (h1,h2,h3,h4 etc) and anchors elements show weird padding difference. For example element that appears aligned properly in firefox may appear aligned slightly above or below its position in chrome.

This problem exist even after applying css reset. After trying out few things i found solution to this problem. All you need to do is add this line to the beggining of the css.


And the issue is sorted. :)

Monday, January 3, 2011

Release of the month

Release of the month