Nice post on using CSS pseudo-elements

 

Creating pure css icons, without using fonts or svg or images.

http://nicolasgallagher.com/pure-css-gui-icons/

 

Holey cow, these icons are created with just CSS, no fonts, no svg, no images not nothing, just the magic of CSS en pseudo elements.

 

screenshot

 

To see this in live action go to: http://nicolasgallagher.com/pure-css-gui-icons/demo/

Press F12 and be amazed:

image

 

How to use pseudo elements in css:

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

An angularjs switch / toggle, that works in IE8 and modern browser will get css 3 transitions.

Code can be found at: http://plnkr.co/edit/wBFKg33JxG7ABIHBvtik?p=preview

 

image

 

 

 

image

 

Based on the code found at: http://codepen.io/iamtyce/pen/kxrhC

 

html template

<div class="toggle toggle-alternate {{ value }}">
    <label class="{{ value }}">{{ getSwitchText() }}</label>
    <input ng-class="{ isChecked: value == 'off' }" type="radio" name="toggle" value="off" ng-model="value">
    <input ng-class="{ isChecked: value == 'on' }" type="radio" name="toggle" value="on" ng-model="value">
    <span class="switch {{ value }}"></span>
</div>

Part of the code

image

Start progress animation (infinite rotate / spin) on click, without using angulars animation service ($animate).

 

See code at, Plunker: http://plnkr.co/edit/jUzCC1FmtgxdX4gWTVIW?p=preview

 

I used a custom directive with isolated scope:

<!-- App scripts -->
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", []);


        }());
   
        (function () {
            "use strict";

            // Adds an animation to an element.
            var directive = function () {
                function link($scope, element, attributes, controller) {

                    $scope.$watch('loading', function (newValue, oldValue) {
                        if (newValue === true) {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                            element.addClass("progress-indicator fa fa-refresh spin");
                        }
                        else {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                        }
                    });   
                }

                return {
                    restrict: "EA",  // Directive be used as element and as attribute.
                    link: link,
                    scope: {
                        // This directive expects an attribute "loading".
                        // The value of the attribute "loading" will be watched.
                        // When this value === true, classes will be added to "show" and animate a progressindicator.
                        // When this value !== true, classes will be removed, to stop animation and "hide" the progressindicator.
                        loading: "=loading"
                    }
                };
            };

            angular.module('spike').directive('zvdzProgress', [directive]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, $animate) {
                $scope.title = "Start progress animation on click.";
               
                $scope.isLoading = false;

                $scope.start = function () {
                    $scope.isLoading = true;
                };

                $scope.stop = function () {
                    $scope.isLoading = false;
                };
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>

 

<div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            <button ng-click="start()">Start</button>
            <br />
            <br />
            <button ng-click="stop()">Stop</button>
            <br />
            <br />
            <div zvdz-progress loading="isLoading"></div>
        </div>
    </div>

 

 

image

 

On start ng-click, a refresh icon is shown that spins:

image

Fix table-cell height overflow-y (scroll) in a CSS 3 full page 100% height layout

 

If you are using display: table, display: table-row and display: table-cell in CSS to structure your HTML, then restricting the height of a content cell is difficult. If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump:

 

image

 

Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div. This div should get the overflow-y property, like:

<div class="table" style="height: 100%;">
    <div class="row">
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">Cell 1</div>
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">
            <!-- Use inner div's with position relative and absolute, to fix cell height,
                 making it overflow correctly. -->
            <div style="position:relative; height: 100%">
                <div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;">

To see the code live: http://plnkr.co/edit/HWTsCsUpddHP3rZsMUtz?p=preview

How to fix: top row border is invisible, when highlighting the borders of a row using display table and display table-row in CSS.

If you want to highlight the borders of a row, when using display table and display table-row, like:

 

image

 

You must style the row bottom, left and right borders, but for the top border you need to style the cells, otherwise the top border of the row will not show, for rows that have other rows before it.

 

image

 

<!DOCTYPE html>
<html>
<head>
    <title>Basic styling research page.</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            padding: 20px;
        }

        .table {
            display: table;
            /* Show borders, when using display: table. */
            border-collapse: collapse;
        }

        .tablerow {
            display: table-row;
            border: 1px solid rgb(218, 218, 218);
        }

        /* Add some spacing between the first and second column. */
        .tablerow div:first-child {
            padding-right: 10px;
        }

        .tablecell {
            display: table-cell;
        }
        
        /* Style the bottom, left and right row borders. */
        .selected {
            border: 1px solid #1984c8;
        }

        /* Style the top of each cell to fake the row top border. */
        .selected div {
            border-top: 1px solid #1984c8;
        }
        
    </style>
</head>
<body>
    <div class="table">
        <div class="tablerow">
            <div class="tablecell">Cell 1.1</div>
            <div class="tablecell">Cell 1.2</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">Cell 2.1</div>
            <div class="tablecell">Cell 2.2</div>
        </div>
        <div class="tablerow selected">
            <div class="tablecell">Cell 3.1</div>
            <div class="tablecell">Cell 3.2</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">Cell 4.1</div>
            <div class="tablecell">Cell 4.2</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">Cell 5.1</div>
            <div class="tablecell">Cell 5.2</div>
        </div>
    </div>
</body>
</html>

Variable sized column with ellipsis in a table

If you want a column of a table in HTML to expand and you want the text to show "ellipsis" for overflowing text, you can use the solution found at:

 

http://stackoverflow.com/questions/17345158/variable-sized-column-with-ellipsis-in-a-table

 

Just give each cell for the specific column the following class:

.expand-column
        {
            max-width: 1px;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

Best practices for using relative paths in CSS, HTML and ASP .NET

In many cases, elements or controls on your page must refer to an external resource such as an image or another *.aspx file. To refer to these resources I prefer to use relative paths, because on my development machine the URL might be http//:localhost but on the production machine the URL might have a host header, like http://mywebapp.roelvanlisdonk.nl. or an other port like http://localhost:81.

When using relative paths there are two kinds of elements

  • Not web server controls like (html tags, css statements etc.)
  • Web server controls (ASP .NET server controls)

Not web server controls (html tags, css statements etc.)

Always start an URL with a "/", no matter where you are in the tree structure, this relative URL will always work

  • "/Images/Logo.png"
  • <img alt="Logo" src="/Images/Logo.png" />

Don’t use:

  • "../" like "../Images/Logo.png"
  • "no slash at all" like "Images/Logo.png"

 

Web server controls

Always start an URL with a "~/"

  • "~/Images/Logo.png"
  • Response.Redirect("~/Pages/MyPage.aspx");
  • <asp:HyperLink ID="HyperLink1" runat="server" navigateUrl="~/Pages/Default.aspx">Test HyperLink</asp:HyperLink>

Don’t use:

  • "/" like "/Images/Logo.png"
  • "../" like "../Images/Logo.png"
  • "no slash at all" like "Images/Logo.png"

 

See: http://msdn.microsoft.com/en-us/library/ms178116.aspx

Showing, Styling and DataBind items in an ASP .NET 4.0 CheckBoxList using CSS and EF4.0

I wanted to show records in the ProductCategory table of the SQL Server AdventureWorks database in a ASP .NET 4.0 by using a CheckBoxList, without writing any code.

Result

image

 

CheckedListBox.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="CheckedListBox.aspx.cs" Inherits="Rvl.Demo.AspNet4.EF.WebApplication.Pages.CheckedListBox" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="../Styles/CheckedListBox.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        CheckedListBox page
    </h2>
    <asp:CheckBoxList 
        ID="PcCheckBoxList" 
        runat="server"
        DataSourceID="PcDataSource"
        DataTextField="Name"
        DataValueField="ProductCategoryID"
ondatabound="PcCheckBoxList_DataBound"> </
asp:CheckBoxList> <asp:EntityDataSource ID="PcDataSource" runat="server" EnableDelete="true" EnableInsert="true" EnableUpdate="true" ConnectionString="name=AdventureWorksEntities" DefaultContainerName="AdventureWorksEntities" EntitySetName="ProductCategory" > </asp:EntityDataSource> </asp:Content>

 

CheckedListBox.css

div.main h2
{
    margin-bottom: 10px;
}
div.main label
{
    padding-left: 30px;
}

You can style the labels of the checkboxes with  CSS, because they are rendered as <input type=”checkbox” … /><label for=”…”></label> in html, like:

 

<table id="MainContent_PcCheckBoxList">

<tr>

<td><input id="MainContent_PcCheckBoxList_0" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$0" value="1" /><label for="MainContent_PcCheckBoxList_0">Bikes</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_1" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$1" value="2" /><label for="MainContent_PcCheckBoxList_1">Components</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_2" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$2" value="3" /><label for="MainContent_PcCheckBoxList_2">Clothing</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_3" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$3" value="4" /><label for="MainContent_PcCheckBoxList_3">Accessories</label></td>

</tr>

</table>

 

DataBind to Selected property

You can’t declaratively bind to the “Selected” property of you CheckBoxList items.

So if you want to check some checkboxes in the CheckBoxList, you should do that in the DataBound event of the CheckBoxList control. This event will fire after the control is databound, so it is filled with items.

protected void PcCheckBoxList_DataBound(object sender, EventArgs e)
        {
            // Check the first and last item
            this.PcCheckBoxList.Items[0].Selected = true;
            this.PcCheckBoxList.Items[3].Selected = true;

            // To check them all, use:
            //foreach (ListItem li in this.PcCheckBoxList.Items)
            //{
            //    li.Selected = true;
            //}
        }

 

 

Solution Explorer (Project Structure)

image

 

Steps

  1. Create a new ASP .NET 4.0 WebApplication in VS2010
  2. Add a ADO .NET Entity Data Model (connected to the SQL Server 2008 R2 AdventureWorks database)
  3. Add the ProductCategory table to you’re ADO .NET Entity Data Model
  4. Add a Web Form (CheckedListBox.aspx)
  5. Add a Style Sheet (CheckedListBox.css)
  6. Set CheckedListBox.aspx as startup page
  7. Run the project

Styling, branding SharePoint 2010 based on Active Directory users and groups, no code required, only CSS and Document Permissions

To style a SharePoint 2010 site, based on the current user and his active directory role, I use document permissions on css files in the Style Library.

The goal of the blog post is to Show a a logo of a man, when the current user is member of the Active Directory role [Men] and show a logo of a Woman, when the current user is member of the Active Directory role [Women].

 

Woman (Elise) signs in

image

 

Men (Bas) signs in

image

 

Guide

  • In Active Directory create two roles: [Men] and Women
  • In Active Directory create the users [Bas] and make him member of the role [Men]
  • In Active Directory create the users [Elise] and make her member of the role [Women]
  • In SharePoint 2010 go to Site Actions > Site Permission on you’re site collection top level site
  • Grant Permissions [Full Control] to the Active Directory groups: [Men] and [Women]

image

  • Create two css files on you’re desktop: Men.css and Women.css
  • Men.css contains:

.logo
{
    background-image:url("/Style%20Library/Images/Men.png");
    background-repeat: no-repeat;
    background-position: top left;
    height: 425px;
}

  • Women.css cotains:

.logo
{
    background-image:url("/Style%20Library/Images/Women.png");
    background-repeat: no-repeat;
    background-position: top left;
    height: 425px;
}

 

  • Go to you’re SharePoint top level site, click on Site Actions > Site Settings

image

  • Site Administration > Content and structure

image

  • Upload Women.png and Men.png to the Style Library\Images by dragging and dropping the files (New > Item > Upload Multiple Files…)
  • Create Images folder if it does not exist in the [Style Library]

image

image

  • After upload check the files in

image

  • Upload Men.css and Women.css to the Style Library and check in files
  • Manage permissions on Men.css to include only men (click on Manage Permissions > Stop inherriting permissions), remove user permissions for women
  • Manage permissions on Women.css to include only women(click on Manage Permissions > Stop inherriting permissions), remove user permissions for men

image

  • Open Microsoft SharePoint Designer and open you’re site then click on Master Pages > v4.master
  • Click on Attach Style Sheet, browse for the Men.css stylesheet and click on Import > OK
  • Repeat for Women.css
  • The only thing what this does, is adding the following lines at the end of the <head> tag in the master page

@import url(‘../../Style%20Library/Men.css’);
@import url(‘../../Style%20Library/Women.css’);

image

  • Make sure all persons have read rights on the Master Page Gallery and the v4.master is checked in after you edit the file to import Men.css and Women.css

image 

  • On you’re team site, click in the ribbon on Page > Edit

image

  • Click in the ribbon on Format Text > HTML > Edit HTML Source
  • Add <div class=”logo”></div> to the content editor webpart

image

  • Click on OK then in the ribbon on Save

 

Result, see beginning of this blog post