Learning Bootstrap Part 3: Working with Image and Icons

Read Part 1 here: Getting started with Bootstrap

Read Part 2 here: Working with Buttons

Working with images are very essential of web application development and Boot strap also realize this. If you want to create rounded image, circled images or Polaroid image then that is as easy as adding a class.

You can create a circled image as following

image

Circled images will look like following

image

You can create round corner images as following,

image

Rounded image will look like following

image

You can create Polaroid image as following,

image

Polaroid image will look like following ,

image

You can create different types of images as following


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">

 <img src="Images/uk.jpg" class="img-polaroid"/>
 <img src="Images/indiaflag.jpg" class="img-circle"/>
 <img src="Images/deepika-paduk.jpg" class="img-polaroid" />

 </div>
</body>
</html>

It is very easy to work with Icons also in Bootstrap. Bootstrap supports free icons from http://glyphicons.com/ for developers. There are 140 icons avialble. You need to follow following steps to work with icons

  1. Create a <i> tag
  2. Set class of <i> tag with icon name. For erxample if you want to create calendar icon then that can be created as following

image

You can add icons to buttons as following . A Search button can be created as following . We are nesting <i> tag inside button taf to create a button with icons.

image

You can create different size of button with icons as following ,

image

Above buttons can be created as following


<div class="container">
 <a class="btn btn-large">
 <i class="icon-search"></i>Search
 </a>
 <br />
 <a class="btn btn-small">
 <i class="icon-search"></i>Search
 </a>
 <br />
 <a class="btn btn-mini">
 <i class="icon-search"></i>Search
 </a>
 </div>

You can create navigation lists with icons as following

<ul class="nav nav-list">
 <li class="active"><a href="#home"><i class="icon-home icon-white"></i>Home</a></li>
 <li><a href="#"><i class="icon-gift"></i>Gift</a></li>
 <li><a href="#"><i class="icon-picture"></i>Images</a></li>
 <li><a href="#"><i class="i"></i>Misc</a></li>
 </ul>

And you will find navigation bar created as following,

image

In this way you can add icons to any other elements. Bootstrap makes working with icons and images very easy. I hope you find this post useful. Thanks for reading.

Learning Bootstrap Part 2: Working with Buttons

Read Part 1 here: Getting started with Bootstrap

Buttons and anchor tags are very important controls. Bootstrap allows you to customize look of these two very elegantly.

Block level Button: if you want to create a button as the full width of parent container that can be easily created as following


<div class="container">
 <button class="btn btn-large btn-block" type="button">Login</button>
 <button class="btn btn-large btn-block" type="button">Register</button>
 <button class="btn btn-large btn-block" type="button">Twitter</button>
 <button class="btn btn-large btn-block" type="button">Facebook</button>
 </div>

In above we are putting buttons inside fixed container and you will see buttons would rendered as following. Buttons are taking width of parent div container.

clip_image002

There are different styles of buttons available. You can very easily create them. Let us say you want to create a Success Button. Success button can be created by setting class as btn-success

image

If you want to create Info button then that can be created setting button class as btn-info

clip_image001

Different kinds of buttons available in bootstrap is as following,

image

You can create above buttons as easily as given below


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">

 <button class="btn btn-large btn-primary" type="button">Primary Button</button><br />
 <button class="btn btn-info"
 type="button">
 Info Button
 </button>

<br />

 <button class="btn btn-success"
 type="button">
 Success Button
 </button>

 <br />
 <button class="btn btn-large btn-warning" type="button">Warning Button</button> <br />
 <button class="btn btn-large btn-danger" type="button">Danger Button</button><br />
 <button class="btn btn-large btn-inverse" type="button">Inverse Button</button> <br />
 <button class="btn btn-large btn-link" type="button">Link</button> <br />
 </div>

</body>
</html>

Bootstrap also provides you different sizes of buttons. If you want to create a large button that can be created as following

clip_image001[6]

You can create a large success button as following

clip_image003

