Bootstrap Input Groups

This article explains about one more feature Bootstrap supports, the Input Groups. Input groups are extended Form Controls. Using input groups we can easily prepend and append text or buttons to text-based inputs. By adding prepended and appended content to an input field, we can add common elements to the user’s input. To prepend or append elements to a .form-control Wrap it in a <div> with class .input-group
As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon. Now place this <span> either before or after the <input> element.
Basic Input Group
Following examples demonstrates basic input group:

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div>
      <br>

      <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
      </div>
      <br>
      <div class="input-group">
         <span class="input-group-addon">$</span>
         <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
      </div>
   </form>
</div>

Input Group Sizing
We can also change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.
Following examples demonstrates this:

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="input-group input-group-lg">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div><br>
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div><br>
      <div class="input-group input-group-sm">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div>
   </form>
</div>

Checkboxes and radio Buttons:
We can preappend or append radio buttons and checkboxes instead of text as demonstrated in the following example:

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-addon">
                  <input type="checkbox">
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-addon">
                  <input type="radio">
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

Buttons:
We can even preappend or append buttons in input groups. Instead of .input-group-addon class, we’ll need to use class .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden. Following examples demonstrates this:

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!
                  </button>
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!
                  </button>
               </span>
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Bootstrap Form (Part 2)

In the previous article we have discussed about bootstrap forms and their implementation. But as we know that every html form has many controls. Alike those forms bootstrap forms also have some unique and useful control to work with. Bootstrap form natively supports the most common form controls mainly input, textarea, checkbox, radio, and select .In this article we are not only going to discuss about implementation of these controls, but also when and how many ways we can implement them.

INPUTS:
The most common bootstrap form text field is the input—this is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Proper type declaration is required to make Inputs fully styled.

TEXTAREA:
The textarea is used when you need multiple lines of input. Change rows attribute as necessary (fewer rows = smaller box, more rows = bigger box).

CHECKBOXES AND RADIO Buttons:
Checkboxes and radio buttons are great when we want users to choose from a list of preset options.When building a bootstrap form, use checkbox if we want the user to select any number of options from a list. Use radio if you want to limit the user to just one selection. Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

SELECTS:
A select is used when we want to allow the user to pick from multiple options, but by default it only allows one. Use <select> for list options with which the user is familiar, such as states or numbers. Use multiple=”multiple” to allow the user to select more than one option.
Form Control States:
In addition to the: focus (i.e., a user clicks into the input or tabs onto it) state, Bootstrap offers styling for disabled inputs and classes for form validation.

INPUT FOCUS:
When an input receives: focus, the outline of the input is removed and a box-shadow is applied.

DISABLED INPUTS:
If we need to disable an input, simply adding the disabled attribute will not only disable it, it will also change the styling and the mouse cursor when the cursor hovers over the element.

DISABLED FIELDSETS:
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

VALIDATION STATES:
Bootstrap form includes validation styles for error, warning, and success messages. To use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element.

Help Text:
Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of content, use the .help-block after the <input>.
In the above we have discussed about the controls of a bootstrap form. In the below we are going to try it in a sample code.

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">First Name</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="Enter First Name">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">Last Name</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="Enter Last Name">
      </div>
   </div>
    <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Address</label>
    <div class="col-sm-10">
    <textarea class="form-control" rows="3"></textarea>
    </div>
  </div>
  <label for="name" class="col-sm-2 control-label">Gender </label>
<div class="col-sm-10">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> Male
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> Female
</div>
<br/>
<div> 
<label for="name">Country</label>
<div class="col-sm-10">
      <select class="form-control">
         <option>Enter Your Country</option>
         <option>India</option>
         <option>US</option>
         <option>UK</option>
         <option>Australia</option>
      </select></div></div><br />
        </form>

boot-form

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Bootstrap Form (Part 1)

FORM LAYOUT:

Bootstrap form provides you with following types of form layouts:

  • Vertical (default) form
  • Inline form
  • Horizontal form

BASIC FORM:

The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. To create a basic form do the following:

  • Add a role form to the parent <form> element.
  • Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
  • Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form role="form">
   <div class="form-group">
      <label for="name">Enter Your Name</label>
      <input type="text" class="form-control" id="name" 
         placeholder="Enter Name">
   </div>
   <div class="form-group">
      <label for="inputfile">File input</label>
     <input type="file" id="inputfile">
      <p class="help-block">Example: help text here.</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> Check me out
      </label>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>
  </body>

</html>

bootstrap form

As we can see in the above example we have used many features of form.At the top we can see that we have used a form-group class to hold a couple of label and textbox.As in the later form-group class we have included a label and with that a file input tag.

 <input type="file" id="inputfile">

