JSFiddle

  • CSS Center of the Universe

    A method of centering content both vertically and horizontally.

    <body>
        <div class="center-of-universe">
            <div>
                <div>
                    <div>
                        <h1>Wow.</h1>
                        <h2>This content</h2>
                        <p>could not be more uninteresting.</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
  • Angular ngFocus Demonstration #65 is the latest revision

    This is a followup proposal for ng-focus. In this method you specify a scope variable to bind to focus status. When you set that value from the controller, focus is set. When focus changes, the scope variable changes. The same idea would work for blur and select too. This is a followup to: http://jsfiddle.net/bseib/WUcQX/

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function ($scope) {
    
    	$scope.folks = [
     		{id: 123, name: 'ellen'},
     		{id: 714, name: 'frank ...
  • Angular focus timing Demonstration #184 is the latest revision

    Unhide a div, followed by set focus on an element that just became visible. Details for suggested solution blogged here: http://goo.gl/4rdZa

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function ($scope) {
    
        $scope.form = {
            color1: '',
            color2: '',
            color3: '',
        };
        $scope.isShowDemo1 = false;
        $scope.isShowDemo2 ...
  • Angular ngTarget Demonstration #89 is the latest revision

    I propose this method of setting focus in angular. You add the ng-target attribute to your element, then call .focus() on the $scope variable you specified. Works for blur() and select() too. Details blogged here: http://goo.gl/4rdZa

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function ($scope) {
    
        $scope.form = { color: '' };
        $scope.onChange = function () {
            if ("blur" === $scope.form ...
  • Twitter Bootstrap scrolling dropdown-menu #11 is the latest revision

    How to style the dropdown menu so that it scrolls

    <div class="container">
        <div id="thing">
            <div class="btn-group">                 
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <span>Short List</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                    </ul>
                </div>
    
                    <div class="btn-group">                 
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <span>Long List</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4 ...</a></li></ul></div></div></div>
  • Angular + Bootstrap Alerts #30 is the latest revision

    How to dismiss bootstrap alerts while keeping them in the DOM, and how to change their type. The controller would change their type by setting $scope.alertType

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function($scope) {
        $scope.isHideAlert = false;
        $scope.alertMessage = "This is the alert message ...
  • Angular + Bootstrap Alerts

    How to dismiss bootstrap alerts while keeping them in the DOM, and how to change their type. The controller would change their type by setting $scope.alertType

    var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function($scope) {
        $scope.isHideAlert = false;
        $scope.alertMessage = "This is the alert message ...