There are three buttons sizes available,

  1. Large button : btn-large
  2. Default button : btn
  3. Small button : btn-small
  4. Mini button : btn-mini

image

Above buttons can be crated with following mark-up


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
 <button class="btn btn-large ">
 Large Button
 </button> <br />
 <button class="btn">
 Default Button
 </button> <br />
 <button class="btn btn-small">
 Small Button
 </button> <br />
 <button class="btn btn-mini">
 Mini Button
 </button> <br />

 </div>

</body>
</html>

In this way you can work with buttons and make them immersive using twitter bootstrap. In further posts we will get into more deep into bootstrap. I hope you find this post useful. Thanks for reading.

Learning Bootstrap Part 1: Getting started with Bootstrap

What is Twitter Bootstrap ? Well, I will answer this question in further posts. In this post I am focusing on getting started with Bootstrap and I will show you how easy it could be to make your web applications more immersive using bootstrap.

Let us start with downloading and installing Bootstrap. You can download that from here

clip_image002

After downloading unzip the folder and you will find following subfolders inside that. Folders name are very much self-explanative. CSS files are in CSS folder and JS files are in JS folder.

image

Next you need to add bootstrap files in project structure. In Visual Studio folder structure should look like as following

image

Now a typical HTML file looks like following,


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>

 <h1>Bootstarp Sample</h1>
 <div>I am here to decide about my Ideas ! Okay ?</div>

</body>
</html>

HTML will render without bootstrap as following,

image

You can add bootstrap CSS and JS references in the same way we add usual CSS and JS reference.

image

After adding references of bootstrap CSS and JS HTML should look like following.


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

 <h1>Bootstarp Sample</h1>
 <div>I am here to decide about my Ideas ! Okay ?</div>

</body>
</html>

&nbsp;

Now we have added bootstrap CSS and HTML will render as following. You can notice the difference typography and the way H1 and DIV elements are rendering now.

image

Now let us see that how easy it is to differentiate different kind of message in bootstrap. For example if we want to show an error message that can be done by setting class of a paragraph.

image

In the same way an info message can be displayed as following,

image

We can show different kind of messages in application as easily as depicted in following HTML


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

 <h1>Bootstarp Sample</h1>
 <p class="muted">This is muted text</p>
 <p class="text-warning">This is warning text</p>
 <p class="text-error">This is Error !</p>
 <p class="text-info">This is Info !</p>
 <p class="text-success">This is sucess message !</p>
</body>
</html>

And different kind of message will render as following,

image

Let us take another example of table. You can create a table a with some rows as following,

<table>
 <tr>
 <td>Dhananjay Kumar</td>
 <td>@debug_mode</td>
 </tr>
 <tr>
 <td>John Bristowe</td>
 <td>@johnbristowe</td>
 </tr>
 <tr>
 <td>Chris Eargle</td>
 <td>@kodefuguru</td>
 </tr>
 <tr>
 <td>Pinal Dave</td>
 <td>@pinaldave</td>
 </tr>
 </table>

&nbsp;

On rendering above HTML in browser you will get table as following. Certainly this table is not looking very immersive.

clip_image001

Using bootstrap we can style table as easily as setting class value. If you set class of table as table then table will stretch to all width available.

clip_image002

And you will notice the way table is rendering.

clip_image004

If you want strip table that can be done by just setting class value. A stripped table can be created in bootstrap as following,

clip_image005

As output table will render as given in below image,

clip_image007

Full source code of above stripped table is as following,


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

 <h1>Bootstarp Sample</h1>
 <table class="table table-striped">
 <tr>
 <td>Dhananjay Kumar</td>
 <td>@debug_mode</td>
 </tr>
 <tr>
 <td>John Bristowe</td>
 <td>@johnbristowe</td>
 </tr>
 <tr>
 <td>Chris Eargle</td>
 <td>@kodefuguru</td>
 </tr>
 <tr>
 <td>Pinal Dave</td>
 <td>@pinaldave</td>
 </tr>
 </table>
