Monthly Archives: December 2014

Selvakumar Chokalingam 11:50 AM on December 30, 2014
Tags: Progress bar in bootstrap   

Bootstrap Progress Bars

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Basic Progress Bar</h2>
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”70″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
<span class=”sr-only”>70% Complete</span>
</div>
</div>

<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”70″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70%
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”40″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40% Complete (success)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-info” role=”progressbar” aria-valuenow=”50″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:50%”>
50% Complete (info)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”60″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:60%”>
60% Complete (warning)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-danger” role=”progressbar” aria-valuenow=”70″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70% Complete (danger)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success progress-bar-striped” role=”progressbar”
aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40% Complete (success)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-info progress-bar-striped” role=”progressbar”
aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:50%”>
50% Complete (info)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-warning progress-bar-striped” role=”progressbar”
aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:60%”>
60% Complete (warning)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-danger progress-bar-striped” role=”progressbar”
aria-valuenow=”70″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70% Complete (danger)
</div>
</div>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped active” role=”progressbar”
aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40%
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” style=”width:40%”>
Free Space
</div>
<div class=”progress-bar progress-bar-warning” role=”progressbar” style=”width:10%”>
Warning
</div>
<div class=”progress-bar progress-bar-danger” role=”progressbar” style=”width:20%”>
Danger
</div>
</div>

</div>

</body>
</html>

Progressbar

Selvakumar Chokalingam 11:26 AM on December 30, 2014  

Bootstrap – Images

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>
</div>

<div class=”container”>
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque Terre” width=”304″ height=”236″>
</div>

<div class=”container”>
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src=”cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre” width=”304″ height=”236″>
</div>
<div class=”container”>
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre” width=”304″ height=”236″>
</div>
<div class=”container”>
<h2>Responsive Embed</h2>
<div class=”embed-responsive embed-responsive-16by9″>
< iframe class=”embed-responsive-item” src=” http://www.youtube.com/embed/n1IVj0w57hM  “> </iframe>
</div>
</div>

</body>
</html>

Images

Selvakumar Chokalingam 11:23 AM on December 30, 2014
Tags: Bootstrap tables   

Bootstrap – Tables

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

<div class=”container”>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class=”table table-striped”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class=”table table-bordered”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class=”table table-hover”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class=”success”>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td class=”danger”>mary@example.com</td>
</tr>
<tr class=”info”>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Table_1

table_2

Selvakumar Chokalingam 11:20 AM on December 30, 2014
Tags: Typography on bootsrap   

Bootstrap – Typography

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
<div class=”container”>
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>
</div>
<div class=”container”>
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF’s website</footer>
</blockquote>
</div>
<div class=”container”>
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .pull-right:</p>
<blockquote class=”pull-right”>
<p>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF’s website</footer>
</blockquote>
</div>
<div class=”container”>
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

<div class=”container”>
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>

<div class=”container”>
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide “meaning through colors”:</p>
<p class=”text-muted”>This text is muted.</p>
<p class=”text-primary”>This text is important.</p>
<p class=”text-success”>This text indicates success.</p>
<p class=”text-info”>This text represents some information.</p>
<p class=”text-warning”>This text represents a warning.</p>
<p class=”text-danger”>This text represents danger.</p>
</div>
<div class=”container”>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide “meaning through colors”:</p>
<p class=”bg-primary”>This text is important.</p>
<p class=”bg-success”>This text indicates success.</p>
<p class=”bg-info”>This text represents some information.</p>
<p class=”bg-warning”>This text represents a warning.</p>
<p class=”bg-danger”>This text represents danger.</p>
</div>

</body>
</html>

typography1 typography_2

Selvakumar Chokalingam 11:17 AM on December 30, 2014
Tags: desktops, Dynamic design for phone, larger desktops, tablets   

Bootstrap – Dynamic design for phone, tablets, desktops, larger desktops – Part 2

