Month: July 2015

  • Styling tables with CSS

    This is how you replicate cellspacing and cellpadding with CSS. table.css {     width:50%;      display: table;      border-collapse: separate;      border-spacing: 20px;      border:1px black solid; } .css td{     border:1px green solid;     padding:10px; } View the demo Download the demo

  • Forms in Angular

    Most of the code is in the HTML. Here are the main points: On the ‘form’ element itself add ‘novalidate’ attribute to turn off the default validation that some browsers have, have a name, as well as ‘ng-submit=”formName.$valid && Ctrl.submitFunction()”. The last bit does the submit function (not the submit button), checks if the form…

  • Demonfall Week 12 Progress

    Might not look like much, but I worked quite a lot on Demonfall this week. I redesigned the items to coins so they look more like collectables and added a little shine to attract attention. Originally the gold coin was just going to have a 1 on it but the logo I made made me…

  • Making Tabs in Angular

    The js: (function(){     var app = angular.module(‘tabModule’,[]); app.controller(‘TabController’, function(){     this.tab = 1;     this.setTab = function(newValue){       this.tab = newValue;     };     this.isSet = function(tabName){       return this.tab === tabName;     };   }); })(); and the HTML <section class=”tab” ng-controller=”TabController as panel”>         <ul>             <li ng-class=”{active:panel.isSet(1)}”>                 <a ng-click=”panel.setTab(1)” href>Description</a></li>…

  • Filling the extra areas of the screen in Unity

    A portrait game with a ratio of 4:3 fits perfectly on an ipad but on something like an iphone 5 that has a bigger height, there will be some empty space on the top and bottom. To fill up those spaces with a solid colour, make a ui image element, insert a square image, set…

  • Print CSS

    Here is a some default print css to get started. @media print { * { background: #fff none !important; color: #000 !important; } a:after { content: ” (” attr(href) “) “; font-size: 0.8em; font-weight: normal; /* wrapping required for windows 8 phone and ie10,11 */ -ms-word-break: break-all; word-break: break-all; display: inline-block; /* Non standard for…

  • Accessible Icons

    A common example of needing icons to be accessible is when they’re used as buttons eg. search button, left and right navigation buttons etc. To do this, add the css: .fa span{ text-indent: -9999px; display: inline-block; } and in your html just add the text in a span inside the icon like so: <i class=”fa fa-search><span>search</span></i>…

  • Demonfall Week 11 Progress

    A day late than the usual update. I was trying to figure something out yesterday and it was doing my head in. Unity works in strange ways sometimes.. Anyways, got it working today thanks to the fine people on the internet. This week got some of the UI designed aka the white buttons above. They…