</body>
</html>

In this post we focused on getting started with bootstrap. In further posts we will get into details of other aspects of bootstrap. I hope you find this post useful. Thanks for reading.

Flip Image on hover using CSS 3.0

In this post we will take a look on flipping images using CSS3.0. Let us assume that we have a div with two images as following,


<div id="flipimagediv">
 <img id="backImage" src="images/srt.jpg" />
 <img id="frontImage" src="images/msdhoni.jpg" />
 </div>

Now we want to flip these two images on mouse hover. We will achieve that using CSS3.0. To start with let us set container div style. In container we are setting width, height and display.


#flipimagediv {
display: inline-block;
width: auto;
height: auto;
position: relative;
}

After setting container div styles let us go ahead and set image styles. In image style we are setting usual properties like height and width. We are setting

  • transition-property
  • transition-duration
  • transition-timing-function

#flipimagediv img {
width: 400px;
height: 300px;
position: absolute;
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: linear;
}

Last we need to change opacity of images on hover. We can do that  as following.


#flipimagediv #frontImage, #flipimagediv:hover #backImage {
opacity: 1;
}
#flipimagediv:hover #frontImage, #flipimagediv #backImage {
opacity: 0;
}

In this way we can flip images on hover using CSS 3.0. I hope you find this post useful. Thanks for reading.

Two common tasks using jQuery

In this post we will take a look on how to perform two common tasks using jQuery . We will see how following tasks can be performed,

  1. Reading and setting text of label
  2. Reading value of selected item from drop down

Reading and setting text of label

Let us say you have label on HTML as following,


<label id="locationbox"> </label>

You can read value as following ,


var valueoflabel = $('#locationbox').text();

You can set text in label as following,


$('#locationbox').text("MyText");

Reading value of selected item from drop down

Let us say you have drop down as following on html,


<select id="typeofreport">
<option value="Rape">Rape</option>
<option value="EveTeasing">Eve Teasing</option>
<option value="Molestation">Molestation</option>
<option value="VerbalAbuse">Verbal Abuse</option>
<option value="Harassmentatwork">Harassment at work</option>

</select>

You can read text of selected value of drop down as following ,


var typeofincident = $("#typeofreport option:selected").text();

These are the two tasks I wanted to share with you. I hope you find this small blog post useful. Thanks for reading.

Creating a round button in CSS 3.0

In this post we will learn creating a round button in HTML 5 and CSS 3.0. Let us say we have a HTML button as following,


<!DOCTYPE html>
<html>
<head>

<link href="demo.css" rel="stylesheet" />
<title>
Round Button Demo
</title>

</head>
<body>

<button>Push Me</button>

</body>
</html>

At this point if you render above HTML in browser, button would be rendered as following,

image

We can make this button a round button using CSS 3.0. By setting value of border-radius to 100% , you can make a button round.


button {
height: 200px;
width: 200px;
border-radius : 100%;
background-color: #C91826;
}

At this point if you render above HTML in browser, button would be rendered as following,

image

You notice here is that text on button is not that immersive. We can make that more immersive by setting other CSS attributes as following,


button {
height: 200px;
width: 200px;
border-radius : 100%;
background-color: #C91826;
color: #fff;
font-weight: bold;
font-size: 40px;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
margin-left : auto;
margin-top : 30px;
margin-bottom : 40px;
margin-right : auto;
border: 1px solid;
border-color: #B21522;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;

}

At this point if you render above HTML in browser, button would be rendered as following,

image

In this way you can create a round button in HTML5 and using CSS 3.0. I hope you find this post useful. Thanks for reading.

Arrays in JavaScript

In JavaScript Arrays are an object. You can create Array is JavaScript as following

 

image

An array element can be accessed using its index. For example if you want to read banana, you will read that as following,

 

image

Likely Array of other languages, JavaScript array index also start from zero. The other way to create JavaScript array is by using the new keyword.

 

image