After this we also have included a help-block class which is necessary to make certain forms user friendly.

<p class="help-block">Example: help text here.</p>

Next in the div class we also have a class called checkbox. Which in turns includes a checkbox. And last but not the least we have a submit button to top it off.

We have a basic form in the above example. But why stop there? Let us improve this form a bit with Horizontal form. Let us discuss about it in the below.

BOOTSTRAP form-horizontal CLASS:

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following:

  • Add a class of .form-horizontal to the parent <form> element.
  • Wrap labels and controls in a <div> with class .form-group.
  • Add a class of .control-label to the labels.

Let us see the changes we made.

  <form class="form-horizontal" role="form">
       <div class="form-group">
      <label for="name" class="col-sm-2 control-label">First Name</label>
      <input type="text" class="col-sm-2 control-form" id="name" 
         placeholder="Enter First Name">
       </div>
       <div class="form-group">
         <label for="name" class="col-sm-2 control-label">Last Name</label>
      <input type="text" class="col-sm-2 control-form" id="name" 
         placeholder="Enter Last Name">
   </div>
</form>
   <form>
   <div class="form-group">
      <label for="inputfile">File input</label>
     <input type="file" id="inputfile">
      <p class="help-block">Example: help text here.</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> Check me out
      </label>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

boot-hor-form

As we can see we are using two different forms here. One included with form-horizontal class. And a normal form. We can see in the image that the one which is using form-horizontal maintains a certain markup. But the other form allign itself with the window.

In the above article we have seen how to use forms in bootstrap. But bootstrap offers us more than this in forms. So, in next article we are going to discuss about the form controls.

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Bootstrap pagination

This article discusses about bootstrap pagination. Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.
Pagination:
The following classes are provided by Bootstrap to handle pagination.
.pagination:
Add this class to get the pagination on your page.as an example

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  </ul> 

.disabled, .active:
For customizing links by using .disabled for unclickable links and .active to indicate the current page.as an example

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul> 

.pagination-lg, .pagination-sm :
Use these classes to get different size items.as an example

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul> 

PAGINATION:
Following example demonstrates the use of class .pagination and class .disabled, .active discussed in the above.

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul> 

Pager:
If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination links, the pager is an unordered list. By default the links are centered. The following table lists the classes Bootstrap provides for pager.
.pager:
Add this class to get the pager links. as an example

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul> 

.previous, .next:
Use class .previous to left align and .next to right-align the links.

<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

.disabled:
Add this class to get a muted look.

<ul class="pager">
  <li class="previous disabled"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

ALIGNED LINKS:
Following example demonstrates the use of classes for alignment, .previous, .next discussed in the above.

<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

Now let us look through a pagination, which includes the features that are discussed above.

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <ul class="pagination">
    <li class="previous disabled"><a href="#">← Older</a></li>
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>
  </body>
</html> 

pagination

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables
8>Bootstrap Alerts

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Bootstrap panels

This article will discuss about Bootstrap panels. Panel component are used when we want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

Panel with heading:

There are two ways to add panel heading.

  • Use .panel-heading class to easily add a heading container to your panel.
  • Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel with footer:

We can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel with tables:

To get a non-bordered table within a panel, use class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

Panel with Listgroups:
We can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups.

In the above we have discussed about the features. Now let us go through a sample code of a software company’s customer info receipt.

<div class="panel panel-default">
    <div class="panel-heading">
      Software Services
   </div><br />
   <div class="panel-heading">
      Software Cost
   </div>
   <div class="panel-body">
     <table class="table">
     <thead><th>Product</th><th>Price </th></thead>
      <tbody>
      <tr><td>Software</td><td>2000</td></tr>
      <tr><td>Manual</td><td>400</td></tr></tbody>
   </table>
   </div>
     <div class="panel-heading">
      Including Services
   </div>
   <div class="panel-body"> <ul class="list-group">
      <li class="list-group-item">Free Domain Name Registration</li>
      <li class="list-group-item">Free Window Space hosting</li>
        <li class="list-group-item">24*7 support</li>
    </ul></div>
    <div class="panel-footer">Contact us - software services.in</div>
</div> 

panel

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables
8>Bootstrap Alerts

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Angular.js Two Way Data Binding

What is two way data binding?
Angular template engine binding the data in two way, which means data-binding in Angular apps is automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets treat the model as the single-source-of-truth in application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

Data Binding in Classical Template Systems:
Most template systems bind data in only one direction. They merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

data1.jpg

Data Binding in Angular Templates:
Angular templates work differently. First the template is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer.Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test controller in isolation without the view and the related DOM/browser dependency.

data.jpg

After getting the general idea in data-binding, let us see a basic example of this. Afterwards we will see more advanced example.

