Tag Archives: CSS

Cascading Style Sheets

How to Add a FontAwesome Icon using :after

Hey everyone,

Just a quick post on how to add a fontawesome icon using :after:


.fl-cart-product-price:after{
content: '\f00d';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
color: #555;
font-size: 85%;
text-decoration: none;
}

See this stackoverflow post for more info: http://stackoverflow.com/a/18793584/522859

How to stop text taking up more than one line – CSS

Hey everyone,

Just a quick post on how to stop text taking up more than one line using only CSS:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

You can check it out using this fiddle: http://jsfiddle.net/wb5m7/
There’s also a great StackOverflow post: http://stackoverflow.com/a/572302/522859

Rails Flash Messages in MVC4

Hey everyone,

Coming from Rails I’d grown quite fond of flash messages. Unfortunately there isn’t a built in way of doing this in MVC4. Luckily, there’s a five minute solution posted on StackOverflow: http://stackoverflow.com/a/11809178/522859

Once implemented, it works just like in Rails:

this.Flash("We need you to login before you can edit anything.", FlashEnum.Warning);

Definitely worth checking out if you’ve got time, even more so if you’ve come over from Rails!

Twitter Bootstrap – Carousel Only CSS

Hey everyone,

I ran into a bit of an issue today with my stylesheet conflicting with Bootstrap. After a bit of tinkering I realised that all I really needed from bootstrap were the Carousel styles. I’ve taken everything else out and included everything that’s left below:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

Minified:

.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5)0),color-stop(rgba(0,0,0,.0001)100%));background-image:linear-gradient(to right,rgba(0,0,0,.5)0,rgba(0,0,0,.0001)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001)0),color-stop(rgba(0,0,0,.5)100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.5)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:focus,.carousel-control:hover{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Let me know if you have any other issues.

Random Class Directive – AngularJS

Hey everyone,

Just another small directive. This one adds a random class from the provided array to the element.

Check out this fiddle to see the demo: http://jsfiddle.net/uvSVj/3/

Random Background Directive

Random Background Directive

I used this directive to add a random background to each of my wrapper divs:

Random Background Real World Usage

To use it in your app simply define a list of classes in your controller:

app.controller("MyCtrl", function MyCtrl($scope) {
 
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Then add the directive to your page (can be an existing element):

<div class="test" ng-random-class ng-classes="classes"></div>

A random class will then be selected from the list and appended to the elements current list of classes (if any).

The easiest way to see how it’s done is probably just to check out the fiddle above, but there’s a code dump below if you need it:

The Random Class Directive

app.directive("ngRandomClass", function () {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            ngClasses: "="
        },
        link: function (scope, elem, attr) {            
 
            //Add random background class to selected element
            elem.addClass(scope.ngClasses[Math.floor(Math.random() * (scope.ngClasses.length))]);
        }
    }
});

Sample Html

<div ng-app="myApp">
    <!--Shameless link back to blog -->
    <h1>Random Class Directive</h1>
    <a href='http://www.whatibroke.com/?p=899'>www.whatibroke.com</a>
 
    <!-- Identical divs with random class directive added -->
    <div ng-controller="MyCtrl">
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
    </div>
</div>

Sample JS

/* 
    http://www.whatibroke.com/?p=899
    Adds a random class to element
    Usage: add ng-random-class to element
*/
 
var app = angular.module('myApp', []);
 
app.controller("MyCtrl", function MyCtrl($scope) {
 
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Sample Styles

/* Just a demo div */
.test{
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 5px;
    float: left;   
    -webkit-transition: 400ms linear all;
	-moz-transition: 400ms linear all;
	-ms-transition: 400ms linear all;
	-o-transition: 400ms linear all;
	transition: 400ms linear all;
    cursor: pointer;
    border-radius: 10px;    
}
 
.test:hover{
    opacity: 0.8;    
}
 
body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
    text-align: center;
    vertical-align: middle;
}
 
/* Random classes */
.red {
    background-color: red !important;
    height: 75px;
    width: 75px;
}
 
.blue {
    background-color: blue !important;
    height: 40px;
    width: 40px;
}
 
.yellow {
    background-color: yellow !important;
    height: 20px;
    width: 20px;
}
 
.green {
    background-color: green !important;
    height: 63px;
    width: 63px;
}
.purple {
    background-color: purple !important;
    height: 82px;
    width: 82px;
}
.black {
    background-color: black !important;
    height: 29px;
    width: 29px;
}
.orange {
    background-color: orange !important;
    width: 42px;
    height: 42px;
}

Let me know if you run into any issues and feel free to use/change however you want.

TimeSelector / TimePicker Directive – AngularJS

Hey everyone,

I’ve been mucking around with directives for that last few days and one of my requirements has been a simple timepicker. Nothing too fancy, but if anyone would like to use it – feel free.

See the following fiddle for the demo: http://jsfiddle.net/LFB3F/2/

Timepicker Directive

Timepicker Directive

The directive is initialised with both the hour and minute defaults being set like this:

<ng-time-selector hours="hours" minutes="minutes"></ng-time-selector>

Note that hours and minutes should be set in the controller that wraps around the Timepicker:

app.controller("MyCtrl", function MyCtrl($scope) {
    $scope.hours = 11;
    $scope.minutes = 45;       
});

The hours and minutes will then be updated whenever the user changes the value. If you need any other hooks it’s fairly easy to modify and there are a heap of comments.

You may also want to put the HTML in an external template. Just make the following changes to the directive (note templateURL):

app.directive("ngTimeSelector", function () {
    return {
        restrict: 'EA',
        templateUrl: '/Directives/TimeSelector',
        scope: {
            hours: "=",
            minutes: "="
        },
        replace: true,
        link: function (scope, elem, attr) {
...
...

The JSFiddle is probably the easiest way to see how it all works. You can simply copy it from there to your app. Alternatively, I’ve dumped the code below:

Uncondensed HTML (for those who prefer to use a template)

<div class="timeSelectorDirective"> 
    <div class="section hours">
        <div class="increase" ng-click="increaseHours()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div class="display">
            {{displayHours()}}
        </div>        
         <div class="decrease" ng-click="decreaseHours()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>
    <div class="section minutes">
        <div class="increase" ng-click="increaseMinutes()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div class="display">
            {{displayMinutes()}}
        </div>        
         <div class="decrease" ng-click="decreaseMinutes()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>    
    <div class="section hours">
        <div class="increase" ng-click="switchPeriod()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div ng-if="hours >= 12" class="display">
            PM
        </div>
        <div ng-if="hours < 12" class="display">
            AM
        </div>   
         <div class="decrease" ng-click="switchPeriod()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>
</div>

Timepicker Directive

/* 
    http://www.whatibroke.com/?p=899
*/
 
var app = angular.module('myApp', []);
 
app.controller("MyCtrl", function MyCtrl($scope) {
    $scope.hours = 11;
    $scope.minutes = 45;       
});
 
 
app.directive("ngTimeSelector", function () {
    return {
        restrict: 'EA',
        template: '<div class="timeSelectorDirective"> <div class="section hours"> <div class="increase" ng-click="increaseHours()"> <i class="icon fa fa-caret-up"></i> </div> <div class="display"> {{displayHours()}} </div> <div class="decrease" ng-click="decreaseHours()"> <i class="icon fa fa-caret-down"></i> </div> </div> <div class="section minutes"> <div class="increase" ng-click="increaseMinutes()"> <i class="icon fa fa-caret-up"></i> </div> <div class="display"> {{displayMinutes()}} </div> <div class="decrease" ng-click="decreaseMinutes()"> <i class="icon fa fa-caret-down"></i> </div> </div> <div class="section hours"> <div class="increase" ng-click="switchPeriod()"> <i class="icon fa fa-caret-up"></i> </div> <div ng-if="hours >= 12" class="display"> PM </div> <div ng-if="hours < 12" class="display"> AM </div> <div class="decrease" ng-click="switchPeriod()"> <i class="icon fa fa-caret-down"></i> </div> </div> </div>',
        scope: {
            hours: "=",
            minutes: "="
        },
        replace: true,
        link: function (scope, elem, attr) {
 
            //Create vars
            scope.period = "AM";
 
            /* Increases hours by one */
            scope.increaseHours = function () {
 
                //Check whether hours have reached max
                if (scope.hours < 23) {
                    scope.hours = ++scope.hours;
                }
                else {
                    scope.hours = 0;
                }
            }
 
            /* Decreases hours by one */
            scope.decreaseHours = function () {
 
                //Check whether hours have reached min
                scope.hours = scope.hours <= 0 ? 23 : --scope.hours;
            }
 
            /* Increases minutes by one */
            scope.increaseMinutes = function () {
 
                //Check whether to reset
                if (scope.minutes >= 59) {
                    scope.minutes = 0;
                }
                else {
                    scope.minutes++;
                }
            }
 
            /* Decreases minutes by one */
            scope.decreaseMinutes = function () {
 
                //Check whether to reset
                if (scope.minutes <= 0) {
                    scope.minutes = 59;
                }
                else {
                    scope.minutes = --scope.minutes;
                }
            }
 
 
            /* Displays hours - what the user sees */
            scope.displayHours = function () {
 
                //Create vars
                var hoursToDisplay = scope.hours;
 
                //Check whether to reset etc
                if (scope.hours > 12) {
                    hoursToDisplay = scope.hours - 12;
                }                
 
                //Check for 12 AM etc
                if (hoursToDisplay == 0) {
 
                    //Set to am and display 12
                    hoursToDisplay = 12;
                }
                else {
 
                    //Check whether to prepend 0
                    if (hoursToDisplay <= 9) {
                        hoursToDisplay = "0" + hoursToDisplay;
                    }
                }
 
                return hoursToDisplay;
            }
 
            /* Displays minutes */
            scope.displayMinutes = function () {
                return scope.minutes <= 9 ? "0" + scope.minutes : scope.minutes;
            }
 
            /* Switches the current period by ammending hours */
            scope.switchPeriod = function () {
                scope.hours = scope.hours >= 12 ? scope.hours - 12 : scope.hours + 12;
            }
        }
    }
});

Styles

body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
}
 
.timeSelectorDirective {
    background: none;
    -webkit-user-select: none;      
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.timeSelectorDirective .increase, .timeSelectorDirective .decrease{
    text-align: center;
    vertical-align: middle;    
    color: rgb(112, 112, 112);    
    text-shadow: 0px 1px #FFF;
    cursor: pointer;
    -webkit-transition: 500ms ease-out all;
    -moz-transition: 500ms ease-out all;
    -ms-transition: 500ms ease-out all;
    -o-transition: 500ms ease-out all;
    transition: 500ms ease-out all;
    font-size: 100%;
    border: 1px solid #CCC;
    padding: 3px;
    margin: 3px;
    border: 1px solid #EDE;
}
 
.timeSelectorDirective .increase:hover, .timeSelectorDirective .decrease:hover{
    color: rgba(112, 112, 112, 0.5);   
    border-color: #CCC;
    background-color: #FFF;
}
 
.timeSelectorDirective .increase:active, .timeSelectorDirective .decrease:active{
    color: rgb(112, 112, 112);
    box-shadow: inset 1px 1px 1px #DDD;
}
 
.timeSelectorDirective .section{
    display: inline-block;
}
 
.timeSelectorDirective .display{
    background-color: rgb(247, 247, 247);
    color: #555555;
    padding: 5px;
    margin: 0px 3px;
    min-width: 30px;
    text-align: center;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 1px #FFFFFF;
}

Sample Usage

<div ng-app="myApp">
    <h1><a href='http://www.whatibroke.com/?p=899'>www.whatibroke.com</a></h1>
 
    <div ng-controller="MyCtrl" style="margin-top:40px;">
        <b>Hours: </b>{{hours}} &nbsp;
        <b>Minutes: </b>{{minutes}}
        <ng-time-selector hours="hours" minutes="minutes"></ng-time-selector>
    </div>
</div>

Misc Includes
AngularJS: http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js
FontAwesome: http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
Font: http://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic|Rokkitt:400,700.css

ng-class with ng-repeat – AngularJS

Hey everyone,

Just another quick AngularJS post. This one is for using ng-class with ng-repeat. The goal here is to have a class applied to the non-selected elements. To start with, we’ll chuck the following in our controller:

$scope.transmission = {
selected: null,
options: [
{
name: 'Any'
},			
{	
name: 'Manual'
},			
{
name: 'Automatic'
}			
]
};

Here we’re just creating a few random objects. To keep things simple we’re going with transmission types: a manual car, automatic or any. Next you’ll want to add the markup:

...
<div id='options'>
	<div class='options_wrapper'>
		<div ng-repeat='option in transmission.options' class='options' ng-class='{"line-through": transmission.selected != null && transmission.selected != $index}'>
			<div ng-click='transmission.selected = $index'>
				{{option.name}}
			</div>
		</div>
	</div>
</div>
...

Finally the class to be applied:

.line-through{
	text-decoration: line-through;
}

AngularJS ngAnimate Transitions – Basic Demo

Hey everyone,

I’ve just starting using Angular and went to do a few animations. I had a bit of trouble trying to find anywhere that mentioned what each class does. This is the demo we’ll be making, it’s pretty basic but hopefully enough to get you started: JSFiddle Demo

Dummy Page
To start with, just create a new page with the following. Note that none of the stuff below applies to the animation itself, this is just so that we’ve got something to work with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html ng-app="">
	<head>
		<title>Test Animation</title>
		<link href='/css/styles.css' rel='stylesheet' type='text/css' />
	</head>
	<body>
		<div ng-controller='PeopleController'>
			<div>
				<input type='text' ng-model='name' placeholder='Name' /> <button ng-click='addPerson()'>Add</button>
			</div>
 
			<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'>
				{{person.name}}
			</div>			
		</div>
 
		<!-- Scripts -->
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js'></script>
		<script>
 
			//Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see
			function PeopleController($scope){
				$scope.name = "";
				$scope.people = [
					{ name: "Santa Clause"},
					{ name: "Easter Bunny"},
					{ name: "Tooth Fairy"},
					{ name: "Chris Owens"},
					{ name: "Phillip Farnsworth"},
					{ name: "Clark Kent"},
					{ name: "Lana Lang"}				
				];
 
				$scope.removePerson = function(row){
					$scope.people.splice(row, 1);					
				}
 
				$scope.addPerson = function(){
					$scope.people.push({name: $scope.name});
					$scope.name = "";
				}
			}
		</script>
	</body>
</html>

Adding the ng-animate Directive
The first step to adding the transitions is to add the ng-animate directive:

<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'  ng-animate="'person'">
     {{person.name}}
</div>

Classes for Adding a New Element
Now we’re going to add the styles that are used when a new element is added to the page. To start with, you’ll want to create .person-enter. This is the class that will be animated from. In this instance we want new elements to start off invisible so we’ll set the opacity to 0.

1
2
3
4
5
6
7
8
.person-enter{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 0;
}

Next we’ll want to add the styles for .person-enter.person-enter-active. These will be the styles that we want to animate to. Because we’re going from invisible to visible we’ll adjust the opacity:

.person-enter.person-enter-active{
	opacity: 1;
}

Classes for Removing an Element
Now we’ll add the class to animate from. This will the opposite of what we used when adding an element – start visible, go to invisble:

.person-leave{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 1;
}

And finally the class to animate to when an element is removed:

.person-leave.person-leave-active{
	opacity: 0;
}

All Together Now
Finally we can put the whole thing together. The people boxes should now fade out and in whenever an element is added or removed. You can see it in action here: JSFiddle Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html ng-app="">
	<head>
		<title>Test Animation</title>
		<link href='/css/styles.css' rel='stylesheet' type='text/css' />
 
		<style>
			.person{
				padding: 20px;
				width: 50px;
				height: 50px;
				background-color: #E8FCE4;
				border: 1px solid #C0E2BB;
				float: left;
				margin: 5px;
				text-align: center;
				box-shadow: 2px 2px 2px #DAD3D3;
				text-shadow: 0px -1px 1px #FFF;
				cursor: pointer;
			}
 
 
			/*
				Note: you can condense these, however they've been split to make the explanation a little easier to follow;
			*/
 
			/* This is the class that will be animated *FROM* when a new person is added */
			.person-enter{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 0;
			}
 
			/* This is the class that will be animated *TO* when a new person is added */
			.person-enter.person-enter-active{
				opacity: 1;
			}
 
 
			/* This is the class that will be animated *FROM* when a person is removed */
			.person-leave{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 1;
			}
 
			/* This is the class that will be animated *TO* when a person is removed */
			.person-leave.person-leave-active{
				opacity: 0;
			}
 
 
		</style>
	</head>
	<body>
		<div ng-controller='PeopleController'>
			<div>
				<input type='text' ng-model='name' placeholder='Name' /> <button ng-click='addPerson()'>Add</button>
			</div>
 
			<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'  ng-animate="'person'">
				{{person.name}}
			</div>			
		</div>
 
		<!-- Scripts -->
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js'></script>
		<script>
 
			//Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see
			function PeopleController($scope){
				$scope.name = "";
				$scope.people = [
					{ name: "Santa Clause"},
					{ name: "Easter Bunny"},
					{ name: "Tooth Fairy"},
					{ name: "Chris Owens"},
					{ name: "Phillip Farnsworth"},
					{ name: "Clark Kent"},
					{ name: "Lana Lang"}				
				];
 
				$scope.removePerson = function(row){
					$scope.people.splice(row, 1);					
				}
 
				$scope.addPerson = function(){
					$scope.people.push({name: $scope.name});
					$scope.name = "";
				}
			}
		</script>
	</body>
</html>

Problems
If you’re having issues, one of the first things to check is that you’re on the right version of angular. There have been a lot of changes and many of the styles used in one this version don’t seem to work in the older ones. If there’s anything else that’s not working let me know!

Where to From Here?
There’s heaps more that nganimate can do, make sure you checkout http://www.nganimate.org/.

Twitter Bootstrap Dropdown Button

Dropdown Button – Twitter Bootstrap

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style='text-align:left;'>
	<div class="btn-group">
	  <a class="btn dropdown-toggle btn-success" data-toggle="dropdown" href="#">
	    Button Text
	    <span class="caret"></span>
	  </a>
	  <ul class="dropdown-menu">
	    <li>
	    	<a href="#">Menu Option #1</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #2</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #3</a>
	    </li>
	    <li class='divider'></li>
	    <li>
	    	<a href="#">Menu Option #4</a>
	    </li>
 
	    <li>
	    	<a href="#">Menu Option #5</a>
	    </li>
	  </ul>
	</div>
</div>

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

Change Current Day Color – jQuery FullCalendar

Hey everyone,

Just a quick post on how to change a few of the styles in FullCalendar. All you need to do is add these after the default styles are loaded:

Current Day Background Color

1
2
3
.fc-today{
   background-color: blue;
}

Change Calendar Background Color

1
2
3
4
#calendar .fc-content{
	background-color: #FFFFFF;
	font-size: 80%;
}

Add Box Shadow to Events

1
2
3
#calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

Style Times and Days – Add border radius to headings

1
2
3
4
5
6
7
#calendar .fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}