You can read elements of array using for loop as following,

image

You will get following output. You will notice that value of the 5th element in array is undefined since we have not set the 5th element value.

 

image

Even though you have set the size of the array as five, you can dynamically increase size of the array. In below listing we are setting value of 10th element. After setting 10th element value size of the array has been increased from 5 to 10.

 

image

Since we have not set values from 5th element to 9th element, so those value will be undefined

 

image

Following are the most used functions of JavaScript Array.

 

image

Let us explore each functions one by one.

Push Function

Push inserts an element at the top of the array. Suppose we have an array

 

image

When you see the console , you will find array elements as following

 

image

Now let us push some elements in fruit array . We can push element in the array by calling push function and passing the elements to be inserted as input parameter. In following listing , we are inserting orange and apple in the array. First orange will be inserted then apple.

 

image

And as a output you will get array elements as below,

image

Pop Function

Pop function is used to remove top or last element of the array. From above array we can pop an element as given in below listing

 

image

You will find that banana has been removed from the array

image

unshift Function

unshift function inserts elements in the beginning of the array. Let us suppose we have an array

image  

You can insert elements at the beginning of array using unshift as following

image

You will find that orange , apple and grapes has been added to the fruits array . Now the first element of the array is grapes.

 

image

shift Function

shift function removes first element from the array. Let us consider this array

 

image

when we call shift function on array mango will be removed from the array

image

You will get array elements printed as following

image

In further post we will discuss more JavaScript Array functions.  I hope you find this post useful. Thanks for reading.

Learn jQuery Part4: Increasing and Decreasing font of paragraph text using jQuery

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery


In this post we will learn applying CSS on HTML Elements using jQuery. On click of event of button we will increase or decrease FontSize of the text. See the below video for the expected output

You may come across scenario when you need to apply CSS styling on DOM element at the run time. For example on click event of button you may want to increase or decrease font size of the Paragraph Text. jQuery allows to apply or remove CSS on HTML elements.

image

Assume we have HTML as following. There are two buttons on the HTML, one to increase the font of the text in paragraph element and another to decrease the font size.

Code Listing 1


<body>
<h1>CSS styling using jQuery</h1>
<p id="infopara">
Cricket is a bat-and-ball game played between two teams of 11 players on a field,
at the centre of which is a rectangular 22-yard long pitch. One team bats,
trying to score as many runs as possible while the other team bowls and fields,
trying to dismiss the batsmen and thus limit the runs scored by the batting team.
A run is scored by the striking batsman hitting the ball with his bat,
running to the opposite end of the pitch and touching the crease there without being dismissed.
The teams switch between batting and fielding at the end of an innings.
</p>
<button id="btnincreasefont" type=button onclick="">Increase Font</button>
<button id="btndecreasefont" type=button onclick="">Decrease Font</button>
</body>

In browser you should get rendered HTML as following

image

Now on the click event of the buttons we want to increase and decrease the font size of the paragraph text. First attach a click event to the button. Click event can be bind to button as below,

image

After attaching click event to button we need to read current font size of the text. To read that value select HTML element <p> with id and apply css selector with fontSize attribute to read current font size applied. You can read current font size as given below

image

If you alert divcurrentfont , you will get font size as following

image

Now we need to convert current font size to an integer value and we can do that as following

image

If you alert divcurrentfontinnumber, you will get integer part of font size as following

image

Next we need to extract unit part of font. We can do that as following

image

On alert you will get unit as following

image

After this we need to modify font size value as per our requirement. In this case I am going to increase font size twice with each button click. We can multiply font size by 2 as following

image

Last but not least we need to set fontSize value. To do this select element with id and set fontSize argument in css function. We can set fontSize as following

image

On consolidating codes from above discussion we may have following jQuery code to increase font size of paragraph text on click event of button.

image

To decrease font size we need to follow same steps but rather than multiplying font size by 2, we will divide by 2.

image