In the below example we have two buttons. Which will fire two separate on-click methods. In result we will get output of certain information and the count of the method firing. At first lets look through the html file.

Html file:

<div ng-app="myApp" ng-controller="Ctrl1">
    <button type="button" ng-click="myClick()">From Controller</button>
    <my-element my-attr="name" my-cnt="counter"></my-element>
    <div>{{name}}</div>
    <div>{{counter}}</div>
</div>

Javascript file:

function Ctrl1($scope) {
    $scope.name = 'angular';
    $scope.counter = 0;

    $scope.myClick = function() {
        $scope.counter++;
        $scope.name = 'ctrl';
    }
}

angular.module('myApp', []).directive('myElement', function() {
    return {
        restrict: 'E',
        scope: {
            'myAttr': '=',
            'myCnt': '='
        },
        template: '<button ng-click="myOtherClick()">From Directive</button>',
        link: function(scope, iElement, iAttrs) {

            scope.myOtherClick = function() {
                scope.myCnt++;
                scope.myAttr = 'dir';
            }
        }
    }
});

Now let us go through a more advanced example. For this example let’s create a shopping cart. We will add the features to calculate total price of the cart, adding items to cart and removing items from cart. We have to add this logic to the controller. An Angular JS controller must follow the following conventions:

  • It should be a JavaScript function accepting an argument named $scope.
  • All of the model variables and functions should be added to the $scope object.
  • Controllers are usually suffixed with Ctrl, but it is not necessary.

Following is the controller with the required functionalities added:

function ShoppingCartCtrl($scope)  {
		$scope.items = [
			{Name: "Soap", Price: "25", Quantity: "10"},
			{Name: "Shaving cream", Price: "50", Quantity: "15"},
			{Name: "Shampoo", Price: "100", Quantity: "5"},
            {Name: "Razor", Price: "300", Quantity: "2"}
		];

		$scope.addItem = function(item) {
			$scope.items.push(item);
			$scope.item = {};
		}

		$scope.totalPrice = function(){
			var total = 0;
			for(count=0;count<$scope.items.length;count++){
				total += $scope.items[count].Price*$scope.items[count].Quantity;
			}
			return total;
		}
		$scope.removeItem = function(index){
			$scope.items.splice(index,1);
		}

	}

To bind data using members of the controller, we have to specify the controller using ng-controller directive. Ensure that the element containing ng-controller directive is a child of an element declared as ng-app. So, lets see how the html should look like.

<div ng-app="">
      <h1>
        <strong>E-shopping Center</strong>
      </h1>
      <div ng-controller="ShoppingCartCtrl">
        <br />
        <table>
          <tbody>
            <tr>
              <td>Name: </td>
              <td>
                <input type="text" ng-model="item.Name" />
              </td>
            </tr>
            <tr>
              <td>Price: </td>
              <td>
                <input type="text" ng-model="item.Price" />
              </td>
            </tr>
            <tr>
              <td>Quantity: </td>
              <td>
                <input type="text" ng-model="item.Quantity" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <input type="Button" value="Add" ng-click="addItem(item)" />
              </td>
            </tr>
          </tbody>
        </table>
        <table border="1">
          <thead>
            <tr>
              <td>Name</td>
              <td>Price</td>
              <td>Quantity</td>
              <td>Remove Item</td>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in items">
              <td>{{item.Name}}</td>
              <td>{{item.Price}}</td>
              <td>{{item.Quantity}}</td>
              <td>
                <input type="button" value="Remove" ng-click="removeItem($index)" />
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <div>Total Price: {{totalPrice()}}</div>
        <br />
              </div>
    </div>

let us break the above code and try to analyze what we have done. Let’s display the items added to items array in a table. Let’s also add a button on each row to remove the item. We have to use the following blocks to achieve this:

  • ng-repeat directive to iterate through items.
  • Binding controller’s properties using {{}}.
  • ng-click directive to bind button click event.
  • $index to use current index in an array.

Following is the table displaying items:

<table border="1">
    <thead>
 <tr>
  <td>Name</td>
  <td>Price</td>
  <td>Quantity</td>
                <td>Remove Item</td>
 </tr>
    </thead>
    <tbody>
 <tr ng-repeat="item in items">
  <td>{{item.Name}}</td>
  <td>{{item.Price}}</td>
  <td>{{item.Quantity}}</td>
  <td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
 </tr>
    </tbody>
</table>

Let’s display the total price of cart below this table. For this, we need to call the totalPrice() function of controller.

<div>Total Price: {{totalPrice()}}</div>

Finally, let’s add a form to accept values from user and add the new item to items array. We have to use ng-model directive to automatically add an input field to a property of the controller. Following is the form: 

