SVG Background Image with PNG Fallback using Modernizr

In this example Modernizr is used to detect SVG support. CSS is then used to display the image of a bike (PNG or SVG) as the background for a DIV. SVG is a scalable vector graphic, it will always be sharp no matter how it’s re-sized. PNG is a raster graphic, it can become pixelated if re-sized.


Visit the Modernizr download page and select SVG and Add CSS Classes options. Generate the code and download the file.


By adding this Modernizr script to the page we get either the svg or no-svg class name added to the html tag. Here’s how it looks in the console:


We can utilize these classes with CSS selectors to fallback to the PNG image if SVG is not supported.

<!DOCTYPE html>
	<title>SVG Background Image with PNG Fallback using Modernizr</title>
	<style type="text/css">
		#bike {
			width: 792px;
			height: 612px;
		/* Use the PNG if SVG is not supported */
		.no-svg #bike {
			background-image: url(bike.png);
		/* Use the SVG if supported */
		.svg #bike {
			background-image: url(bike.svg);
		/* Hide the SVG description if using PNG */
		.no-svg #svg-description {
			display: none;
		/* Hide the PNG description if using SVG */
		.svg #png-description {
			display: none;
	<script type="text/javascript" src="modernizr.custom.65829.js"></script>
<div id="bike"></div>
<p id="svg-description">This bike is a scalable vector graphic.</p>
<p id="png-description">This bike is a raster graphic.</p>

View a demo here. Download the source files.

Modernizr SVG Test

To determine how Modernizr is testing for SVG support we can look at the non-minified version of the code. The sections involved in SVG testing are:

ns = {'svg': ''}
tests['svg'] = function() {
    return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect;

The createElementNS method creates an element node given a namespace URI and a qualified name.

Let’s look closer at the comparison operator:


In older browsers document.createElementNS may be undefined because this method doesn’t exist. In JavaScript undefined is a falsey value. Therefore the not(!) of undefined is true. The not of true is false. So if a browser doesn’t support createElementNS this statement returns false.

In newer browsers createElementNS exists. Therefore document.createElementNS will return the function. A function isn’t falsey, therefore the statement returns true.

!!document.createElementNS(ns.svg, ‘svg’).createSVGRect

Here a SVGSVGElement element called svg is created in the ‘’ namespace. Then the createsSVGRect method is called. If the method exists the statement returns true. If the method is undefined the statement returns false.

Combining the two operands means that Modernizr verifies that a SVGSVGElement can be created and that it has a method called createsSVGRect.

- Bicycle Vector Image
- Namespaces Crash Course
- Namespaces in HTML5

Posted in Uncategorized | Leave a comment

Load AngularJS after Office Initialized

This JavaScript code snippet shows how to load an AngularJS application after Office has been initialized (or some other event has occurred). The key point here is that you need to do a manual bootstrap because the DOMContentLoaded event will have already been fired.

Office.initialize = function () {

    //load angular app after office has been initialized
    $.getScript('services.js', function () {
        $.getScript('app.js', function () {
            $.getScript('controllers.js', function () {

                //manually start angular application
                angular.bootstrap($('#container'), ['myApp']);



- Angular Bootstrap
- JavaScript API for Office (v1.1)
- jQuery.getScript()

Posted in Uncategorized | 2 Comments

AngularJS Charts with CanvasJS

This example uses CanvasJS to chart Nintendo’s console sales in an AngularJS app. Clicking Bootstrap nav-tabs trigger the Angular controller to change the chart type (bar, column, pie chart etc).


The file structure:

In index.html setup chartApp and add all the Angular directives, Bootstrap nav-tabs, and a div with id chartContainer for the CanvasJS chart:

<!DOCTYPE html>
<!DOCTYPE html>
<html ng-app="chartApp">
    <title>AngularJS Charts with CanvasJS</title>
    <link rel="stylesheet" href="//">
    <link rel="stylesheet" href="//">
    <script src=""></script>
    <script src="//"></script>
    <script src="canvasjs.min.js"></script>
    <script src="//"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="directives.js"></script>
        .container {
            margin-top: 40px;
            width: 970px !important;
        #chartContainer {
            margin-top: 30px;
            height: 500px; 
            width: 100%;
    <div class="container" ng-controller="ChartController">
        <div class="row">
            <div class="col-xs-12">
                <ul class="nav nav-tabs" mc-toggle-active>
                    <li class="active"><a href="" ng-click="changeChartType('bar')">Bar</a></li>
                    <li><a href="" ng-click="changeChartType('column')">Column</a></li>
                    <li><a href="" ng-click="changeChartType('line')">Line</a></li>
                    <li><a href="" ng-click="changeChartType('area')">Area</a></li>
                    <li><a href="" ng-click="changeChartType('pie')">Pie</a></li>
                    <li><a href="" ng-click="changeChartType('doughnut')">Doughnut</a></li>
                    <li><a href="" ng-click="changeChartType('scatter')">Scatter</a></li>
        <div class="row">
            <div class="col-xs-12">
                <div id="chartContainer"></div>

In app.js assign the Angular app to a variable called app:

//chartApp does not have any dependencies
var app = angular.module('chartApp', []);

In controller.js setup the ChartController. This will create the chart and update it’s layout when the chart type changes:

//inject the $scope service into the controller
app.controller('ChartController', function($scope) {

    $scope.chart = new CanvasJS.Chart("chartContainer", {
        theme: 'theme1',
            text: "Nintendo Console Sales"              
        axisY: {
            title: "million units",
            labelFontSize: 16,
        axisX: {
            labelFontSize: 16,
        data: [              
                type: "bar",
                dataPoints: [
                    { label: "Wii U", y: 6.17 },
                    { label: "Wii", y: 101.06 },
                    { label: "GameCube", y: 21.74 },
                    { label: "64", y: 32.93 },
                    { label: "SNES", y: 49.10 },
                    { label: "NES", y: 61.91 },
                    { label: "3DS", y: 43.33 },
                    { label: "DS", y: 153.99 },
                    { label: "Advance", y: 81.51 },
                    { label: "GameBoy", y: 118.69 },

    $scope.chart.render(); //render the chart for the first time
    $scope.changeChartType = function(chartType) {
        $[0].type = chartType;
        $scope.chart.render(); //re-render the chart to display the new layout


In directives.js setup a custom directive to handle changing the nav-bar tabs active class:

//when a tab is clicked make it active
app.directive('mcToggleActive', function() {
	return {
		link: function(scope, element, attrs) {
			element.find('li').on('click', function() {

View a demo here. Download the source files.

- Bootstrap Disable Responsive
- CanvasJS Documentation

Posted in Uncategorized | 1 Comment

Bootstrap 3 Responsive Breakpoint Values

The breakpoint values Bootstrap uses for media queries are pretty handy. The code below comes from the Bootstrap 3 Sass download in _variables.scss:

// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

Similarly the code below comes from the Bootstrap 3 Less download in _variables.less:

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
Posted in Uncategorized | Leave a comment