Richards blog

The icon can be created using the following simple classes .loading{background:url(../img/loading-purple.gif) no-repeat center} .loading > div{display:none} Here is a sample image that could be used. Too easy. However, this is old school. You can create a simpler one using CSS and HTML5. Here is the CSS: .loading-container{display:block;width:100%;min-height:45%;margin-top:60px;text-align:center} .loader {margin:0 auto;text-align:center;width:200px;min-height:100%;display:block;vertical-align:middle} .loader:hover{opacity:1} .loading-spinning-bubbles{position:relative;margin:auto;min-height:1px} .loading-spinning-bubbles .bubble-container {position:absolute;top:calc(50% - 10px/2);left:calc(50% - 10px/2);transform-origin:-150% 50%;-webkit-transform-origin:-150% 50%;-moz-transform-origin:-150% 50%} .loading-spinning-bubbles .bubble-container .bubble {background:#00ac00;width:10px;height:10px;border-radius:50%;animation:bubble 1s infinite;-webkit-animation:bubble ...

A little CSS and JQuery can produce a lot of magic in an application. Here is the code. 1. Start with a simple html page. The important item here is to have an 'ID' to navigate to. In my case, I called it 'top'. <html> <head>     <base href="/" />     <title>Test Page</title>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>     <link href="css/myStuff.css" rel="stylesheet" /> </head> <body>     <div>         <!-- Start Body Content -->         <div ng-view role="main" id="top"></div>         <!-- End Body Content --> ...

It appears that there is a size limitation for angular-cookies - 4KB. Bummer. An alternative is to use the HTML 5 objects window.localStorage or window.sessionStorage. See  here  for details I used sessionStorage to hold a single object and an object array from a REST endpoint. The code to get and set the values is as follows: First, set the values: sessionStorage.Object1 = JSON.stringify(singleObject); sessionStorage.Object2 = JSON.stringify(multipleObjects) Now populate objects with the cached values: var single = JSON.parse($.parseJSON(sessionStorage.Object1)) var array = $.parseJSON(sessionStorage.Object2)

I was recently faced with the problem that my solution required HTML to be rendered. Not a problem - bind it with ng-bind-html and all is good. Or is it? This solution falls on its head when we have embedded 'syle' in the HTML. <div class="ExternalClass2F49307A49BF4FE3B48CB68350A1A9C6"><span style="color:rgb(0, 128, 0)">--My Sample Text in the RichText  Editor in SP2010--</span><div><br /></div> <div><br /></div></div> The solution is to used $sce ( Strict Contextual Escaping ) to format the output. Controller: $scope.trustAsHtml = function(string) {     return $sce.trustAsHtml(string); }; DOM/HTML: <div data-ng-bind-html="trustAsHtml(myHtmlString)"></div>

My current project (using Angular JS on SharePoint 2010) requires a modal dialog window with some data passed between the different modules. We used dialog-service  from GitHub, which is a great utility for this purpose. All was great until I deployed the solution to a new environment. Suddently, my modal dialog stopped working and was complaining about 'initialization' issues. I stepped through the code and found that the initialization code was being called and  dialog.ref.is(':data(dialog)') was returning true. So what was different? To cut a long story short, the culprit was the Document ID Service (which was enabled on the new environment). It was appending text to the HTML, which was causing all the problems. Two solutions presented themselves: 1. Disable the feature (not likely) or 2. trim the appended text: if (html.indexOf('<html xmlns:') >= 0)    html = html.substring(0, html.indexOf('<html xmlns:')){ } I chose the lat...