<table>
 <tr>
  <td>Name: </td>
  <td><input type="text" ng-model="item.Name" /></td>
 </tr>
 <tr>
  <td>Price: </td>
  <td><input type="text" ng-model="item.Price" /></td>
 </tr>
 <tr>
  <td>Quantity: </td>
  <td><input type="text" ng-model="item.Quantity" /></td>
 </tr>
 <tr>
  <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>

 </tr>
</table>

data

When we enter something in the text boxes, a property named item is automatically added to $scope. This property is used in the addItem function.Try removing some items from the table and observe that totalPrice is updated immediately. It also happens when an item is added to the array as well.

As we saw, two-way data binding is made very easy using directives and binding syntax of Angular JS. All we need is a controller with some members in it. We don’t need to invoke any special functions to send notification when something changes in the controller.

Related Links:
1>Directive in Angular.js – Part 1
2>Directive in Angular.js – Part 2
3>Working with Modules in Angular.js
4>Angular Router and UI-Router
5>Angularjs and Services
6>Angular.js Promise
7>How To Use Filter In Angular.js
8>Angular Templates
9>Using Controllers in Angular.Js
10>Angularjs with Server Side Interaction
11>Working Through Angular.js With Transclude
12>Angular.js Event Handling

If you find this article helpful, you can connect us in Google+ and Twitter.

Bootstrap Alerts

In the following we will discuss about alerts and the classes Bootstrap provides for alerts. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
We can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin.We can add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Dismissal Alerts:

Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger). Also add optional .alert-dismissable to the above <div> class.Add a close button.
Following example demonstrates this:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
  <meta charset="utf-8" /> 
  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
  <title>Try Bootstrap Online</title> 
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="/scripts/jquery.min.js"></script> 
  <script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <h1>Try Bootstrap Online</h1> 
  <div class="alert alert-success alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Success! Well done its submitted. 
  </div> 
  <div class="alert alert-info alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Info! take this info. 
  </div> 
    <div class="alert alert-danger alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Error ! Change few things. 
  </div> 
  </body> 
</html> 

Links in Alerts:

Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).Use the .alert-link utility class to quickly provide matching colored links within any alert.

Let us look through a set of codes combining the features in bootstrap alert.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8" /> 
  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
  <title>Try Bootstrap Online</title> 
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="/scripts/jquery.min.js"></script> 
  <script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <h1>Try Bootstrap Alert Online</h1> 
  <div class="alert alert-success alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
     <a href="#" class="alert-link">Success! Well done its submitted.</a> 
  </div> 
  <div class="alert alert-info alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    <a href="#" class="alert-link"> Info! take this info.</a> 
  </div> 
  <div class="alert alert-danger alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    <a href="#" class="alert-link"> Error ! Change few things.</a> 
  </div> 
  </body> 
</html> 

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables

Enter your email address: Delivered by FeedBurner

E’ interessante questo parallelo che fai con la frase su Jack

una petizione per Snowden sul sito della Casa Bianca

Che sappiamo di Edward Snowden? Quello che ne dicono i piumini moncler scontatissimi giornali. Cioè non molto moncler outlet online shop e non approfonditamente. E’davvero l’uomo che dipingono, un eroe dei nostri tempi, senza macchia e senza paura? Chi moncler saldi lo saper davveroalzi una mano. Abbiamo, come sempre accade oggi, solo alcuni, scarni, elementi per poter giudicare, per poter decidere cosa vogliamo, se ci piace o no, se fidarci o meno. E come se non moncler uomo bastasse tutto va fatto in fretta. L’ex assistente tecnico della CIA, ventinovenne, quasi un ragazzo, che ha rivelato al quotidiano britannico “The Guardian” l’esistenza del programma “Prism” della National Security Agency americana, ora è ricercato dalle polizie dimezzo moncler saldi mondo per averraccontato l’esistenza diun sistema, creato nel 2007 nell’ambito della legge “Protect America Act”, dedito all’intercettazione dei contenuti privati degli utenti delle principali compagnie high tech (social network, e mailing, Skype). Le imprese tecnologiche, che cooperano nella raccolta dei dati Internet, godono dell’immunità dalla giustizia americana.

Tuttaviaalcuni elementi su cui basare il nostro giudizio li abbiamo. Noi come altri. E’ comprensibile, ad esempio, la posizione di Julian Assange, fondatore di WikiLeaks e moncler outlet trebaseleghe divulgatore dei segreti diplomatici delle piumini moncler più importanti potenze mondiali, secondo cui “Edward Snowden è un eroe. Ha informato il mondo su uno dei casi più seri di sorveglianza di massa dell’ultima decade”. “Il programma Prism moncler outlet online uomo contravviene ai principi della Costituzione degli Stati Uniti” ha denunciato poiil sodale di Assange, l’attivista libertario John Perry Barlow: “La sicurezza di un Paese avverte è molto più compromessa da leggi e pratiche segrete come il programma Prism, che da minacce esterne. La difesa della libertà risiede nella difesa dei nostri valori: il terrorismo non giustifica il tradimento dei principi della Carta Usa”.

