JSFiddle

  • Angular 1.3 Understanding (again) $watch

    jQuery 1.11.0, HTML, CSS, JavaScript

    angular
        .module('mcDemo', [])
        .controller('ParentCtrl', function($scope) {})
        .controller('ChildCtrl', function($scope) {})
    ;
  • AngularJS 1.3 Pictures

    jQuery 1.11.0, HTML, CSS, JavaScript

    angular
        .module('mcDemo', [])
        .controller('MyFormCtrl', function($scope) {
            $scope.form = {};
            $scope.gotPicture = function(pictureFile) {
                console.log('Got picture file', pictureFile);
            }
        })
    .directive ...
  • AngularJS 1.3 Form

    jQuery 1.11.0, HTML, CSS, JavaScript

    angular
        .module('mcDemo', [])
        .controller('ParentCtrl', function($scope) {})
        .controller('ChildCtrl', function($scope) {})
    ;
  • Angular 1.3 Starting Point

    jQuery 1.11.0, HTML, CSS, JavaScript

    
    angular
        .module('mcDemo', [])
        .controller('ParentCtrl', function($scope) {})
        .controller('ChildCtrl', function($scope) {})
    ;
  • &share CSS BUTTON Test - pure CSS

    No-Library (pure JS), HTML, CSS, JavaScript

    /*
        &share CSS Test v02SEP2014
        
        Problem:
        
        Use just CSS to recreate the button on this link
    
            http://i.imgur.com/gnZnY ...
  • &share CSS LAYOUT Test - pure CSS

    No-Library (pure JS), HTML, CSS, JavaScript

    /** 
     &share CSS Alignment Test v01SEP2014
     
     Problem:
     
     In the bottom-right pane we have the output of the combination of HTML & CSS. We expected to see the "Module" aside to be aligned nicely to the right of the "title" blocks and that the "Site" header also aligns nicely.
     
     Task (basic): modify to make the Module aligned nicely with the sections and header.
     
     Task (stretch 1): Go 'crazy', make that responsive. At the least we'd expect to see the aside (which will one day have links) become horizontal and stack between the header and the sections. Maybe you have an idea to make it even awesomer between mobile/tablet/desktop?
     
     Task (stretch 2): Ok, crazier time. We'd really expect to see the aside collapse with a link (preferably a hamburger icon) to open it and the header to now align with the sections. Fyi animations make us all fluttery in the belly.
     
     Instructions:
     
     1. Click the 'Fork' button up at the top
     2. Modify HTML/CSS as required
     3. When complete, click the 'Update' button
     4. Send the URL of your completed solution (it should look like jsfiddle.net/[code]/[number])
     5. If you attempt the stretch tasks, please submit a Browserstack screenshot URL (see hints below)
     
     Hints, tips, etc.
     
     - There's no one solution to the basic task; feel free to send us as many different solutions as you like!
     - To see full-screen, hit the 'Share' drop down ...
  • Simple AngularJS Service Example #3 is the latest revision

    AngularJS 1.0.3, HTML, CSS, JavaScript

    angular.module('ServiceExample', []);
    
    
    function SimpleCtrl(todoPromisedService, todoService, $scope) {
        $scope.todos = todoService.todos;
        $scope.getTodos = todoService.getTodos;
        $scope.getTodoViaPromise = function() {
            $scope ...
  • Lungo + Angular = broken updates

    AngularJS 1.0.3, HTML, CSS, JavaScript

    angular.module('myApp', ['Centralway.lungo-angular-bridge']);
    
    function FunWithClassesCtrl($scope) {
        $scope.items = [];
        $scope.clicks = 0;
        $scope.generateItems = function() {
            setTimeout(function() { 
                $scope.clicks ...
  • Basic LAB example

    AngularJS 1.0.3, HTML, CSS, JavaScript

    var directivesModule = angular.module('popup.directives', []);
    directivesModule.directive('ngPopup', function (PopupService) {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs ...
  • Lungo Fiddle

    No-Library (pure JS), HTML, CSS, JavaScript

    Lungo.init({});