Thursday, April 10, 2014

jQuery modal dialog popup window without plugin

I just googled for jQuery Modal dialog window and to my surprise, I saw some links that redirected me to some jQuery plugins which is not necessary for such a small task. I didn't see a pain and easy to understand solution to it. So I decided to put it up in this post.
Here's a simple jQuery Modal Dialog Popup Window that even works in IE7: Demo

Related Articles:
- IE 7/8 stretching background image to 100% width and height
- HTML - DIV vertically center align image/elements
- jQuery increase/decrease number in input field

Tuesday, April 8, 2014

AngularJS show hide html elements

AngularJS is becoming more popular in web application development day by day. And it is not as simple as jQuery. Its main focus is not DOM manipulation, but it's more in Data manipulation, and is more logical. It teaches all jQuery developers a more sophisticated way of coding where the developers understand the next level of OOP.

I miss jQuery a lot. Especially, the handy methods like show() hide(). If we want to get the same effect with AngularJS, we have to put some logic in controllers and implement it with ng-click, ng-class, ng-show, ng-hide. In this post I will write some simple and easy to understand examples for this most needed ng-hide and ng-show methods .

Show Hide DIV with AngularJS on Click: Demo

Toggle DIV with AngularJS: Demo 

Saturday, April 5, 2014

Separate CSS for different browsers

It's a general expectation that the web application you are working on must be supported in all major browsers. Since the implementation of CSS properties in different browsers varies, they force front-end developers to write specific properties separately for them. There are some CSS properties that don't give similar result in all browsers. The most popular one is vertical-align; it behaves differently in chrome/firefox and in IE. The situation becomes even tougher when the client asks support for different versions of the same browser.

Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.

Separate CSS for Mozilla Firefox - CSS only solution:
@-moz-document url-prefix(){
    div{ color: red; }

Separate CSS for IE version - with conditional comments:
The traditional code:

The HTML5 BoilerPlate code:

These conditional classes get appeneded in the <html> tag depending on the version you are using. For example, if you are using IE9, the '.ie9' class will get appeneded in the <html> tag which gives you an option to write CSS only for IE9 with '.ie9' class as a parent class -
.ie8 .className{ color: green; } /* This css will be applied to IE8 only*/
.ie9 .className{ color: red; } /* This css will be applied to IE9 only*/

Separate CSS for IE version - with jQuery:

Read more on jQuery.browser

Separate CSS for Windows OS Versions using javascript:
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.

For Windows 8: 

For Windows 7:

For Windows XP:

Read more on understanding user-agent string

Related Articles:
Vertically center align image, DIV, and other html elements in IE 7 and IE 8
Styling input type file
Essential CSS Pseudo Classes

Wednesday, April 2, 2014

AngularJS Add Class and Toggle Class

There are several ways of adding a class to an element in angularJS which varies in different situations. I want to put the solutions without much of explanation in angularJS terminology, because sometimes it scares to the HTML developers, so I won't get into that. I will just post some plane code which will be useful to most of the developers and designers.

Add/Remove Class:
The directive you need to read to understand this example:
ng-app  ng-click and ng-class

Toggle Class Example 1:
The directive you need to read to understand this example:
ng-controller ng-app  ng-click and ng-class

Toggle Class Example 2:
The directive you need to read to understand this example:
ng-init ng-app  ng-click and ng-class

Related Articles:
- AngularJS Toggle Class with Animation

Saturday, March 22, 2014

The CSS3 multi-column layout

The CSS3 multi-column layout allows us to place long articles in short columns. This column approach helps  many users as sometimes they miss the track of reading with the long lines. And that's the main reason why newspapers are printed in columned layout. Also, in the world of large screen monitors most of the web layouts are stretched too long causing the reader more trouble. Here the multi-column layout is the best option to serve data to the users.

Properties of multi-column layout:

column-count: 3;
Number of columns to be displayed.

column-width: 8em;
Width of each column.

column-gap: 2em; 
The gap between each column.

column-fill: auto; 
Is used to indicate that columns are filled in a consecutive manner.

column-fill: balance;
Is used to indicate that content is equally divided between the number of columns defined.

column-span: all; 
Similar to the colspan in table layout. (This property is not supported in Firefox yet, but they will add the support soon.)

column-rule: 1px solid #ccc;
Sets border to the columns.

These properties can also be used separately -
column-rule-width: 1px
column-rule-style: solid
column-rule-color: #ccc

The shorthand is mainly used for column-count and column-width properties:
columns: 3 20em; /* column-count column-width */

Browser Support:
Check the browsers who support these properties at - When Can I Use
And the old browsers who don't support multi-column layout they will happily ignore these properties.


The multi-column layout module is still a candidate recommendation, but considering the implementation of these properties in major browsers it seems it will not take too long for W3C to approve it.

Related Articles:
- Essential CSS Pseudo Classes
CSS Media Query min-width Vs min-device-width with meta viewport
Grayscale images with CSS3 Filter Property
CSS - Indenting Second Line of LI (List Items)

Monday, February 24, 2014

AngularJS Toggle Class with Animation

The jQuery Toggle Class was much easy to work with, wasn't it? Yes! I agree with it! But, toggling CSS classes with AngularJS is much more interesting. How? Well, with jQuery we do direct DOM manipulations. For example, if we want to toggle CSS class on the <section> element, we have to tell the browser to traverse the DOM until it finds the <section> element and then add or remove the class, which directly affects on the performance of the page/application. 

With AngularJS the DOM manipulation becomes more relevant because it connects to the HTML elements via API methods and provides more scope to the data with custom attributes.

A quick demo:

Open this fiddle in JSFiddle to check the files I used for this demo.

Related Articles: 
AngularJS Add Class and Toggle Class

Sunday, February 23, 2014

Essential CSS Pseudo Classes

CSS Pseudo classes are the heart of CSS. Most of these classes are supported by all major browsers today. They make writing CSS simple and fun, as if there is no problem as such that can’t be handled with CSS Pseudo Classes without modifying the HTML. Let’s begin with some unknown Pseudo classes first.

:enabled and :disabled
Identifying elements state has become easy with these two classes. Also, they can be used as a good alternative to the enabled and disabled attribute selectors.

Have you ever got into a situation where some dynamically added empty elements disturb the layout? Well, the :empty class is here to help

:target is generally used to point out/display/go to the selected element which is triggered by the hash(#) links. In web 2.0 this trend is becoming a quite famous as most developers are choosing to develop single page websites.

This is a super-powerful class that can be used in most difficult situations. This class solves the issues that can only be resolved using JavaScript or jQuery. It accepts integer values and ‘odd’ and ‘even’ keywords. This can also be used in many different ways, such as - li:nth-child(2n+2), li:nth-child(-2n+3), :nth-of-type(), nth-last-child(), :nth-last-of-type().

This Pseudo class tells browser to apply CSS to all elements except the on that is in the parentheses of :not() class.

This is a widely known and used Pseudo class, almost all front-end developers are aware of it because of the most important use of it – 
a{ }

We can easily include some simple classes in the same category - :focus, :active, :visited

:before and :after
These are the life saver classes! They help in most critical situations allowing us to make use of two virtual HTML elements without actually adding the elements in HTML. 

Additionally there are the :first-child, :last-child simple pseudo classes, you can try some simple examples with it and see for yourself :)