Swiss Life Business Slider

by andreas_karz

HTML

<script src="https://code.angularjs.org/1.2.16/angular-sanitize.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>

<div ng-app="BusinessSlider">
    <div  ng-controller="mainController">
        <table class="slider" border="0">
            <tr>
                <td class="caption left">Etablierte Unternehmung</td>
                <td class="spacer"></td>
                <td class="element" ng-click="comp=1;track();"><span ng-class="{active:comp==1}"></span></td>
                <td class="element" ng-click="comp=2;track();"><span ng-class="{active:comp==2}"></span></td>
                <td class="spacer"></td>
                <td class="caption right">Start up Unternehmen</td>
            </tr>
        </table>
        <table class="slider" border="0">
            <tr>
                <td class="caption left">Obligatorische Vorsorge</td>
                <td class="spacer"></td>
                <td class="element" ng-click="vor=1;track();"><span ng-class="{active:vor==1}"></span></td>
                <td class="element" ng-click="vor=2;track();"><span ng-class="{active:vor==2}"></span></td>
                <td class="spacer"></td>
                <td class="caption right">Freiwillige Vorsorge</td>
            </tr>
        </table>
        <table class="slider" border="0">
            <tr>
                <td class="caption left">Sicherheit</td>
                <td class="spacer"></td>
                <td class="element" ng-click="sec=1;track();"><span ng-class="{active:sec==1}"></span></td>
                <td class="element" ng-click="sec=2;track();"><span ng-class="{active:sec==2}"></span></td>
                <td class="element" ng-click="sec=3;track();"><span ng-class="{active:sec==3}"></span></td>
                <td class="spacer"></td>
                <td class="caption right">Chancen & Risiken <span class="info">(Partizipation am Kapitalmarkt)</span></td>
          ...

CSS

body{
    margin: 30px;
    font-family:Calibri;
    font-size:12pt;
    background-color:#FFF;
}


table.slider{
    border: 0px;
    border-collapse: collapse;
    width: 700px;
    height:70px;
    margin-bottom:20px;
}

td.caption{
  text-align:center;
  display: table-cell;
  width: 200px;
  height:60px;
  padding:10px;
  border: 1px solid #ddd;
  white-space: normal;
  font-family: 'Legacy Serif ITC W01 Bk','Libre Baskerville', serif;
  color: #d82034;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

td.spacer{
    width:10px;
}

td.element{
    text-align:center;
    padding-top:4px;
    cursor: pointer;
}

td.element span{
    width:40px;
    height: 40px;
    display: inline-block;
      background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAANElEQVR42u3OMQ0AAAgEMfy7e0XggI2w9JLbWyVJWkvS1wMCAgICAgICAgICAgICAkrSSwNF0mnLGnXwBAAAAABJRU5ErkJggg==')
    no-repeat
    center center;
  width:40px;
  height:40px;
}

td.element span.active{
  background:
...

JavaScript

// #region Basis Webtrends Script
    window.webtrendsAsyncInit=function(){
        var dcs=new Webtrends.dcs().init({
            dcsid:"dcs38e2b400000k30uk4kddva_9m5j",
            domain:"statse.webtrendslive.com",
            timezone:1,
            i18n:true,
            adimpressions:true,
            adsparam:"WT.ac",
            offsite:true,
            download:true,
            downloadtypes:"xls,doc,pdf,txt,csv,zip,docx,xlsx,rar,gzip,pptx,ppt",
            onsitedoms:"swisslife.com",
            fpcdom:"",
            splitvalue:"DE",
            plugins:{
                hm:{src:"//s.webtrends.com/js/webtrends.hm.js"},
                yt:{src:"//s.webtrends.com/js/webtrends.yt.js"}
            }
            }).track();
    };
    (function(){
        var s=document.createElement("script"); s.async=true; s.src="http://www.swisslife.com/content/dam/analytics/internet/a10/webtrends.js";    
        var s2=document.getElementsByTagName("script")[0]; s2.parentNode.insertBefore(s,s2);
    }());
// #endregion

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

BusinessSlider.controller('mainController', function($scope) {

    // #region Steuerflags definieren
        $scope.comp = 1;
        $scope.vor  = 2;
        $scope.sec  = 3;
        $scope.del  = 1;
        var clicks = 0;
    // #endregion
    
    // #region Überwachung der Steuerflags
        $scope.$watch('comp', function (newValue, oldValue) { $scope.change(); });
        $scope.$watch('vor', function (newValue, oldValue) { $scope.change(); });
        $scope.$watch('sec', function (newValue, oldValue) { $scope.change(); $scope.changeSec(); });
        $scope.$watch('del', function (newValue, oldValue) { $scope.change(); $scope.changeDel(); });
    // #endregion

    // #startregion Webtrends Tracking
        $scope.track = function(e,t) {
            e = (typeof(e)=='undefined')?'click':e;
            t = (typeof(t)=='undefined')?'':t;
            clicks += 1;
            if(clicks %...