Align radio buttons with label on one line

Use relative positioning for the input element and correct the top position of the input, based on the line-height of the element containing the input element.

image

<!DOCTYPE html>
< html>
< head>
    <meta charset="UTF-8">
    < title>Align radio button with label on one line</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   
    <!–<link rel="stylesheet" href="plain.css">
    <script type="text/javascript" src="plain.js"></script>–>
    <style>
        .radio-container {
            box-sizing: border-box;
            font-family: ‘Open Sans’, sans-serif;
            font-size: 13px;
            line-height: 30px;
            margin: 0;
             outline: 0;
            overflow: hidden;
            padding: 0;
        }

        .radio-container input {
             box-sizing: border-box;
            margin: 0;
            outline: 0;
            padding: 0;
            position: relative;
            top: 9px;
            vertical-align: top;
         }
    </style>
< /head>
< body>
    <h1>Align radio button with label on one line</h1>
    <div class="radio-container">
         <input name="red" type="radio" value="red" checked="checked">
        red
        <input name="green" type="radio" value="green">
        green
        <input name="blue" type="radio" value="blue">
        blue
    </div>
< /body>
< /html>

Animate the navigation between pages with CSS3 and Angular 1.x

Just created a code pen to demonstrate the navigation between pages in Angular 1.x by using css3.
The animation should mimic scrolling the pages from top to bottom, now I could have just  used TypeScript,
to calculate the correct scroll position, but in this case I wanted to use pure CSS3.
I had some difficulties to create this animation, because my first reaction was, to try and use ng-if or 
ng-show / ng-hide, to hide the pages that are not visible. After hours of trying, I did not succeed, 
so I tried a different approach, by stacking the pages on top of each other and moving “previous pages” 
outside of the list at the top and moving next pages outside of the list at the bottom, without using 
ng-if or ng-hide.
Note:
- by using a translateX you could make the pages scroll from left to right instead of from bottom to top.
- by switching the values for translateY, you could make the pages scroll from top to bottom.
http://codepen.io/roelvanlisdonk/pen/YGZqgO/"
image

How to create a triangle with pure CSS and HTML

This post describes in 3 examples, how you can create a triangle with pure CSS and HTML.

 

clip_image001[4]

 

HTML
<br />
Example 1
<br />
<br />
<div class="example1"></div>
<br />
Example 2
<br />
<br />
<div class="example2"></div>
<br />
Example 3
<br />
<br />
<div class="example3"></div>
CSS
.example1 {
height: 40px;
width: 40px;
border-left: 10px solid blue;
border-right: 10px solid blue;
border-bottom: 10px solid #000000;
border-top: 10px solid #000000;
}
.example2 {
height: 20px;
width: 20px;
border-left: 10px solid blue;
border-right: 10px solid blue;
border-bottom: 10px solid #000000;
border-top: 10px solid #000000;
}
.example3 {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #2f2f2f;
}

CSS class naming guideline

Lets assume you want to create a "error notification" component and this component contains 2 sub components, a "close button" and a "read more" button in an application called "spike", something like:

 

image 

 

How do I setup my CSS to style the component and it’s subcomponents.

Well I like to name components and subcomponents by what they are and try to keep the names descriptive, but short:

 

<!doctype html>
<html>
<head>
<title>Research</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Research page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Icons -->
<link rel="shortcut icon" href="/Images/icon256x256.png">
<link rel="icon" href="/Images/icon_96x96.png">
    
<!-- App styles -->
<style>
/* Class must be set on the root element of the "error notification" component. */
.spike-error-notification {
}
/* Styling for the "close button". */
.spike-error-notification
.spike-close-button {
}
/* Styling for the "read-more button". */
.spike-error-notification
.spike-read-more-button {
}
</style>
</head>
<body>
<div class="spike-error-notification">
<button class="spike-close-button" type="button"><span>×</span></button>
<strong>An unhandled exception occurred.</strong>
<button class="spike-read-more-button" type="button">Read more...</button>
</div>
</body>
</html>

How to show html embeded inside JSON to the user with AngularJS and ngSanitize.

 

image

 

I want to show HTML to the user, that was stored in a SQL Server Database. The data was queried from the SQL Server Database by using Entity Framework, then the C# model was converted to JSON, by using JSON.net and send to the browser by the ASP .NET web api service.

To show this HTML to the user with AngularJS, I used ngSanitize and the ng-bind-html directive:

(at this moment plunker is down, so I will edit this post in the future to add a plunker).

 

If the HTML contains angular bindings / directives, you can use the compile service to bind the scope to the html fragment:

https://docs.angularjs.org/api/ng/service/$compile

So instead of using the ng-bind-html, you can use this directive:

https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
<!-- Why is angular added to the html tag? Because IE8 won't work without it. -->
<title>Spike page</title>
<meta charset="utf-8">
<!-- Why is "edge" used? Because we want the highest support for modern standards. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Library scripts -->
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
<!-- Live reload script with grunt. -->
<!--<script src="http://localhost:35729/livereload.js"></script>-->
<!-- App styles -->
<style>
/*
A small custom reset stylesheet is used, to fix style differences between browsers.
*/
html, body
{
height: 100%;
}
body, div, p, ul, li, button
{
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
outline: 0;
padding: 0;
}
body
{
background-color: #F1F1F1;
padding: 20px;
}
.spike-title
{
color: #393939;
}
.spike-content
{
color: #393939;
}
.spike-content-with-class
{
color: #ff0000;
}
</style>
<!-- App scripts -->
<script>
(function ()
{
"use strict";
var app = angular.module("spike", ["ngAnimate", "ngSanitize"]);
}());
(function ()
{
"use strict";
var app = angular.module("spike");
var controller = function ($scope)
{
$scope.title = "How to show html embeded inside JSON to the user with AngularJS and ngSanitize.";
var json = '{ \"html\":\"<br><br><p>Some html in JSON.</p><br><br><p class=\\"spike-content-with-class\\">Some html in JSON with a class attribute.</p>\" }';
var content = JSON.parse(json);
$scope.content = content.html;
};
app.controller("main", ["$scope", controller]);
}());
</script>
</head>
<body>
<div ng-controller="main">
<h2 class="spike-title">{{ title }}</h2>
<div class="spike-content" ng-bind-html="content"></div>
</div>
</body>
</html>

Creating a vertical linear gradient border with solid border as fallback for older browsers.

Code can be found here: http://plnkr.co/edit/EgLVcgyPcbu7AngvnnOy?p=preview

image

 

<!DOCTYPE html>
<html>
<head>
<title>Vanilla javascript spike page.</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- App styles -->
<style>
html, body {
height: 100%;
}
body, div, p, ul, li {
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
outline: 0;
padding: 0;
}
body {
padding: 20px;
background-color:#393939;
}
.bordered {
color: #F1F1F1;
display: inline-block;
width: 180px;
height: 100px;
border-right: 1px solid #F1F1F1;
border-image: linear-gradient(to bottom, #393939 0%,#F1F1F1 25%,#F1F1F1 75%,#393939 100%) 1 stretch;
}
</style>
</head>
<body>
<div class="bordered">A linear gradient border:</div>
</body>
</html>