Ora sul sito della White House c’è una sezione che dice “We, the People”, ossia Noi il Popolo, Noi la Gente. E come moncler outlet serravalle una specie di sottotitolo c’èscritto: “La vostra voce nel nostro Governo”. Bello, molto democratico, molto americano. è un eroe nazionale e devericevere immediatamente un perdono pieno libero e assoluto per ogni crimine che ha commesso o potrebbe aver commesso in relazione alla violazione del segreto dei programmi di sorveglianza dell’NSA.

Il presidente degli Stati Uniti, quello stesso che si è reso responsabile dei gravi fatti che gli si imputano,ascolterà? E quanto a noi come ci rapportiamo con le istituzioni? E, soprattutto, come le istituzioni si rapportano a noi? Chissà che anche pergli italiani, con tutta la massa enorme di segreti chesi ritrovano sulle spalle, non si affacci prima o poi la possibilità di usufruire almeno diun analogoluogo virtuale,all’indirizzo web del Quirinale, della Camera e del Senato, dove i cittadini grazie a una sottoscrizione possano avanzare liberamente petizioni e richieste che piumini moncler outlet li riguardano, su quanto a loro più preme. Petizioni e piumini moncler saldi richieste che vengano ascoltate, però, di cui tener conto. Sarebbe un bel passo in avantinella direzione della trasparenza del governo dello Stato, un segno di attenzione nei confronti dei cittadini, dei loro bisogni, delle loro reali necessità. E anche un valido termometro dell’ascolto che essi stessi possono effettivamentericevere moncler outlet dai propri organi istituzionali ai massimi livelli.

Non ho capito bene: cosa significa “e noi”? Che dovremmo anche noi usufruire di un portale come quello di cui si moncler donna parla qui, quello presente nel sito della White House chiamato retoricamente (quella retorica americana piena solo di vuoto) “We, the piumini moncler uomo People”?

Di quale popolo si parla? Di quello libero di ‘avanzare liberamente richieste e petizioni che riguardano i cittadini’, nella certezza che vengano ascoltate, che vengano tenute in conto? O di quello moncleroutlet-i messo sotto sorveglianza?

Tutto portava a questo: ricordaiamo Echelon? L’11 Settembre ha solo moncler bambino outlet fornito un alibi in più a chi è assolutamente libero di agire come voglia, per difendere il suo concetto di Democrazia, ovunque nel mondo.

Quanto a Snowden non saprei moncler saldi uomo che pensare, ma il parallelo con Assange viene automatico. E di Assange ho un concetto un po’ più preciso, confermatomi da quanto lui stesso ha detto al momento della sua moncler saldi outlet fuga: “Non voglio fare la fine di Jack Ruby”. Cosa, questa, assolutamente non rimarcata a dovere dal sistema di informazione mainstream. Cosa avrà voluto dire? Perché proprio ‘Jack Ruby’?

Se crediamo che persone come quelle che hanno messo in atto tutto questo: Prism, Echelon, Patriot Act e tutto il resto possano farsi fregare moncler bambino saldi da un assistente tecnico in crisi di identità, e ne facciamo un eroe a prescindere, senza outlet moncler prima approfondire i fatti: ebbene, significa che quelli che la ‘sorveglianza globale e totale’ è il meno.

La punta dell’iceberg. La realtà è molto, molto peggio.

Il popolo americano è quello che viene spiato dalla Casa Bianca e, allo stesso tempo, è quello che avanza liberamente petizioni in proposito sul sito della Casa Bianca. Una contraddizione significativa, che ha fatto grande l’America negli ultimi 100 anni e l’ha fatta anche così tremendamente imperialista.

Gli Usa sono in grado di creare un personaggio come Snowdon, vero o fasullo che sia, e poi di distruggerlo, a torto o a ragione. E’ interessante questo parallelo che fai con la frase su Jack Ruby pronunciata da Assange. Evidentemente anche Assange deve aver visto “Jfk” di O. Stone e la pensa in quel modo.

Angular.js Promise

Promises are a core feature of AngularJS.A promise implementation inspired by Kris Kowal’s Q.A promise represents the eventual result of an operation. We can use a promise to specify what to do when an operation eventually succeeds or fails.