Find full jQuery source code to increase and decrease the font size in CodeListing2. CodeListing1 is used as HTML for CodeListing2.

CodeListing2


<script type="text/javascript">
$(document).ready(function () {
$('#btnincreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseInt(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber *= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});

$('#btndecreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseFloat(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber /= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});
});
</script>

I hope you find this post useful. You may find previous posts of this series useful too.

 

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery

 

Thanks for reading.

 

As a Developer why should I worry about Hybrid Application Development?

 

As a developer I see a great potential in the direction of mobile and device application development. It is evident that the platforms like IOS, Android and Windows Phone are making themselves better with each passing days such that they can excite more developers and eventually the consumers. A huge marketing perception is consumers and proper marketing make a product successful. May be, but when it comes to mobiles and devices, I don’t buy this argument. When I decide to buy a smart phone or tablet, first and foremost, I evaluate whether useful and popular applications are available in my local market place or not ? Applications are essential for the success of any platform. I believe a smart device with smarter platform is a void combination if there is dearth of applications to use on that. Applications are output of a developer work hence any platform need developers to succeed.


 

As a developer I want to write applications and get connected with user of all types of devices and platforms. At any given day I want to see my applications are running on all platforms and used by users of all types of devices.

 

Let us go bit mathematical here. For instance take an example, I want to run my application on three popular platforms and roughly I may need to learn three different technologies and need three different development environment.


 

 

Learning three different technology is exciting though I am more worried about writing three different sets of code for same business requirement. I am reluctant to put thrice of my work for the same application. After creating application I will have to manage and support three different codes as well. At any given day I do not find creating three different application for same business requirement a wise and smart idea. Having said that there may be some scenario when my application is relying heavily on a particular platform and device capability, in that case I may want to write code specific to platform. However when I see majority of the applications are data driven and just consuming data from remote services. In these types of applications I would consider to write one code running on various platforms.

Let us get more mathematical here, assume we are writing an application and want it to run on three popular platforms and application creation for each platform requires 100 lines of codes. So I have to write 300 lines of codes and later I need to manage and support three different sets of codes.


 

 

I may not want to do it if I am writing an application which is just consuming services and nowhere using device capability extensively.


 

I may consider to write one application and expect it to run on all platforms. This type of application is known as Hybrid Application


 


I want to write code once and expect it to run on all types of devices. And path for me would be creating a Hybrid Application. Now question is what technology, language need to be used to create a Hybrid Application? Hybrid application can be created using web technologies like HTML and JavaScript.

There are many awesome products out there which help to create Hybrid Application. One of the best could be jQuery Mobile and Kendo UI Mobile

So I may summarize Hybrid Application Development in following steps


 

  1. Create application using HTML
  2. Build application using PhoneGap
  3. Deploy it to various platform via respective marketplace

In block diagram, I can summarize hybrid application development as following


 

 

So if I am opting for hybrid application development, I may need to write only 100 lines of codes and my application is running on all the platforms. For the same requirement, if I am going to create native application, I will have to write 300 line of codes and I will have to manage 3 different set of codes.

I will end this post by saying if I am not going to write application that is going to use hardware and device capability heavily then Hybrid Application is my choice. At any given day I would like to write one set of code running on various platforms and being used by consumers from all across.

Any comment would be appreciated.

 

Constructors in JavaScript

In this post we will learn to create a JavaScript type using a constructor. Let us suppose we was to create a type called Product. We can create that as following,

 var Product = function (name, price) {
 this.Name = name;
 this.Price = price;
 };

Above we have created a type called Product. Now we can create an object of type Product as following. You can access a particular property on the object of the type.

function createObject() {
 var myObject = new Product("pen",200);
 alert(myObject.Name + myObject.Price);
 }

In this way you can create a type using constructor in JavaScript. Call createObject() function to display values of price and name of a product. You can do that as following


&nbsp;

<input id="btnCreateObject"
 type="button"
 value="button"
 onclick="createObject()" />

I hope you find this post useful. Thanks for reading!