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>
    </li>
  </ul>

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

</div>
(function() {
  'use strict';

	angular
  	.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;
    }
  }

})();

Demo: https://jsfiddle.net/do080Lmt/

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>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
<aside class="skew-neg red">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
<aside class="skew-neg yellow">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
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;
}

Demo: http://jsfiddle.net/z16jnzrh/show

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() {
  ionic.Platform.fullScreen();
  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.

HTML

<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>

JS

var scrollTo = {

 init : function () {
   this.button();
 },

 button : function () {
   $('.click').click(function(e){
     // prevent default action
     e.preventDefault();
     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;
   $('html,body').animate({
     scrollTop: $(el).offset().top
   }, speed);
 }

}

scrollTo.init();

CSS

div {
  margin-top:1000px;
}
div:last-child {
  padding-bottom:1000px;
}

Old New Tab Google Chrome

1. Type chrome://flags into your browser's address bar.
2. Search for the option labeled "Enable Instant Extended API."
3. Change its setting from "Default" to "Disabled."
4. Restart your browser.

DeskConnect Files Location

For DeskConnect users in MB. You can find your files here.

1. Command + Space
2. Search for Terminal
3. Open Terminal
4. type this open ~/Library/Containers/com.deskconnect.mac/Data/Library/Application\ Support/DeskConnect

HDR Album

This is my Nikon D90 HDR shot. I am not a professional photographer.  Once in a while I love to capture a moment that really inspires me. This album is not available in any personal and commercial project. I owned this pictures, for interest please email me. Enjoy!

Detect Location Bottom using jQuery

$(window).scroll(function() {

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

  console.clear();
  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");
  }

});