The CommonJS Promise describes a promise as an interface for interacting with an object. Which represents the result of an action that is performed asynchronously. It does not guarantee any fixed response time. From the perspective of dealing with error handling, deferred and promise APIs are to asynchronous programming what try, catch and throw keywords are to synchronous programming.

So let’s see this in action. Look at the code below:

$http.get("/api/my/name");

This code uses the $http service to perform an HTTP GET on the url ‘/api/my/name’. Let’s say that this is an api we’ve implemented on our server that returns the name of the logged in user.

The Deferred API
A new instance of deferred is constructed by calling $q.defer(). The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion, as well as the status of the task.

Methods

resolve(value) – resolves the derived promise with the value.
reject(reason) – rejects the derived promise with the reason.Rejected via $q.reject.
notify(value) – provides updates on the status of the promise’s execution. This may be called multiple times before the promise is either resolved or rejected.

Properties

promise – {Promise} – promise object associated with this deferred.

The Promise API
A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Methods

then(successCallback, errorCallback, notifyCallback) – The callbacks are called with a single argument: the result or rejection reason.The notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.This method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback. It also notifies via the return value of the notifyCallback method. The promise can not be resolved or rejected from the notifyCallback method.

catch(errorCallback) – shorthand for promise.then(null, errorCallback)

finally(callback) – To observe either the fulfillment or rejection of a promise,without modifying the final value. This is useful to release resources or do some clean-up that needs to be done. Because finally is a reserved word in JavaScript and reserved keywords are not supported as property names by ES3.

Differences between Kris Kowal’s Q and $q:

There are two main differences:

$q is integrated with the $rootScope.Scope. Which leads to faster propagation of resolution or rejection into models and avoiding unnecessary browser repaints, which would result in flickering UI.
Q has many more features than $q, but that comes at a cost of bytes. $q is tiny, but contains all the important functionality needed for common a sync tasks.

Now, as we got a general idea about promise in the above. It is time to reveal that idea in a sample code. Below we are going to see a process for retrieving a certain amount of data from server and cache. We will be hard-coding the info in this sample code. But in real life the info will be retrieved from server or cache respectively.

To achieve this task we have to use data binding in html for viewing the desired result. And a certain hyperlink “Update Name” to fire the ng-click method. Let us see the codes:

<div ng-app="app">
    <div ng-controller="MainController">
        <h1> Phloxblog promise sample</h1>
        <p><strong>Name:</strong> {{name}}</p> <a href ng-click="updateName()">Update Name</a>

    </div>
</div>

Below is the code for js file:

var fiddleResponse = 'json=' + encodeURIComponent(angular.toJson({
    name: "Phloxblog"
}));
var fiddleHeaders = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
};

var app = angular.module('app', []);

app.factory('NameService', function ($http, $q) {

    //    Create a class that represents our name service.
    function NameService() {

        var self = this;

        self.name = null;

        //    getName returns a promise which when fulfilled returns the name.
        self.getName = function () {

            //    Create a deferred operation.
            var deferred = $q.defer();

            //    If we already have the name, we can resolve the promise.
            if (self.name !== null) {
                deferred.resolve(self.name + " (from Cache!)");
            } else {
                //    Get the name from the server.
                $http.post('/echo/json/', fiddleResponse, fiddleHeaders)
                    .success(function (response) {
                    self.name = response.name;
                    deferred.resolve(response.name + " (from Server!)");
                })
                    .error(function (response) {
                    deferred.reject(response);
                });
            }

            //    Now return the promise.
            return deferred.promise;
        };
    }

    return new NameService();
});

app.controller('MainController', function ($scope, NameService) {

    //    We have a name on the code, but it's initially empty...
    $scope.status = "Active";
    $scope.updateName = function () {
        NameService.getName()
            .then(
        /* success function */
        function (name) {
            $scope.name = name;
        },
        /* error function */
        function (result) {
            console.log("Failed to get the name, result is " + result);
        });
    };
});

Sample for data retrieving from server.

promise

Sample for data retrieving from cache.

promisecache

Chaining promises:

Because calling the then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs like $http’s response interceptors.
One useful aspect of promises is that the then function returns the promise itself. This means that you can actually chain promises, to create concise blocks of logic that are executed at the appropriate times, without lots of nesting.

Let us see a basic javascript file to know how the promise chaining works.

