Simplest way to use Bootstap Tabs with AngularJS

<div role="tabpanel" ng-app="tab" ng-controller="bootsTrapTab">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li ng-repeat="tab in tablist" role="presentation" ng-class="{active: activeTab === tab }">
      <a href="#" ng-click="tabUpdate(tab)" aria-controls="{{ tab }}" role="tab">{{ tab }}</a>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" ng-class="{active: activeTab === 'home'}" class="tab-pane" id="home">
      Home tab...
    <div role="tabpanel" ng-class="{active: activeTab === 'profile'}" class="tab-pane" id="profile">
      Profile tab...
    <div role="tabpanel" ng-class="{active: activeTab === 'messages'}" class="tab-pane" id="messages">
      Messages tab...
    <div role="tabpanel" ng-class="{active: activeTab === 'settings'}" class="tab-pane" id="settings">
      Settings tab...

(function() {
  'use strict';

  	.module('tab', [])
    .controller('bootsTrapTab', bootsTrapTab);

	bootsTrapTab.$inject = ['$scope'];

	function bootsTrapTab($scope) {
    $scope.tablist = ['home', 'profile', 'messages', 'settings'];
    $scope.activeTab = 'home'; // Setting default tab view

    // This where the active tab happen.
    // @event = ng-click
    // @param = setting tab view
    $scope.tabUpdate = function(args) {
        $scope.activeTab = args;



Slant box using css without skewing text

This an example how to make a slant div without making the text slanted.

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>This box is skewed. In supported browsers.</p>
<aside class="skew-neg red">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>This box is skewed. In supported browsers.</p>
<aside class="skew-neg yellow">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>This box is skewed. In supported browsers.</p>
html {
    background: #FFF;
    color: lightblue;
    font: normal small-caps normal 16px/150% Arial, Helvetica, sans-serif;;
    line-height: 150%;
aside {
    background: blue;
    margin: 0 auto;
    padding: 10%;
    width: 100%;
    box-sizing: border-box;
.red { background-color: red; }
.yellow { background-color: yellow; }

/* The good stuff */
.skew-neg {
    -webkit-transform: skewY(-15deg);
    -moz-transform: skewY(-15deg);
    -ms-transform: skewY(-15deg);
    -o-transform: skewY(-15deg);
    transform: skewY(-15deg);
.skew-pos {
    -webkit-transform: skewY(15deg);
    -moz-transform: skewY(15deg);
    -ms-transform: skewY(15deg);
    -o-transform: skewY(15deg);
    transform: skewY(15deg);
    width: 50%;
    margin: auto;


Hide iOS Status Bar

Here’s the snippet how to completely hide the Ionic iOS Status Bar.

cordova plugin add org.apache.cordova.statusbar
$ionicPlatform.ready(function() {
  if (window.StatusBar) {
    return StatusBar.hide();

Scroll to Section with Animation

Nowadays I noticed that most of newer website have those feature that when you clicked a link, and then it scroll to the particular section of the page. Here’s my own simple version how to do scroll to section.


<a href="#el1" class="click">Click this to scroll to element 1!</a><br />
<a href="#el2" class="click">Click this to scroll to element 2!</a><br />
<a href="#el3" class="click">Click this to scroll to element 3!</a><br />

<section id="el1">element 1</section>
<section id="el2">element 2</section>
<section id="el3">element 3</section>


var scrollTo = {

 init : function () {

 button : function () {
     // prevent default action
     var target = $(this).attr('href');
     // get id of target div (placed in href attribute of anchor element)
     // and pass it to the scrollToElement function
     // also, use 2000 as an argument for the scroll speed (2 seconds, 2000 milliseconds)
     scrollTo.element( target, 2000 );

 element : function (el, ms) {
   var speed = (ms) ? ms : 600;
     scrollTop: $(el).offset().top
   }, speed);




div {
div:last-child {

Detect Location Bottom using jQuery

$(window).scroll(function() {

  var documentHeight = $(document).height();
  var scrollValue    = $(window).scrollTop();
  var targetBottom   = 1414;

  console.log(scrollValue + window.innerHeight);
  console.log('default: ' + documentHeight);
  console.log('target : ' + (documentHeight - targetBottom) );

  if (scrollValue + window.innerHeight >= (documentHeight - targetBottom) ) {
    console.log("You are inside of the target bottom");


Adding ID in list of Class

Here’s how to add ID in your list of class using jQuery


<div class="slide">hello</div>
<div class="slide">hello</div>
<div class="slide">hello</div>


$(document).ready(function() {
  $(".slide").each(function(i) {
    $(this).attr('id', "slide" + (i + 1));


#slide3 {
  height: 200px;
  width: 200px;
  border: solid red solid; 

Add ascending numbers to ID

Here’s how to dynamically append a new data using input field.


<form id="create_menu_item">
 <h4>Add Menu Item</h4>
   <input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title" />
   <input class="add_menu_item" name="add_menu_item" value="Add" type="button" />
 <h4>Menu Items</h4>
 <div id="created_buttons">
   <ol id="created_buttons_list"> </ol>


$(".add_menu_item").click((function() {
 var id = 0;
 return function() {
   var value = $(this).prev().val();
   if (value.length) {
     var newDiv = $('<div id="toggleshow" class="div_menu_button"></div>');