tag:blogger.com,1999:blog-50615888682634198942024-03-07T09:04:24.710+05:30Front-End Updates HTML5, CSS3, jQuery, AngularJS, JavaScript, JSON, Photoshop, & UsabilityDipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.comBlogger136125tag:blogger.com,1999:blog-5061588868263419894.post-28811848479943807072019-03-07T11:53:00.002+05:302019-03-07T11:54:21.360+05:30Today 3/6/19<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
What is Agile?</h3>
“Agile is a set of values and principles for software development under which requirements and solutions evolve through the collaborative effort of self-organizing cross-functional teams.”<br />
<br />
Agile is a set of practices to help you be adaptable, and ensure your team is always working on something important.<br />
<br />
Agile is the process of breaking down a large project into smaller tasks (usually called stories) and prioritizing them.<br />
<br />
<h3 style="text-align: left;">
Agile Workflow</h3>
It is very simple.<br />
* Sprint Planning: At first you start with the ToDo List AKA Product Backlog - a prioritized list of items to deliver a product.<br />
* Once you have the ToDo List, the next step is to have a planning meeting where you pick the most important user stories and place them in a current Sprint. The required efforts are estimated and agreed upon<br />
* The user stories are then developed into one to three weeks of Sprint (development cycles), it includes, planning, testing, bug fixing and everything that goes into delivering that feature in that sprint<br />
* The team goes through a brief daily standup meetings every day to understand what the team did yesterday, what it is doing today, and if their are any roadblocks <span style="white-space: pre;"> </span><br />
* At the end of the sprint, you do a sprint review where you see if the development adds any values to the customer/product, if yes, you ship it. If not, then you will have to repeat the entire process for another sprint<br />
* At the end you will have a Sprint retrospective meeting where you see what went well, what can be changed, what needs to be kept and what can be removed. After this meeting, the team moves on a next sprint planning and the cycle repeats<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoTGMb7qltK7zygMuEr4sLbEZSV4PPgrvgRVYemZiGKTQOVbJbjVcKaH60nT4aExcJgBx6XmBHuWkauZLYSGdrW7z9Eg3nfEmm7FW_j3zsCZbiqCGJr0m60SeVdC-1ZyjdwvszVE7eeKV/s1600/Screen+Shot+2019-03-06+at+3.51.23+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="453" data-original-width="1600" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoTGMb7qltK7zygMuEr4sLbEZSV4PPgrvgRVYemZiGKTQOVbJbjVcKaH60nT4aExcJgBx6XmBHuWkauZLYSGdrW7z9Eg3nfEmm7FW_j3zsCZbiqCGJr0m60SeVdC-1ZyjdwvszVE7eeKV/s640/Screen+Shot+2019-03-06+at+3.51.23+PM.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com4tag:blogger.com,1999:blog-5061588868263419894.post-23044537267743259522019-03-05T23:22:00.000+05:302019-03-05T23:46:33.861+05:30Today 3/5/19<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
What are algorithms? </h3>
An algorithm is a set of unambiguous instructions to solve any problem. For example, when you make some changes in a word document, the document is auto saved. The autosave feature is an algorithm, it follows an instruction of saving a document the moment when any edit happens on the document.<br />
<br />
Another practical and most understandable example would be; consider you have 10 people in a room and you have to count the number of people in that room. All of us follow the simple human process and start counting people in that room by pointing fingers at each person. In this process, unknowingly, we follow the set algorithm of counting people. The same applies to every task we perform in our daily activities.<br />
<br />
<br />
<h3 style="text-align: left;">
Agnostic Apps / device agnosticism </h3>
The term agnostic apps is gaining more and more popularity these days. It's a big and scary word but if we actually look at the literal meaning of it, it simply means<b> any application or device that works just fine with various systems without requiring any special device/adaptation.</b> For example, a website that works fine on laptops as well as on mobiles, tv, wearables, <a href="https://whatis.techtarget.com/definition/Internet-refrigerator-Net-fridge-or-Web-enabled-refrigerator" target="_blank">refrigerators</a>, IOTs etc. <br />
<br />
<br />
<h3 style="text-align: left;">
Agile Epic and User Story </h3>
An Epic is a a long/big story as the name suggests. There can be multiple small user stories for that epic. For example, an epic for a travel websites can be <b>I want to find holiday destinations and travel around the world</b>. It's big and it is difficult to define, so, to do that we have to break this epic into multiple small user stories such as <b>As a user I want to discover new destinations</b>.<br />
<br />
A user story is a short, simple description of a product feature. User stories define product backlog and a product backlog is a collection of user stories that are prioritized based on the user/business needs. A user story has three parts (1) persona (as a user) (2) the feature (I want...) (3) the need satisfied by the feature (so that I can achieve...) for example, <b>As a user I want recommended destinations based on my current location</b>.<br />
<br />
<h3 style="text-align: left;">
Minimum Viable Product (MVP) </h3>
It is a product with just enough features to test the concept and give feedback on the developed product. Most companies start working on the project without knowing if they can provide what is expected, and it is the reason why many of them fail. Imagine a situation that you have to deliver a banking product, you put in years of efforts and eventually you develop something that the customers don't want. That can be a big pain. To avoid it, it's best to give customers the MVP, start with the most important features first, make sure that feature works just as expected and once the customers are happy with what you have build then continue with other features and eventually a complete product.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmQRwBxIlL7F17o7PXbVFg1v6-HOeQwYiHe9kct-fCGZ6sbljFyEOspZmqHdAdw7TH-Nt_SHs0mRwusIUedjkJsP4x8ztMseGdOkeSLpYB76GQv46xlgIcqnRVrBygDDHPSFMtn2fDzHA/s1600/Screen+Shot+2019-03-05+at+11.42.33+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="864" data-original-width="1390" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmQRwBxIlL7F17o7PXbVFg1v6-HOeQwYiHe9kct-fCGZ6sbljFyEOspZmqHdAdw7TH-Nt_SHs0mRwusIUedjkJsP4x8ztMseGdOkeSLpYB76GQv46xlgIcqnRVrBygDDHPSFMtn2fDzHA/s640/Screen+Shot+2019-03-05+at+11.42.33+PM.png" width="640" /></a></div>
<br />
<br class="Apple-interchange-newline" /><br />
<h3 style="text-align: left;">
Focus </h3>
It's the motion of your mind and body (how you feel at the moment) helps you learn things faster. <b>Information combined with Emotions becomes a long term memory</b>.<br />
<br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com1tag:blogger.com,1999:blog-5061588868263419894.post-64334940211073705962018-07-30T14:45:00.000+05:302018-07-30T14:45:16.957+05:30Javascript ES6 - lexical scope of this <div dir="ltr" style="text-align: left;" trbidi="on">
In Javascript every function brings its own 'this' context. The situation becomes difficult to work with when there are many functions inside function which complicates the context of 'this'. The ES6 fat arrow (=>) passes the lexical scope of parent 'this' to all child functions -<br />
<br />
Example:<br />
<pre class="brush:js">function parentFunction(){
this.add = 0;
this.addAnother = function(){
this.addOne = setTimeout(function(){
console.log(++this.add);
}, 1000)
}
}
var funcObj = new parentFunction();
funcObj.addAnother(); // NaN
</pre>
<br />
It outputs to 'NaN' because the 'this' context here 'console.log(++this.add);' is scoped to setTimeout function.<br />
<br />
To avoid this, the ES5 solution is to use the classic 'var that = this' -<br />
<pre class="brush:js">function parentFunction(){
this.add = 0;
var that = this;
this.addAnother = function(){
this.addOne = setTimeout(function(){
console.log(++that.add);
}, 1000)
}
}
var funcObj = new parentFunction();
funcObj.addAnother();
</pre>
<br />
Now, this works perfectly fine, but the new ES6 fat arrow works even better by passing the lexical scope of parent 'this' to all child functions -<br />
<pre class="brush:js">function parentFunction(){
this.add = 0;
this.addAnother = () => {
this.addOne = setTimeout(() => {
console.log(++this.add);
}, 1000)
}
}
var funcObj = new parentFunction();
funcObj.addAnother();
</pre>
<br />
The traditional ES5 'this' creates a new scope of 'this' in each function which is why we were getting the 'NaN' because the 'this' in setTimeout function was scoped to the setTimeout function alone.<br />
<br />
With the fat arrow, the 'this' in setTimeout refers to the lexical scope of parent 'this'.<br />
<br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-40538656434719115202018-07-27T21:47:00.000+05:302018-07-27T21:47:23.869+05:30Javascript: Var vs Let vs Const<div dir="ltr" style="text-align: left;" trbidi="on">
The var, let and const game is all about their scope (the location where they are available to the developers). Put it simply -<br />
<ul style="text-align: left;">
<li><b>Var has a functional scope (local and global/window),</b> also it goes all the way up till the window object to find the declaration. Var is also a function scope (they are available inside the function they are declared in) </li>
<li><b>Let has a block level scope.</b> It stays within the curly braces. Let allows re-assigning its values </li>
<li><b>Const also has a block level scope. </b>Use const if you do not need to change its value </li>
</ul>
<br />
Let's go with examples:<br />
<br />
<b>Var:</b><br />
<pre class="brush:js">for(var i = 0; i < 10; i++){
console.log(i);
}
</pre>
It's normal to consider that the scope of 'var i' would be available inside the curly braces of for loop. However, the 'var i' is also accessible outside of the for loop.<br />
<pre class="brush:js">for(var i = 0; i < 10; i++){
console.log(i);
}
console.log('After loop is over ' +i); //logs 10
</pre>
<br />
It's completely valid because of the concept of 'Hoisting'. All variables in JavaScript are hoisted on top of the function - something like this:
<br />
<pre class="brush:js">var i;
for(i = 0; i < 10; i++){
console.log(i);
}
console.log('After loop is over ' +i);
</pre>
<br />
This is because there is only one type of scope in ES5 - that is Function Scope<br />
<pre class="brush:js">function func(){
for(var i = 0; i < 10; i++){
console.log(i);
}
}
func();
console.log('After the function ' +i); // throws an error, because var i is not accessible
</pre>
<br />
And if you don't declare the var keyword inside the function, the JS will hoist the var at the window/global level and it will be accessible everywhere -<br />
<pre class="brush:js">var i; // hoists in global scope
function func(){
for(i = 0; i < 10; i++){ // if you don't mention 'var i'
console.log(i);
}
}
func();
console.log('After the function ' +i); // logs 10
</pre>
<br />
<b>Let:</b><br />
Let will never have the issues like var, because let has a block level scope which means it doesn't work outside of that block of code, or outside of those curly braces -<br />
<pre class="brush:js">
for(let i = 0; i < 10; i++){
console.log(i);
}
console.log('After loop is over ' +i); // doesn't work
</pre>
<br />
But you can re-assign the values of let -<br />
<pre class="brush:js">
let i = 'hi';
i = 55;
console.log(i); // logs 55
</pre>
<br />
<b>Const:</b><br />
Changing const value is not possible -<br />
<pre class="brush:js">
const i = 10;
i = 55;
console.log(i); // throws typeError
</pre>
<br />
But, it allows a little flexibility to change the property of const object -<br />
<pre class="brush:js">
const i = {
k: 10
}
i.k = 55;
console.log(i); // logs k:55
</pre>
<br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com1tag:blogger.com,1999:blog-5061588868263419894.post-23340672857707866172018-05-20T18:38:00.003+05:302018-05-20T18:38:15.333+05:30Get form fields value using jQuery<div dir="ltr" style="text-align: left;" trbidi="on">
In jQuery the <a href="http://api.jquery.com/val/" target="_blank">.val()</a> method is used to get form field values from input, textarea, select etc. Use the <a href="http://api.jquery.com/checked-selector/" target="_blank">:checked</a> method for select, checkbox, and radio buttons.<br />
<br />
<b>Here’s a Fiddle:</b><br />
<br />
<iframe src="https://jsfiddle.net/va7fxrsb/embedded/js,html,result/" style="height: 400px; width: 100%;"></iframe>
</div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com1tag:blogger.com,1999:blog-5061588868263419894.post-10842615349753316572015-12-04T00:55:00.001+05:302015-12-09T09:43:33.304+05:30JavaScript Constructor Prototype <div dir="ltr" style="text-align: left;" trbidi="on">
At first it's important to understand that in JavaScript every function is an Object. Ok - then, what is a Constructor function?<br />
<br />
The Construction function in javascript is just like any other function. Except, the convention it follows - <b>Capitalization</b>. The first character is in capital format. Another difference is that it uses the '<a href="http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/" target="_blank">this</a>' keword of javascript, which is the most important and confusing keyword of all.<br />
<br />
This is how we create the constructor function:<br />
<pre class="brush:js">function Student(name){
this.name = name;
this.getName = function(){
return this.name;
}
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");
console.log(s1.getName()); //Leo
console.log(s2.getName()); //Lara
</pre>
This is not an appropriate way because if you create 500 Student objects then there will be 500 copies of the getName() function in memory.<br />
<br />
<b>Approach 2:</b><br />
<pre class="brush:js">function Student(name){
this.name = name;
}
var s1 = new Student("Leo");
s1.getName = function(){
return this.name;
}
var s2 = new Student("Lara");
console.log(s1.getName()); //Leo
console.log(s2.getName()); //TypeError: s2.getName is not a function
</pre>
The problem with this approach is that you have to repeat the same function for each object you create which will be arror prone.<br />
<br />
<b>Approach 3:</b><br />
<pre class="brush:js">function Student(name){
this.name = name;
}
Student.getName = function(){
return this.name;
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");
console.log(s1.getName()); //TypeError: s1.getName is not a function
console.log(s2.getName()); //
</pre>
The problem with this approach is that our newly created objects don't have access to the getName function.<br />
<br />
Let's use the<b> prototype property</b> to associate the function<br />
<pre class="brush:js">function Student(name){
this.name = name;
}
Student.prototype.getName = function(){
return this.name;
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");
console.log(s1.getName()); //Leo
console.log(s2.getName()); //Lara
</pre>
<br />
1. The benefits of this approach is that no matter how many objects you create, functions are loaded only once in the memory.<br />
2. It allows you to override the function if necessary<br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-6857494877742108112015-12-03T23:57:00.001+05:302015-12-09T00:02:54.845+05:30JavaScript: Prototype Object Vs Reference Object Explained<div dir="ltr" style="text-align: left;" trbidi="on">
What is an Object?<br />
It is a set of key and value pairs. You can use any number of keys with any name as long as it is a String. And each key can be associated with any value, those values can be of any Types, such as: Primitive Types, Function Objects and object itself.<br />
<pre class="brush:js">var myObject = {
a: undefined, //Primitive
b: null, //Primitive
c: true, //Primitive
d: "foo", //Primitive
e: 4.33, //Primitive
f: function bar() { /**/ }, //Object
g: {
h: baz
} //Object
}
</pre>
<br />
<b>The difference:</b><br />
<br />
In case of Objects - values are passed by reference, and the changes are <b>bi-directional</b>:<br />
<pre class="brush:js">var a = { x: 1, y: 2}
var b = a;
console.log(b); // Object {x: 1, y: 2}
//
b.x = 10;
console.log(a.x); // 10
//
a.y = 20;
console.log(b.y); //20
</pre>
<br />
While in Primitive - the values are passed by value, and the changes are <b>uni-directional</b>:<br />
<pre class="brush:js">//Prototype Object
var object1 = {x: 11, y: 22};
var object2 = Object.create(object1);
console.log(object2); //Object {}
//
object2.x = 100;
console.log(object1.x); //11
console.log(object2.x); //100
//
object1.y = 200;
console.log(object2.y); //200
console.log(object1.y); //200
</pre>
<br />
Fiddle: <a href="http://jsfiddle.net/sL6q0742/" target="_blank">http://jsfiddle.net/sL6q0742/</a><br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com18tag:blogger.com,1999:blog-5061588868263419894.post-91595321762315758572014-12-28T21:34:00.000+05:302014-12-28T23:01:53.822+05:30Vertical text / tabs with CSS3 transform matrix<div dir="ltr" style="text-align: left;" trbidi="on">
These days the UI trends are changing rapidly, everyone is trying to implement something different than regular. For a long time we have always implemented the tabs in horizontal format, we did try to keep the tabs in vertical format but it wasn't easily possible with creepy IE browsers. CSS3 transforms have made the web a lot different than before. Scaling, skewing, rotating, translates are doing beautiful magic with their capabilities.<br />
<br />
Today, implementing vertical text / tabs is possible with CSS3 transform matrix. Here is the code -<br />
<br />
<b>Browser compatibility:</b> IE 9+<br />
<br />
<b>HTML:</b>
<br />
<pre class="brush:xml"><div class="tabs-vertcal">
<ul class="tabs clearfix">
<li class="tab">Tab 3</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 1</li>
</ul>
</div>
</pre>
<br />
<b>CSS:</b>
<br />
<pre class="brush:css">.tabs-vertcal{
transform-origin: 0% 0% 0px;
transform: matrix(0, -1, 1, 0, 0, 350);
}
.tabs{
list-style-type: none;
}
.tab{
float: left;
width: 92px;
padding: 6px;
border: 1px solid pink;
background: indigo;
color: white;
text-align: right;
}
</pre>
<br />
Demo: <a href="http://jsfiddle.net/oy3gnuxr/1/" target="_blank">http://jsfiddle.net/oy3gnuxr/1/</a><br />
<br />
<iframe src="http://jsfiddle.net/oy3gnuxr/1/embedded/result,html,css/" style="height: 400px; width: 100%;"></iframe>
<br />
<br />
Note: It's just a vertical text for now, I'll add the tabs functionality with jQuery soon. <br />
<br />
<br /></div>Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-62917358453939664812014-11-20T18:27:00.001+05:302014-11-20T18:36:32.217+05:30CSS Tabs Navigation Tricks <div dir="ltr" style="text-align: left;" trbidi="on">
Developing a tabs navigation with CSS holds some simple tricks, but most of the front-end guys end up getting the results in an inappropriate way. Here's what you need to know about it -<br />
I. The <span class="html-elem">margin-bottom: -1px</span> to the <span class="html-elem"><li></span> element<br />
II. The border and background to the <span class="html-elem"><a></span> element<br />
III. Change in border and background in the <span class="html-elem"><a></span> element when <span class="html-elem"><li></span> has <span class="html-elem">.active</span> class<br />
<br />
<b>HTML: </b><br />
<pre class="brush:xml"><ul>
<li class="active"><a href="">Tab 1</a></li>
<li><a href="">Tab 2</a></li>
<li><a href="">Tab 3</a></li>
<li><a href="">Tab 4</a></li>
<li><a href="">Tab 5</a></li>
</ul>
</pre>
<b>CSS: </b><br />
<pre class="brush:css">ul{ margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ddd;
}
ul:before, ul:after{
content: ""; display: table;
}
ul:after{
clear: both;
}
/**/
ul li{
float: left;
margin: 0 4px -1px 4px; /*Trick 1*/
}
ul li a{
display: block;
text-decoration: none;
padding: 10px 15px;
border: 1px solid transparent; /*Trick 2*/
background: transparent; /*Trick 2*/
}
ul li a:hover{
background: #eee;
}
ul li.active a{
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
border-bottom: 1px solid transparent; /*Trick 3*/
background: #fff; /*Trick 3*/
}
</pre>
<br />
<b>jQuery: </b><br />
<pre class="brush:js">$(function(){
$('li a').on('click', function(e){
e.preventDefault(); // to avoid page refresh because a elements have # in href
$('li').removeClass('active');
$(this).parent('li').addClass('active');
});
});
</pre>
<br />
<br />
<b>Demo:</b> <a href="http://jsfiddle.net/dipaks2011/o35c8yxt/" target="_blank">http://jsfiddle.net/dipaks2011/o35c8yxt/</a><br />
<br />
<b>Note:</b> The fiddle demo is creating a ghost border on the right side of the tabs which doesn't appear in real HTML page.<br />
<br />
<br /></div>Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com1tag:blogger.com,1999:blog-5061588868263419894.post-51635119166934259152014-11-15T20:47:00.002+05:302014-11-20T15:06:36.722+05:30JavaScript text selection popover <div dir="ltr" style="text-align: left;" trbidi="on">
Those who have read some articles on <a href="https://medium.com/@trek/last-week-i-had-a-small-meltdown-on-twitter-about-npms-future-plans-around-front-end-packaging-b424dd8d367a" target="_blank">Medium.com</a> are aware of how they can select text anywhere on a page and share it on Twitter or write a short comment about the selected text right on that page.<br />
<br />
That's a nice popover to have, if the requirement is to select the text and show some information related to it on the same spot. I thought of posting a simple demo of it here, so that others can use it.<br />
<br />
Here's the code <span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Mangal; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">–</span><br />
<br />
<b>HTML:</b><br />
<pre class="brush:xml"> <article id="textDescription">
Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.
</article></pre>
<b>CSS:</b><br />
<pre class="brush:css">::selection{
background: SeaGreen;
color: White;
}
::-moz-selection{
background: SeaGreen;
color: White;
}
#textDescription{
line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px;
}
.selectedText{
position: relative;
background-color: SeaGreen; color:#fff; line-height: 1.2em;
}
.popDiv{
background: ForestGreen; color: white; padding: 6px; width: 180px; height: 80px;
position: absolute; top: 18px; left: 0;
border-radius: 4px; box-shadow: 2px 3px 4px #444;
-webkit-animation: slideIn .5s;
animation: slideIn .5s;
}
@-webkit-keyframes slideIn{
from{
top: 8px; opacity: 0; height: 40px;
}
to{
top: 18px; opacity: 1; height: 80px;
}
}
@-moz-keyframes slideIn{
from{
top: 8px; opacity: 0; height: 40px;
}
to{
top: 18px; opacity: 1; height: 80px;
}
}
@keyframes slideIn{
from{
top: 8px; opacity: 0; height: 40px;
}
to{
top: 18px; opacity: 1; height: 80px;
}
}
</pre>
<b>JavaScript / jQuery:</b><br />
<pre class="brush:js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
var parentContainerId = "textDescription"
if(!window.CurrentSelection){
CurrentSelection = {}
}
CurrentSelection.Selector = {}
//get the current selection
CurrentSelection.Selector.getSelected = function(){
var sel = '';
if(window.getSelection){
sel = window.getSelection()
}
else if(document.getSelection){
sel = document.getSelection()
}
else if(document.selection){
sel = document.selection.createRange()
}
return sel
}
//function to be called on mouseup
CurrentSelection.Selector.mouseup = function(){
var st = CurrentSelection.Selector.getSelected()
if(document.selection && !window.getSelection){
var range = st
range.pasteHTML("<span class="selectedText">" + range.htmlText + "</span>");
}
else{
var range = st.getRangeAt(0)
var newNode = document.createElement("span");
newNode.setAttribute("class", "selectedText");
range.surroundContents(newNode);
//
var getTitle = newNode.innerHTML;
newNode.setAttribute("title", getTitle);
//
var popDiv = document.createElement('span');
popDiv.setAttribute('class', 'popDiv');
popDiv.innerHTML = getTitle;
if(newNode.innerHTML.length > 0) {
newNode.appendChild(popDiv);
}
//Remove Selection: To avoid extra text selection in IE
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
else if (document.selection){
document.selection.empty();
}
//
}
}
$(function(){
$("#"+parentContainerId).on('mouseup', function(){
$('span.selectedText').contents().unwrap();
$(this).find('span.popDiv').remove();
});
$("#"+parentContainerId).bind("mouseup",CurrentSelection.Selector.mouseup);
})
</pre>
<br />
Demo: <a href="http://jsfiddle.net/dipaks2011/uz0gsu8a/1/" target="_blank">http://jsfiddle.net/dipaks2011/uz0gsu8a/1/</a> <br />
<br />
<iframe src="http://jsfiddle.net/dipaks2011/uz0gsu8a/1/embedded/result,js,html,css/" style="height: 600px; width: 100%;"></iframe><br />
<br />
<b>Related Posts:</b><br />
<br />
jQuery tab navigation:<br />
<a href="http://dipaksblogonline.blogspot.in/2012/03/simple-jquery-tab-navigation.html">http://dipaksblogonline.blogspot.in/2012/03/simple-jquery-tab-navigation.html</a><br />
<br />
Defer third party scripts:<br />
<a href="http://dipaksblogonline.blogspot.in/2012/06/defer-third-party-scriptsads-until.html">http://dipaksblogonline.blogspot.in/2012/06/defer-third-party-scriptsads-until.html</a><br />
<br />
Using multiple iScrolls in one page:<br />
<a href="http://dipaksblogonline.blogspot.in/2013/06/using-multiple-iscroll-in-one-page.html">http://dipaksblogonline.blogspot.in/2013/06/using-multiple-iscroll-in-one-page.html</a><br />
<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com1tag:blogger.com,1999:blog-5061588868263419894.post-18593535344568534722014-09-17T14:39:00.001+05:302014-11-20T15:08:16.007+05:30HTML5 details element <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Have you ever wondered if you could achieve that <a href="http://jqueryui.com/accordion/" target="_blank">jQuery Accordion widget</a> effect without jQuery or JavaScript? Did you think it will be ever possible to create it with just HTML? If no, well, you can achieve that with the HTML5 <span class="html-elem"><details></span> element. <br />
<br />
The details element is used as a widget to show/hide additional information.<br />
<pre class="brush:xml"><details>
<summary>Click me to toggle more information</summary>
<div>
The details element is used as a widget to show/hide additional information.</div>
</details>
</pre>
Demo: <a href="http://jsfiddle.net/8mthoj5g/" target="_blank">http://jsfiddle.net/8mthoj5g/</a> <br />
<h4>
Attributes:</h4>
It comes with one additional attribute that is 'open'. By default it appears in closed state, but if you want to keep the hidden information visible on-load, you can use the 'open' attribute -<br />
<pre class="brush:xml"><details open="">
<summary>Click me to toggle more information</summary>
<div>
The details element is used as a widget to show/hide additional information.</div>
</details>
</pre>
Demo: <a href="http://jsfiddle.net/8mthoj5g/1/" target="_blank">http://jsfiddle.net/8mthoj5g/1/</a><br />
<h4>
Nesting:</h4>
Nesting multiple <span class="html-elem">details</span> in <span class="html-elem">details</span> is possible - <br />
<pre class="brush:xml"><details>
<summary>Click me to toggle more information</summary>
<div>
The details element is used as a widget to show/hide additional information.</div>
<details>
<summary>More links to help</summary>
<div>
<a href="https://www.blogger.com/null">Home</a><br />
<a href="https://www.blogger.com/null">Articles</a><br />
<a href="https://www.blogger.com/null">Updates</a>
</div>
</details>
</details>
</pre>
Demo: <a href="http://jsfiddle.net/8mthoj5g/2/" target="_blank">http://jsfiddle.net/8mthoj5g/2/</a><br />
<h4>
Styling:</h4>
This is the area where you can make the widget look beautiful with CSS. If you want to style the marker you can use <span class="html-elem">::-webkit-details-marker</span> pseudo class -<br />
<pre class="brush:css">details{
border: 1px solid #666;
border-radius: 4px;
margin: 0 0 4px 0;
}
summary{
background: linear-gradient(to top, #f1efef 0%, #e8e9e9 50%, #e8e8e8 100%);
padding: 8px;
outline: none;
}
.more-info{
border-top: 1px solid #666;
padding: 8px;
}
details[open] summary{
background: none;
}
summary::-webkit-details-marker {
color: #818b94;
}
</pre>
Demo: <a href="http://jsfiddle.net/czs29fd3/" target="_blank">http://jsfiddle.net/czs29fd3/</a><br />
<br />
To replace the default marker with some fancy icon, you can use the CSS <span class="html-elem">:before and :after pseudo</span> classes with summery element, but before using a replacement for marker you must hide it first -<br />
<pre class="brush:css">summary::-webkit-details-marker {
display: none; /*Hide the default marker*/
}
summary:after {
content: "+";
float: left;
font-size: 1em;
font-weight: bold;
width: 22px;
}
details[open] summary:after {
content: "-";
}
</pre>
What about the browsers that don't support details element?<br />
Use this <a href="https://mathiasbynens.be/notes/html5-details-jquery" target="_blank">Bulletproof HTML5 <details> fallback using jQuery</a> by @<a href="https://twitter.com/mathias" target="_blank">MathiasBynens</a></div>
<h4>
Browser Support:</h4>
You can see the latest browser support at <a href="http://caniuse.com/#search=details" target="_blank">caniuse.com</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixX0AAjWSCtrpTo9cq3bobeE0r3awTx8CV9nplRubmkw9rKslzrF55AyGSqRaYeazvtEJ9fJ6eeX5oYA4Cq_OeI0iuetMCg3xuD8GX4Knm5Kj8UFFDknTGq6kLX0KXyXJR6tWP8BiBv2Qj/s1600/details-browser-support.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixX0AAjWSCtrpTo9cq3bobeE0r3awTx8CV9nplRubmkw9rKslzrF55AyGSqRaYeazvtEJ9fJ6eeX5oYA4Cq_OeI0iuetMCg3xuD8GX4Knm5Kj8UFFDknTGq6kLX0KXyXJR6tWP8BiBv2Qj/s1600/details-browser-support.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-62898962260781958532014-08-18T12:34:00.002+05:302014-11-20T15:10:49.003+05:30Understanding HTML5 Pattern Attribute <div dir="ltr" style="text-align: left;" trbidi="on">
<b>What is HTML5 Pattern?</b><br />
The HTML5 pattern attribute is nothing but a <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions" target="_blank">JavaScript Regular Expression</a>. It is used to match form field's value against the specified format. Patterns are used to validate email addresses, dates, credit card numbers, zip codes and so on.<br />
<br />
For example, the following pattern requires one number and three uppercase character, if you didn't enter the said format it will prompt you with a message:<br />
<pre class="brush:xml"> pattern="[0-9][A-Z]{3}"
</pre>
Demo: <a href="http://jsfiddle.net/aoq22s54/" target="_blank">http://jsfiddle.net/aoq22s54/</a><br />
<br />
Similarly, if you have a field to accept only five numeric values, use this pattern: <br />
<b>pattern="\d{5}"</b> in this pattern the '\d' stands for numeric values and '{5}' to accept only five characters.<br />
Demo: <a href="http://jsfiddle.net/fhcox947/" target="_blank">http://jsfiddle.net/fhcox947/</a><br />
<br />
<b>Let's validate a DD/MM/YYYY date format:</b><br />
Here's the pattern we need to use for validating this date format - <b>pattern="(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}" </b><br />
<br />
The first section of this pattern <b>(0[1-9]|[12][0-9]|3[01])</b> says - use 0 before the first value 1-9 except when the first value is 1/2, and use 0-9 after the first 1/2 value, and when the first values is 3 use only 0/1 after it. Sounds simple? I guess yes :)<br />
Demo: <a href="http://jsfiddle.net/j8qpe3ca/" target="_blank">http://jsfiddle.net/j8qpe3ca/</a><br />
<br />
I hope you have understood how the patterns work<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Mangal; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">—</span>please refer this <a href="http://html5pattern.com/Postal_Codes" target="_blank">HTML5 pattern website</a> for some common regular expression styles.<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-79128060453412543742014-08-11T11:08:00.000+05:302014-11-20T16:40:49.817+05:30Language Specific CSS - The :lang attribute<div dir="ltr" style="text-align: left;" trbidi="on">
Do you know the German words are much longer than English? And the Arabic language is read from right-to-left? How about using different font family for Chinese version of your website? Oh! That would be awesome! Can I achieve that via CSS?<br />
<br />
Yes! With the help of the :lang(X) pseudo class and with the [lang="x"] attribute selector.<br />
<pre class="brush:css">body{
font: normal 14px/1.1em "Lucida Sans Unicode", "Lucida Sans", Arial, Verdana, sans-serif;
color: RoyalBlue;
}
/*For German version*/
:lang(de) body{ /*or - html[lang="de"] body{}*/
color: ForestGreen;
}
</pre>
A demo without the lang attribute: <a href="http://jsfiddle.net/a5Ltfge0/" target="_blank">http://jsfiddle.net/a5Ltfge0/</a><br />
A demo with German version: <a href="http://jsfiddle.net/2nkmjzv6/" target="_blank">http://jsfiddle.net/2nkmjzv6/</a><br />
<br />
We can also use it with any container element such as: div, section, article, span and so on. For example<br />
<pre class="brush:xml"><span lang="de">German Content</span>
</pre>
<pre class="brush:css">span[lang="de"]{
color: red;
}
</pre>
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-80529545620015237302014-07-13T15:14:00.000+05:302016-05-12T10:39:05.183+05:30Installing Grunt and Plugins<div dir="ltr" style="text-align: left;" trbidi="on">
Installing <a href="http://gruntjs.com/" target="_blank">Grunt Task Runner</a> is simple enough when you know how to install it, but it's quite frustrating when you are installing it the first time. Once you started using grunt, you will never leave it. Here are some simple steps to install and run.<br />
<b><br /></b>
<b>1.</b> Download and install NodeJS from <a href="http://nodejs.org/download/" target="_blank">here</a>.<br />
Once you are done with the installation of NodeJS, create folder somewhere on your hard-drive and name it as <span class="html-elem">first-grunt-project</span>. Now, create a project structure inside the first-grunt-project folder as:<br />
<pre class="brush:xml">-first-grunt-project
-- dev
-- js
-- styles
-- less
-- variables.less
-- colors.less
-- style.less /*we need to import all less files in this file with @import "variables.less" and so on
-- css
-- style.css
-- index.html
</pre>
Now right click inside the root folder that is <span class="html-elem">first-grunt-project</span> and select the option <span class="html-elem">Open command window here</span>. Since you have already installed NodeJS just verify the version with a command <span class="html-elem">node --version</span> that should show you the NodeJS version you have installed.<br />
<br />
<b>2.</b> Create a new file called <span class="html-elem">package.json</span> and save it at the root directory:<br />
first-grunt-project<br />
-- package.json<br />
Add this code in package.json file and save it. You can check the current version of package.json <a href="http://semver.org/" target="_blank">here</a>. More information on package.json can be read at the <a href="https://www.npmjs.org/doc/json.html" target="_blank">npm website</a>.<br />
<pre class="brush:js">{
"name": "grunt-project",
"version": "1.2.5"
}
</pre>
<b>3.</b> Go to command window and type <span class="html-elem">npm install -g grunt-cli,</span> this will install the cli for you.<br />
<div class="notes-tips">
Note: npm stands for Node Package Manager.<br />
And cli stands for Command Line Interface</div>
<br />
<b>4.</b> Create a new js file and save it as <span class="html-elem">Gruntfile.js</span>. Add the following code in it. This code is to compile LESS files to CSS. Refer the video below for installing JavaScript plugins. <br />
<pre class="brush:js">module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"styles/style.css": "styles/less/styles.less"
}
}
},
watch: {
styles: {
files: ['styles/less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
//plugins
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
//tasks
grunt.registerTask('default', ['less','watch']);</pre>
<pre class="brush:js">};
</pre>
<b>5.</b> Go to command window and type <span class="html-elem">npm install grunt --save-dev</span> this will install grunt for you.<br />
<br />
You are ready with the installation of grunt, you can confirm that by running <span class="html-elem">grunt --version</span> command. After installing grunt, install the two <a href="http://gruntjs.com/plugins" target="_blank">plugins</a> we are using in the gruntfile.js above for compiling LESS file - that are <a href="https://www.npmjs.org/package/grunt-contrib-less" target="_blank">contrib less</a> and <a href="https://www.npmjs.org/package/grunt-contrib-watch" target="_blank">contrib watch</a>.<br />
<br />
<b>Videos:</b><br />
All about packge.json and gruntfile.js:<br />
<iframe allowfullscreen="" height="281" mozallowfullscreen="" src="//player.vimeo.com/video/66057352" webkitallowfullscreen="" width="640"></iframe><br />
<br />
All about creating a basic project with Grunt:<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/m_-MjkNNl7E" width="640"></iframe><br />
<br />
<div style="display: none;">
<b>Create another folder and try with installing grunt first and the cli and then the next steps from here - http://ericnish.io/blog/compile-less-files-with-grunt and see the effect</b>
</div>
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-3428611842701849092014-06-21T15:35:00.000+05:302014-06-21T15:40:33.394+05:30Need a candidate who can control DOM<div dir="ltr" style="text-align: left;" trbidi="on">
Document Object Model (DOM) is an Application Programming Interface (API) for HTML and XML. I was reading <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank">this article at Mozilla Developer Network</a> (MDN) and it has mentioned that DOM is a fully object-oriented representation of web page and we can modify its content and control the visual representation (CSS/styling) by using client side scripting languages like JavaScript.<br />
<br />
If the DOM can be controlled by JavaScript for both modifying the content and to control its visual appearance then why a front-end developer is always deprived from writing JavaScript? You may say: No. He/she writes JavaScript for showing/hiding elements, and to create a modal dialog, or to develop some widgets like tabs and accordions. But, we never let him/her write <b>business logic</b>. Wait. That’s the point where you are under-utilizing your resources. Let them write the business logic. Everyone can learn, everyone can improve, and everyone can contribute. Just give them that opportunity—start with small. <br />
<br />
A front-end developer whose job is to create DOM is not allowed to control it with JavaScript and the JavaScript developer who knows very less about DOM is allowed to control it. Isn't it strange? Are we actually letting the right people do the right job, or we are making the working system more complex? Wouldn't it be great if all front-end developers know JavaScript and all JavaScript developers understand the DOM as a first step in development?<br />
<br />
It is absolutely necessary to create such all-rounder developers in the organization itself instead of separating these two essential parts of DOM.<br />
<br />
The requirements are changing in IT industry today. Most of the companies are looking for the candidates who have in-depth knowledge of the DOM and JavaScript. A few people succeed in it and the majority settles for the one half of it compromising the other. How can we expect such a blend when we haven’t created one?<br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-78676187017427781392014-06-16T14:59:00.000+05:302014-06-17T11:42:34.804+05:30Basic HTML structure/skeleton with CSS Flexbox Layout<div dir="ltr" style="text-align: left;" trbidi="on">
We need some kind of miracle to get rid of IE8 and IE9 and start development with the<b> IE 10+</b> version. I do understand<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">—</span>It will take some more years for it to happen. But, if you are working on a project that needs compatibility only for the latest and greatest browsers<span style="font-family: Calibri, sans-serif; font-size: 15px; line-height: 16.866666793823242px;">—</span>you can start with flexbox layout right now. Most of the flexbox properties work very well in IE 10 with <b>-ms-</b> prefixes. Here's more on <a href="http://msdn.microsoft.com/en-in/library/ie/hh673531(v=vs.85).aspx" target="_blank">Flexible box ("Flexbox") layout in Internet Explorer 10</a>.<br />
<br />
Keeping the restriction in mind I thought of putting up a plain HTML page skeleton with CSS Flexbox which works as a liquid layout without any width and height properties specified.<br />
<br />
My previous post [ <a href="http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html" target="_blank">CSS Flexbox explained with examples</a> ] focuses on the real-world scenarios where the flexbox properties work as life-saver. With it, I can proudly say No to the floats, widths and heights. Also, to the overflow in some cases so that I don’t have to worry about the elements overlapping or adjusting the widths pixel-by-pixel to keep them aligned. Flexbox does it for me.<br />
<br />
Here is a Fiddle: <a href="http://jsfiddle.net/KKp2c/5/" target="_blank">http://jsfiddle.net/KKp2c/5/</a><br />
<br />
<iframe src="http://jsfiddle.net/KKp2c/5/embedded/result,html,css/" style="height: 400px; width: 100%;"></iframe><br />
<br />
<b>Related articles:</b><br />
- <a href="http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html" target="_blank">CSS Flexbox explained with examples</a><br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-37902908243563461492014-05-24T16:29:00.001+05:302014-09-15T16:13:29.531+05:30CSS Flexbox explained with examples<div dir="ltr" style="text-align: left;" trbidi="on">
The CSS flexbox layout is the widely discussed/suggested/encouraged/used layout of these days. You must be wondering why? Why is that many developers give that ah! look when they are advised to use flexbox? Well, it's because it provides the most efficient way of aligning, resizing, stretching the elements in the most appropriate way. It is a big help in laying out the dynamic layouts, because it stretches and shrinks depending on the available space. No JavaScript required.<br />
<br />
<b>Browser Support to flexbox</b>: <a href="http://caniuse.com/#search=flex" target="_blank">http://caniuse.com/#search=flex</a><br />
<br />
Here are some examples with the use cases:<br />
<br />
<b>1. Vertically center align content with CSS flexbox:</b> (align-items: center | justify-content: center; )<br />
Demo: <a href="http://jsfiddle.net/k72uf/" target="_blank">http://jsfiddle.net/k72uf/</a><br />
<br />
Vertically center aligning the content with CSS has been always a big issue for developers. From IE8 and above they could use display: table-cell; property, but the new and fancy flexbox gives more flexible way of vertically center aligning content. Here is the code: <br />
<pre class='brush:css'>
.flex-container{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
</pre>
<b>2. Flex Directions:</b> (flex-direction: row | row-reverse | column | column-reverse;)<br />
<br />
<b>flex-direction: row; </b>Demo: <a href="http://jsfiddle.net/x83Pu/" target="_blank">http://jsfiddle.net/x83Pu/</a><b> </b><br />
<pre class='brush:css'>
.flex-container{
display: flex;
flex-direction: row;
border: 2px solid SaddleBrown;
}
.flex-container div{
width: 100px;
height: 100px;
margin: 4px;
background: chocolate;
}
.wrap{
flex-wrap: wrap;
flex-flow: row wrap;
}
</pre>
<b>flex-direction: row-reverse; </b>Demo: <a href="http://jsfiddle.net/7UBTL/1/" target="_blank">http://jsfiddle.net/7UBTL/1/</a><br />
<pre class='brush:css'>
.flex-container{
display: flex;
flex-direction: row-reverse;
}
</pre>
<b>flex-direction: column; </b>Demo: <a href="http://jsfiddle.net/C3rdD/" target="_blank">http://jsfiddle.net/C3rdD/</a><br />
<pre class='brush:css'>
.flex-container{
display: flex;
flex-direction: column;
height: 350px;
border: 2px solid SaddleBrown;
}
.flex-container div{
width: 50px;
height: 50px;
margin: 4px;
background: chocolate;
}
.wrap{
flex-wrap: wrap;
align-content: flex-start;
}
</pre>
The reverse property for columns works same as the row-reverse. <br />
<br />
<b>3. Item orders:</b> (order: integer)<br />
By default the flex items are placed in source code order. The order property helps in controlling the order by which the child elements are placed in the flex container.<br />
Demo: <a href="http://jsfiddle.net/z96C7/" target="_blank">http://jsfiddle.net/z96C7/</a><br />
<pre class='brush:css'>
.container{
display: flex;
flex-direction: row;
border: 2px solid SaddleBrown;
}
.container *{
background: ForestGreen;
color: white;
margin: 4px;
flex-basis: 100px;
}
.container header{ order: 3; }
.container nav{ order: 1; }
.container article{ order: 2; }
</pre>
<br />
<b>4. Alignments: </b>(justify-content | align-items | align-self)<br />
<br />
<b>justify-content:</b> (flex-start | flex-end | center | space-between | space-around | inherit)<br />
Demo: <a href="http://jsfiddle.net/Kj9KY/" target="_blank">http://jsfiddle.net/Kj9KY/</a><br />
<pre class='brush:css'>
.flex{
display: flex;
margin: 0 0 30px 0;
border: 2px solid ForestGreen;
}
.flex div{
background: OliveDrab;
color: white;
width: 50px;
height: 50px;
margin: 4px;
}
.start{ justify-content: flex-start; }
.end{ justify-content: flex-end; }
.center{ justify-content: center; }
.space-between{ justify-content: space-between; }
.space-around{ justify-content: space-around; }
</pre>
<b>align-items:</b> (flex-start | flex-end | center | baseline | stretch)<br />
Demo: <a href="http://jsfiddle.net/2x4Xq/1/" target="_blank">http://jsfiddle.net/2x4Xq/1/</a><br />
<pre class='brush:css'>
.flex{
display: flex;
flex-direction: column;
margin: 0 0 30px 0;
height: 300px;
border: 2px solid ForestGreen;
}
.flex div{
background: OliveDrab;
color: white;
height: 50px;
width: 50px;
margin: 4px;
}
.start{ align-items: flex-start; }
.end{ align-items: flex-end; }
.center{ align-items: center; }
.baseline{ align-items: baseline; }
.stretch{ align-items: stretch; }
</pre>
<b>5. flex-basis:</b><br />
It specifies the initial size of the flex items. But, its behavior depends on the flex-direction property. If the flex-direction is set to row--the initial size works as width, and if the direction is set to column--the initial size works as column.<br />
Demo: <a href="http://jsfiddle.net/3Lamd/" target="_blank">http://jsfiddle.net/3Lamd/</a><br />
<pre class='brush:css'>
.flex{
display: flex; /*flex-direction: row;*/
border: 2px solid ForestGreen;
margin: 0 0 30px 0;
}
.flex div{
flex-basis: 100px;
background: OliveDrab;
color: white;
margin: 4px;
}
.column{ flex-direction: column; }
</pre>
<b>6. flex-grow:</b><br />
Demo: <a href="http://jsfiddle.net/V7hA3/" target="_blank">http://jsfiddle.net/V7hA3/</a><br />
<pre class='brush:css'>
.flex{
display: flex;
border: 2px solid ForestGreen;
}
.flex div{
flex-basis: 50px;
background: OliveDrab;
color: white;
margin: 4px;
}
.grow{ flex-grow: 3; }
</pre>
<b>7. flex-shrink:</b><br />
Demo: <a href="http://jsfiddle.net/GyBjQ/" target="_blank">http://jsfiddle.net/GyBjQ/</a><br />
<pre class='brush:css'>
.flex{
display: flex;
border: 2px solid ForestGreen;
}
.flex div{
flex-basis: 200px;
background: OliveDrab;
color: white;
margin: 4px;
}
.shrink{ flex-shrink: 3; }
</pre>
There are a few more properties like: align-self | flex-wrap | flex-flow. I have used some of these properties in the examples above, I will put some examples of these soon possible.<br />
<br /></div>Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-54074342119593124622014-04-21T08:25:00.000+05:302014-09-15T16:18:12.315+05:30Best shorthand to CSS border property<div dir="ltr" style="text-align: left;" trbidi="on">
When I started coding CSS I coded the border property as:<br />
<pre class='brush:css'>
.box{
border-width: 1px;
border-style: solid;
border-color: blue;
}
</pre>
And after a few months later I improved in coding the same property as shorthand:<br />
<pre class='brush:css'>
.box{
border: 1px solid blue;
}
</pre>
If the border colors needed to be different, or if the requirement is like - I need left, right, and top borders but not the bottom border. To this, I used the property as:<br />
<pre class='brush:css'>
.box{
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 0 none;
}
</pre>
The above method can be improved with the new/unknown CSS border shorthand:<br />
<pre class='brush:css'>
.box{
border-color: blue;
border-style: solid;
border-width: 1px 1px 0 1px; /*top right bottom left*/
}
</pre>
Check the demo: <a href="http://jsfiddle.net/X3QHc/" target="_blank">http://jsfiddle.net/X3QHc/ </a><br />
<br />
<b>Here's how it works: </b><br />
<pre class='brush:css'>
.box{
border-color: red green blue black; /*top right bottom left*/
border-style: solid dotted dashed double;
border-width: 6px 4px 2px 10px;
}
</pre>
Check the demo: <a href="http://jsfiddle.net/X3QHc/1/" target="_blank">http://jsfiddle.net/X3QHc/1/</a><br />
<br />
<b>Related Articles: </b><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/07/styling-input-type-file.html" target="_blank">Styling input type file</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2011/01/ie-78-stretching-background-image-to.html" target="_blank">IE 7/8 stretching background image to 100% width and height</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/05/change-parent-elements-background-image.html" target="_blank">Change parent elements background image position on child mouseover</a><br />
<br />
<br /></div>Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-7018975684904205662014-04-10T19:03:00.001+05:302014-04-10T19:03:51.754+05:30jQuery modal dialog popup window without plugin<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
Here's a simple jQuery Modal Dialog Popup Window that even works in IE7: <a href="http://jsfiddle.net/EDZQ8/" target="_blank">Demo</a><br />
<br />
<iframe src="http://jsfiddle.net/EDZQ8/embedded/result,html,js,css/" style="height: 550px; width: 100%;"></iframe><br />
<br />
<b>Related Articles:</b><br />
- <a href="http://dipaksblogonline.blogspot.in/2011/01/ie-78-stretching-background-image-to.html" target="_blank">IE 7/8 stretching background image to 100% width and height</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/06/html-div-vertically-center-align.html" target="_blank">HTML - DIV vertically center align image/elements</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/06/jquery-increasedecrease-number-in-input.html" target="_blank">jQuery increase/decrease number in input field</a><br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-57623863247345817042014-04-08T07:31:00.002+05:302014-09-24T15:43:48.359+05:30AngularJS show hide html elements<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<div>
<br /></div>
<div>
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 <a href="http://docs.angularjs.org/guide/controller" target="_blank">controllers</a> and implement it with <a href="http://docs.angularjs.org/api/ng/directive/ngClick" target="_blank">ng-click</a>, <a href="http://docs.angularjs.org/api/ng/directive/ngClass" target="_blank">ng-class</a>, <a href="http://docs.angularjs.org/api/ng/directive/ngShow" target="_blank">ng-show</a>, <a href="http://docs.angularjs.org/api/ng/directive/ngHide" target="_blank">ng-hide</a>. In this post I will write some simple and easy to understand examples for this most needed ng-hide and ng-show methods .</div>
<div>
<br /></div>
<div>
<b>Show Hide DIV on Click:</b> <a href="http://jsfiddle.net/5zZnE/" target="_blank">Demo</a><br />
<br />
<iframe src="http://jsfiddle.net/5zZnE/embedded/result,html,js,css/" style="height: 200px; width: 100%;"></iframe><br />
<br />
<b>Toggle DIV :</b> <a href="http://jsfiddle.net/e6UTd/" target="_blank">Demo</a> </div>
<div>
<br />
<iframe src="http://jsfiddle.net/e6UTd/embedded/result,html,js,css/" style="height: 200px; width: 100%;"></iframe><br />
<br />
<b>Toggle DIV with Animations:</b> <a href="http://jsfiddle.net/cppfvajd/" target="_blank">Demo</a><br />
<br />
<iframe src="http://jsfiddle.net/cppfvajd/embedded/result,html,js,css/" style="height: 200px; width: 100%;"></iframe><br />
<br />
Related Articles:<br />
- <a href="http://dipaksblogonline.blogspot.in/2014/04/angularjs-add-class-and-toggle-class.html" target="_blank">AngularJS Add Class and Toggle Class</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2014/02/angularjs-toggle-class.html" target="_blank">AngularJS Toggle Class with Animation</a><br />
<br />
<br /></div>
</div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-65279231162730752562014-04-05T00:01:00.003+05:302014-04-05T00:01:44.199+05:30Separate CSS for different browsers <div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.<br />
<br />
<b>Separate CSS for Mozilla Firefox - CSS only solution:</b><br />
@-moz-document url-prefix(){<br />
div{ color: red; }<br />
}<br />
<br />
<b>Separate CSS for IE version - with conditional comments:</b><br />
The traditional code:<br />
<script src="https://gist.github.com/dipaks2011/9980098.js"></script><br />
The <a href="http://html5boilerplate.com/" target="_blank">HTML5 BoilerPlate</a> code:<br />
<script src="https://gist.github.com/dipaks2011/9966972.js"></script><br />
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 - <br />
<b>.ie8 .className{ color: green; } </b>/* This css will be applied to IE8 only*/<br />
<b>.ie9 .className{ color: red; } </b>/* This css will be applied to IE9 only*/<br />
<br />
<b>Separate CSS for IE version - with jQuery:</b><br />
<b><br /></b>
<script src="https://gist.github.com/dipaks2011/9966996.js"></script><br />
Read more on <a href="http://api.jquery.com/jquery.browser/" target="_blank">jQuery.browser</a><br />
<br />
<b>Separate CSS for Windows OS Versions using javascript:</b><br />
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.<br />
<br />
<b>For Windows 8: </b><br />
<script src="https://gist.github.com/dipaks2011/9967021.js"></script><br />
<b>For Windows 7:</b><br />
<script src="https://gist.github.com/dipaks2011/9967026.js"></script><br />
<b>For Windows XP:</b><br />
<script src="https://gist.github.com/dipaks2011/9967032.js"></script><br />
Read more on <a href="http://msdn.microsoft.com/en-us/library/ms537503%28v=vs.85%29.aspx" target="_blank">understanding user-agent string</a><br />
<br />
<b>Related Articles:</b><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/06/html-div-vertically-center-align.html" target="_blank">Vertically center align image, DIV, and other html elements in IE 7 and IE 8</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/07/styling-input-type-file.html" target="_blank">Styling input type file</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2014/02/essential-css-pseudo-classes.html" target="_blank">Essential CSS Pseudo Classes</a><br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-45983639172854579452014-04-02T07:26:00.000+05:302014-04-02T18:04:34.971+05:30AngularJS Add Class and Toggle Class<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
<b>Add/Remove Class:</b><br />
The <a href="http://docs.angularjs.org/guide/directive" target="_blank">directive</a> you need to read to understand this <a href="http://jsfiddle.net/HCYge" target="_blank">example</a>:<br />
<a href="http://docs.angularjs.org/api/ng/directive/ngApp" target="_blank">ng-app</a> <a href="http://docs.angularjs.org/api/ng/directive/ngClick" target="_blank">ng-click</a> and <a href="http://docs.angularjs.org/api/ng/directive/ngClass" target="_blank">ng-class</a><br />
<br />
<iframe src="http://jsfiddle.net/HCYge/1/embedded/result,html,js,css/" style="height: 200px; width: 100%;"></iframe><br />
<br />
<br />
<b>Toggle Class Example 1:</b><br />
The <a href="http://docs.angularjs.org/guide/directive" target="_blank">directive</a> you need to read to understand this <a href="http://jsfiddle.net/L8LAT/" target="_blank">example</a>:<br />
<a href="http://docs.angularjs.org/api/ng/directive/ngController" target="_blank">ng-controller</a> <a href="http://docs.angularjs.org/api/ng/directive/ngApp" target="_blank">ng-app</a> <a href="http://docs.angularjs.org/api/ng/directive/ngClick" target="_blank">ng-click</a> and <a href="http://docs.angularjs.org/api/ng/directive/ngClass" target="_blank">ng-class</a><br />
<br />
<iframe src="http://jsfiddle.net/L8LAT/1/embedded/result,js,html,css/" style="height: 200px; width: 100%;"></iframe><br />
<br />
<b><br /></b>
<b>Toggle Class Example 2:</b><br />
The <a href="http://docs.angularjs.org/guide/directive" target="_blank">directive</a> you need to read to understand this <a href="http://jsfiddle.net/w42Qs/1/" target="_blank">example</a>:<br />
<a href="http://docs.angularjs.org/api/ng/directive/ngInit" target="_blank">ng-init</a> <a href="http://docs.angularjs.org/api/ng/directive/ngApp" target="_blank">ng-app</a> <a href="http://docs.angularjs.org/api/ng/directive/ngClick" target="_blank">ng-click</a> and <a href="http://docs.angularjs.org/api/ng/directive/ngClass" target="_blank">ng-class</a><br />
<br />
<iframe src="http://jsfiddle.net/w42Qs/2/embedded/result,html,js,css/" style="height: 200px; width: 100%;"></iframe><br />
<br /></div>
<b>Related Articles:</b><br />
- <a href="http://www.dipaksblogonline.blogspot.in/2014/02/angularjs-toggle-class.html" target="_blank">AngularJS Toggle Class with Animation</a><br />
<br />
<br />
<br /></div>Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-26976000396661803232014-03-22T23:39:00.002+05:302014-04-04T14:14:43.876+05:30The CSS3 multi-column layout<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
<b><span style="color: #b45f06;">Properties of multi-column layout:</span></b><br />
<b><br /></b>
<b>column-count: 3;</b><br />
Number of columns to be displayed.<br />
<br />
<b>column-width: 8em;</b><br />
Width of each column.<br />
<div style="column-width: 20em;">
</div>
<br />
<b>column-gap: 2em; </b><br />
The gap between each column.<br />
<div style="column-gap: 2em;">
</div>
<br />
<b>column-fill: auto; </b><br />
Is used to indicate that columns are filled in a consecutive manner.<br />
<br />
<b>column-fill: balance;</b><br />
Is used to indicate that content is equally divided between the number of columns defined.<br />
<br />
<b>column-span: all; </b><br />
Similar to the <a href="http://reference.sitepoint.com/html/td/colspan" target="_blank">colspan</a> in table layout. (This property is not supported in Firefox yet, but they will add the support soon.)<br />
<br />
<b>column-rule:</b> 1px solid #ccc;<br />
Sets border to the columns.<br />
<br />
These properties can also be used separately -<br />
column-rule-width: 1px<br />
column-rule-style: solid<br />
column-rule-color: #ccc<br />
<br />
<b>Shorthands:</b><br />
The shorthand is mainly used for <span style="color: #b45f06;">column-count</span> and <span style="color: #b45f06;">column-width</span> properties:<br />
columns: 3 20em; /* column-count column-width */<br />
<br />
<b>Browser Support:</b><br />
Check the browsers who support these properties at - <a href="http://caniuse.com/#search=column" target="_blank">When Can I Use</a><br />
And the old browsers who don't support multi-column layout they will happily ignore these properties.<br />
<br />
<b>Demo:</b><br />
<br />
<iframe src="http://jsfiddle.net/dipaks2011/KRfAn/embedded/css,html,result/" style="height: 600px; width: 100%;"></iframe><br />
<br />
<b>Note:</b><br />
The multi-column layout module is still a <a href="http://www.w3.org/TR/css3-multicol/" target="_blank">candidate recommendation</a>, but considering the implementation of these properties in major browsers it seems it will not take too long for W3C to approve it.<br />
<br />
Related Articles:<br />
- <a href="http://dipaksblogonline.blogspot.in/2014/02/essential-css-pseudo-classes.html" target="_blank">Essential CSS Pseudo Classes</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2013/04/css-media-query-min-width-vs-min-device.html" target="_blank">CSS Media Query min-width Vs min-device-width with meta viewport</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2013/04/grayscale-images-with-css3-filter.html" target="_blank">Grayscale images with CSS3 Filter Property</a><br />
- <a href="http://dipaksblogonline.blogspot.in/2012/01/indenting-second-line-of-li-list-items.html" target="_blank">CSS - Indenting Second Line of LI (List Items)</a><br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-62835745743638093662014-02-24T18:36:00.001+05:302014-04-23T13:59:53.917+05:30AngularJS Toggle Class with Animation<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
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. </div>
<br />
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.<br />
<br />
A quick <a href="http://jsfiddle.net/Mtg8L/2/" target="_blank">demo</a>:<br />
<br />
<iframe src="http://jsfiddle.net/Mtg8L/2/embedded/result,js,html,css/" style="height: 250px; width: 100%;"></iframe>
<br />
Open this fiddle in JSFiddle to check the files I used for this demo.<br />
<br />
<b>Related Articles: </b><br />
- <a href="http://www.dipaksblogonline.blogspot.in/2014/04/angularjs-add-class-and-toggle-class.html" target="_blank">AngularJS Add Class and Toggle Class</a><br />
<br />
<br /></div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0tag:blogger.com,1999:blog-5061588868263419894.post-28786831006862952742014-02-23T21:07:00.001+05:302014-02-23T21:13:42.980+05:30Essential CSS Pseudo Classes<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<div>
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.<br />
<br />
<b>:enabled and :disabled</b><br />
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.<br />
<br />
<iframe src="http://jsfiddle.net/dipaks2011/xfVcZ/embedded/css,html,result/" style="height: 150px; width: 100%;"></iframe><br />
<br />
<b>:empty</b><br />
Have you ever got into a situation where some dynamically added empty elements disturb the layout? Well, the :empty class is here to help<br />
<br />
<div>
<iframe src="http://jsfiddle.net/dipaks2011/6Aekf/embedded/css,html,result/" style="height: 150px; width: 100%;"></iframe></div>
<div>
<br /></div>
</div>
<div>
<b>:target</b><br />
: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.</div>
<div>
<br />
<iframe src="http://jsfiddle.net/dipaks2011/ae9mx/embedded/css,html,result/" style="height: 250px; width: 100%;"></iframe><br />
<br />
<b>:nth-child()</b><br />
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().<br />
<br />
<iframe src="http://jsfiddle.net/dipaks2011/HGv6Z/embedded/css,html,result/" style="height: 250px; width: 100%;"></iframe><br />
<br />
<b>:not()</b><br />
This Pseudo class tells browser to apply CSS to all elements except the on that is in the parentheses of :not() class.<br />
<br />
<iframe src="http://jsfiddle.net/dipaks2011/L34Dz/embedded/css,html,result/" style="height: 250px; width: 100%;"></iframe><br />
<div>
<br /></div>
</div>
<div>
<b>:hover</b></div>
<div>
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 – </div>
<div>
a{ }</div>
<div>
a:hover{}</div>
<div>
<br /></div>
<div>
We can easily include some simple classes in the same category - :focus, :active, :visited</div>
<div>
<br /></div>
<div>
<b>:before and :after</b></div>
<div>
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. </div>
<div>
<br /></div>
</div>
<div>
<iframe src="http://jsfiddle.net/dipaks2011/PDc88/2/embedded/css,html,result/" style="height: 200px; width: 100%;"></iframe></div>
<div>
<br />
Additionally there are the <b>:first-child, :last-child</b> simple pseudo classes, you can try some simple examples with it and see for yourself :)<br />
<br /></div>
</div>
Dipak Suryavanshihttp://www.blogger.com/profile/01800222570617508845noreply@blogger.com0