angular.module('WebShopApp')
  .controller('CheckoutCtrl', function($scope, $log, CustomerService, CartService, CheckoutService) {

    function calculateTotals(cart) {
      cart.total = cart.products.reduce(function(prev, current) {
        return prev.price + current.price;
      };

      return cart;
    }

    CustomerService.getCustomer(currentCustomer)
      .then(CartService.getCart) // getCart() needs a customer object, returns a cart
      .then(calculateTotals)
      .then(CheckoutService.createCheckout) // createCheckout() needs a cart object, returns a checkout object
      .then(function(checkout) {
        $scope.checkout = checkout;
      })
      .catch($log.error)

    });

So, we have a promise chaining above. Now to understand it’s working procedure.This combines getting data asynchronously (customers, carts, creating a checkout) with processing data synchronously (calculateTotals); the implementation however doesn’t know or need to know whether those various services are a sync or not, it will just wait for the methods to complete, a sync or not. In this case, getCart() could fetch data from local storage, createCheckout() could perform a HTTP request to make sure the products are all in stock, etc. But from the consumer’s point of view (the one making the calls), it doesn’t matter; it Just Works. And it clearly states what it’s doing, just as long as the result of the previous then() is passed to the next.And it’s self-documenting and concise.

Advanced Promises – Routing:
There’s a particular area of AngularJS that uses promises to great effect, and that’s the router. With the help of $routeProvider we can retrieve data from either server or from cache in same page. Let us go through the code to do it.

var fiddleResponse = 'json=' + encodeURIComponent(angular.toJson({
    name: "User"
}));
var fiddleHeaders = {
    headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
};

var app = angular.module('app', []);

app.config(function($routeProvider) {

    var getName = function(NameService) {
        return NameService.getName();
    };

    $routeProvider
   .when('/home', {
       templateUrl: '/home.html',
       controller: 'MainController'
   })
   .when('/profile', {
       templateUrl: '/profile.html',
       controller: 'ProfileController',
       resolve: {
           name: getName
       }
   })
   .otherwise({redirectTo: '/home'});
});

app.factory('NameService', function($http, $q) {

    //    Create a class that represents our name service.
    function NameService() {

        var self = this;

        //    Initially the name is unknown....
        self.name = null;

        //    getName returns a promise which when fulfilled returns the name.
        self.getName = function() {

            //    Create a deferred operation.
            var deferred = $q.defer();

            //    If we already have the name, we can resolve the promise.
            if(self.name !== null) {
                deferred.resolve(self.name + " (from Cache!)");
            } else {
                //    Get the name from the server.
                $http.post('/echo/json/', fiddleResponse, fiddleHeaders)
                .success(function(response) {
                    self.name = response.name;
                    deferred.resolve(response.name + " (from Server!)");
                })
                .error(function(response) {
                    deferred.reject(response);
                });
            }

            //    Now return the promise.
            return deferred.promise;
        };
    }

    return new NameService();
});

app.controller('MainController', function ($scope, NameService) {

    //    We have a name on the code, but it's initially empty...
    $scope.name = "";

    //    We have a function on the scope that can update the name.
    $scope.updateName = function() {
        NameService.getName()
            .then(
                /* success function */
                function(name) {
                    $scope.name = name;
                },
                /* error function */
                function(result) {
                    console.log("Failed to get the name, result is " + result); 
            });
    };
});

app.controller('ProfileController', function($scope, name) {

    $scope.name = name;
});

In the above we have seen one of the beautiful features of angular.js. That is Promise. We have discussed about this feature and it’s implementation throughout the angular.js. Though promise is a code part and it’s developing everyday. We can assume that in near future we can have many other implementation of this feature.

Related Links:
1>Directive in Angular.js – Part 1
2>Directive in Angular.js – Part 2
3>Working with Modules in Angular.js
4>Angular Router and UI-Router
5>Angularjs and Services
6>Angular.js Two Way Data Binding
7>How To Use Filter In Angular.js
8>Angular Templates
9>Using Controllers in Angular.Js
10>Angularjs with Server Side Interaction
11>Working Through Angular.js With Transclude
12>Angular.js Event Handling

If you find this article helpful, you can connect us in Google+ and Twitter.

But I feel more proud that the running community is growing so

Being a wealthy TV and movie star, Aniston probably hired Emeril Lagasse to run the Cuisinart. However, the canada goose outlet hong kong majority of Canada Goose Outlet Americans trying this diet will blindly fill their shopping carts with Gerber. That’s where I canada goose stockists uk come in. Bengalis are fond of two canada goose outlet washington dc things. Food and travel. Both of them are very canada goose outlet seattle essential in their lives and you can actually point out a Bengali by these qualities.

canadian goose jacket Anger is part of the grief process, and it canada goose outlet new york is easy to misplace that anger.When it comes to belated condolences, I understand both points of view. Try to get your sympathy notes written within a reasonable period. If you canada goose vest outlet are late, stick to canada goose outlet niagara falls the basics and avoid heart wrenching memories. canadian goose jacket

canada goose coats on sale I am a little bitter that this younger generation is excelling past me. But I feel more proud that the running community is growing so much. This is what we all want as athletes is to be better. The ongoing war of words between Chief Minister Mamata Banerjee and BJP chief Amit Shah got upped by a notch early this morning after a buzz from the Delhi BJP. The Kolkata Police, it was said, has not canada goose outlet mall given permission for Mr Shah’s rally in the city on August 11. The BJP planned a protest outside the police headquarters. canada goose coats on sale

Canada Goose Jackets There is a lot more information on how you can stop smoking as well as comprehensive reviews on the advantages and disadvantages of these methods. Remember the effects of quitting smoking do not last very long but the effects of smoking last a lifetime and eat in to your lifetime. Make the right decision to quit today.. Canada Goose Jackets

Canada Goose Outlet Never found his hands. Opener. This kicked off the gruesome murder of Adam Diehl, a reclusive book collector sometimes forger. The dress code which canada goose outlet parka applies for first year students comes into effect on July 8 when the new session begins. Senior students whose canada goose outlet winnipeg address term has already begun don’t have to wear a uniform but have been told that they must wear only churidaar kurtas. The overcoat is not mandatory for them.. Canada Goose Outlet

canada goose clearance sale It has made everything a lot easier.”Downcast Lisa Armstrong arrives alone in LA after Ant McPartlin reveals new loverNow Lisa has told friends she feels betrayed by her former friend after she moved in with telly host Ant, 42, canada goose outlet uk fake following their marriage breakdown.One pal revealed: “Lisa is absolutely furious she let Anne Marie into their life, her home and even allowed canada goose outlet buffalo her to help them with such a special occasion celebrating their love. How things have changed. She is in bits.”Lisa attacked Anne Marie on Twitter, telling Celebrity Big Brother star Nicola McLean: “My friend and canada goose parka uk OUR PA who I let canada goose outlet online reviews into OUR home.”Ant and Lisa’s lawyers are now discussing how to split their fortune built up over 21 years.It is claimed they no longer speak direct after a furious phone call just before his drink driving car crash on March 18.A friend said: “She and Ant no longer talk to each other, they have to put everything through their solicitors because every time they talk it becomes a row.”Ant McPartlin’s new love ‘threw a party for his ten year wedding anniversary to Lisa’ 18 months before dating himAnt left Britain’s Got Talent make up artist Lisa in September following rehab to battle drink and drug addiction.A month later, Anne Marie, also 42, ended canada goose outlet miami her own canada goose outlet reviews marriage to Scott Corbett, the dad of their two daughters.A pal of Ant said he and Anne Marie have only canada goose outlet usa grown close this year and added organising the anniversary party was just part of her job at the time.Ant and Lisa got canada goose outlet us together in 1994 and married in 2006. canada goose clearance sale

canada goose deals The study, which will be published in the journal, Sleep, looked at the results of surveys with over 9700 adults who participated in the ongoing, National Health and Nutritional Examination. They were determined to have some level of depression based on their answers to the survey questions. According to the findings, nearly six percent of the men and half as many women had also been diagnosed with sleep apnea by canada goose premium outlet their doctors.. canada goose deals

buy canada goose canada goose outlet in chicago jacket cheap Disadvantages Setting performance targets can be a disadvantage to your company if you do not follow up on their progress. You https://www.canadagoose-coats.ca must assess if your indicators are met by your employees, company wide and in comparison to your competitors. Review your goals to determine if you must adjust them based on factors, such as the economy, new product releases from others in the industry or any reason that impacts your ability to meet your targets. buy canada goose jacket cheap

canada goose store Says he just a talk show host, not a journalist, the CNN chief White House correspondent wrote. He injecting poison into the nation political bloodstream warping canada goose outlet uk public attitudes about the press. I confident in the long run the truth will prevail. Since the late 1960s, Oscar Castillo has documented the Chicano community in Los Angeles, from major political events to cultural practices to the work of muralists and painters. This exhibition will present rarely seen photographs from 1969 1980 exploring major themes (social movement, cultural heritage, urban environment, and everyday barrio life) and approaches (photojournalism, portraiture, art photography) that have guided Castillo’s work. History during this pivotal period. canada goose store

cheap canada goose outlet store uk Canada Goose We write stories no one ever read about people who don exist. We have no idea if they are intriguing enough for Joe Reader, but we have to put them out there. It like wearing a red hat because it feels good (in my case, a black Ugg hat). It is worth noting that Duesenberg wasn’t the only company messing with twin cam engines at the time. For example, another Indiana based car company, Stutz, had developed its own twin cam straight eight, and that one canada goose outlet jackets even boasted four valves per cylinder. Still, the Duesenberg was a seriously impressive machine cheap Canada canada goose jacket outlet uk Goose canada goose outlet ottawa.