The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). These classes can be combinated to create more dynamic and flexible layouts.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row” style=”background-color:lavender;”>
<div class=”col-xs-12 col-md-8″>.col-xs-12 .col-md-8</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>
<div class=”row” style=”background-color:lavenderblush;”>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>
<div class=”row” style=”background-color:lightcyan;”>
<div class=”col-xs-6″>.col-xs-6</div>
<div class=”col-xs-6″>.col-xs-6</div>
</div>
</div>

</body>
</html>

Selvakumar Chokalingam 11:16 AM on December 30, 2014  

Bootstrap – Dynamic design for phone, tablets, desktops, larger desktops – Part 1

The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). These classes can be combinated to create more dynamic and flexible layouts.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-3 col-md-6 col-lg-4″ style=”background-color:lavender;”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class=”col-sm-9 col-md-6 col-lg-8″ style=”background-color:lavenderblush;”>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>

</body>
</html>

Selvakumar Chokalingam 11:12 AM on December 30, 2014
Tags: Basic html with bootstrap   

Bootstrap – Basic HTML

</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-6″ style=”background-color:lavender;”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class=”col-sm-6″ style=”background-color:lavenderblush;”>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>

bootsrap_simple

Selvakumar Chokalingam 11:03 AM on December 30, 2014
Tags: Angular Js - Basic validations, Angular js - Email validations, Angular js - Mandatory validations   

Angular JS – Mandatory and Email validations

<!DOCTYPE html>
<html>

<head>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
</head>

<body>
<h2>Validation Example</h2>

<form ng-app=”” ng-controller=”validateCtrl”
name=”myForm” novalidate>

<p>Username:<br>
<input type=”text” name=”user” ng-model=”user” required>
<span style=”color:red” ng-show=”myForm.user.$dirty && myForm.user.$invalid”>
<span ng-show=”myForm.user.$error.required”>Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type=”email” name=”email” ng-model=”email” required>
<span style=”color:red” ng-show=”myForm.email.$dirty && myForm.email.$invalid”>
<span ng-show=”myForm.email.$error.required”>Email is required.</span>
<span ng-show=”myForm.email.$error.email”>Invalid email address.</span>
</span>
</p>

<p>
<input type=”submit”
ng-disabled=”myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid”>
</p>

</form>

<script>
function validateCtrl($scope) {
$scope.user = ‘John Doe’;
$scope.email = ‘john.doe@gmail.com’;
}
</script>

</body>
</html>

Angular_validation

Selvakumar Chokalingam 10:22 AM on December 30, 2014
Tags: Angular js bootstrap popup, Angular js search, Angular js sort   

Angular JS – Bootstrap Popup, Search, Sort

note.html

<html ng-app=”myNoteApp”>

<head>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”ui-bootstrap-tpls-0.12.0.min.js”></script>
<link rel=”stylesheet” href=”bootstrap.css”/>
</head>

<body>

<div ng-controller=”myNoteCtrl”>
<button ng-click=”openModal();”>Search</button>
</div>

<script src=”myNoteApp.js”></script>
<script src=”myNoteCtrl.js”></script>

</body>
</html>

myNoteApp.js

var app = angular.module(“myNoteApp”, [‘ui.bootstrap’]);

var ModalInstanceCtrl = function ($scope, $modalInstance, $parse) {
$scope.items = [{country: “India”, name: “Babu”}, {country: “US”, name: “Arun”},{country: “Swiss”, name: “Sri”}];
$scope.selected = {
item: $scope.items[0]
};

$scope.ok = function (item) {
$modalInstance.close(item);
};

$scope.cancel = function () {
$modalInstance.dismiss(‘cancel’);
};

};

myNoteCtrl.js

app.controller(“myNoteCtrl”, function($scope, $modal) {
$scope.names = [{country: “India”, name: “Babu”}, {country: “US”, name: “Arun”},{country: “Swiss”, name: “Sri”}];
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: ‘search.html’,
controller: ModalInstanceCtrl
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
});

popup