Tag Archives: JavaScript

VirtualDog Tutorial PluralSight

Hey everyone,

Just taking a quick look at Jasmine with Typescript and found a decent looking tutorial on PluralSight with a sample app called VirtualDog. Attempting to run the following command resulted in an error on Windows 10:

npm run bower-typings

> concurrently “bower install” “typings install”

[0] ‘bower’ is not recognized as an internal or external command,
[0] operable program or batch file.
[1] ‘typings’ is not recognized as an internal or external command,
[1] operable program or batch file.
[1] typings install exited with code 1
[0] bower install exited with code 1

npm ERR! Windows_NT 10.0.15063
npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “run” “bower-typings”
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! VitrualDog@0.0.1 bower-typings: `concurrently “bower install” “typings install” `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the VitrualDog@0.0.1 bower-typings script ‘concurrently “bower install” “typings install” ‘.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the VitrualDog package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently “bower install” “typings install”
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs VitrualDog
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls VitrualDog
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Chris-PC\Desktop\Testing Javascript with Jasmine and Typescript\virtualdog-begin\npm-debug.log

In order to fix it, just run the following command:
npm install -g bower

Thanks to the following link: https://stackoverflow.com/a/37669968/522859

How to Add a FontAwesome Icon using :after

Hey everyone,

Just a quick post on how to add a fontawesome icon using :after:


.fl-cart-product-price:after{
content: '\f00d';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
color: #555;
font-size: 85%;
text-decoration: none;
}

See this stackoverflow post for more info: http://stackoverflow.com/a/18793584/522859

Select Not Showing Selected Values – AngularJs

Hey everyone,

I had a bit of trouble getting a selected option to show up with AngularJs. It turned out that I needed to add an ng-selected attribute:

    {{command.Status}}
    <select ng-model="command.Status">
        <option ng-selected="command.Status == 0" value="0">Enabled</option>
        <option ng-selected="command.Status == 1" value="1">Disabled</option>
        <option ng-selected="command.Status == 2" value="2">Deleted</option>
    </select>

Check out this Stackoverflow post for more info: http://stackoverflow.com/a/18336858/522859

angular js calling services twice – Angular JS

Hey everyone,

I had a few of my AngularJS services being called twice. The issue turned out to be that I’d added a controller to both my route and my view:

app.config(function ($routeProvider) {
    $routeProvider
		.when('/', {
		    controller: 'ProjectsController', /* <---- here */
		    templateUrl: '/Home/Home'
		})
<div>
    <ul ng-controller="ProjectsController"><!-- <-- here -->
        <li ng-repeat="project in projects">
            <b>{{project.Name}}</b>
        </li>
    </ul>
</div>

Removing it from the controller resolved the issue. Check out the following StackOverflow post for more info: http://stackoverflow.com/a/15535724/522859

Error: $injector:modulerr Module Error – AngularJS

Hey everyone,

Just getting back into angularjs and I came across the following error:

Unknown provider: $routeProvider

It turns out I that while I had included the route provider file I had missed adding it to the app:

 
//Original
var app = angular.module('commandsApp', [']);
 
//Fixed
var app = angular.module('commandsApp', ['ngRoute']);

Check out the following links if you’re still having issues:
http://plnkr.co/edit/zbG9Vycrxk6mmlzwfTRm?p=preview
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Dragging a File from File Explorer Causes Google Chrome to Crash

Hey everyone,

A team member found an interesting bug today that caused chrome to go non-responsive. The cause was simply dragging a file from the file explorer onto a drag and drop upload area. It is reproducible on every site I’ve tested, including Gmail and Dropbox.

Reproduce

  • Go to https://mail.google.com
  • Click compose
  • Click attach files (close any of the annoying popups that appear)
  • DRAG a number of files from the file selector window to the new message screen (they will start to upload) (IMPORTANT: these need to be dragged from the file selector popup, NOT a new explorer window)
  • While they are still uploading hit cancel on the file browser window. Browser will go non-responsive

A bug has been reported here: https://code.google.com/p/chromium/issues/detail?id=388661

Refresh a Page with JavaScript

Hey everyone,

Just a quick post on how to force a page refresh with JavaScript (no jQuery required):

location.reload();

Note that the reload function accepts a boolean parameter that can be used for force a server refresh. Alternatively, it just defaults to the cache.

Checkout this Stackoverflow post for more info: http://stackoverflow.com/a/5404869/522859

Detecting File Size with jQuery

Detecting FileSize – jQuery

Hey everyone,

Just a quick post on how to detect a file’s size with jQuery. I’m currently using a version of this for basic client side validation:

<form action="upload" enctype="multipart/form-data" method="post">
 
    Upload image:
    <input id="image-file" type="file" name="file" />
</form>
$(document).ready(function(){
    $('#image-file').bind('change', function() {
 
        var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0;
 
        if(fileSize > 0){
            $('body').append('<div class="file valid">' + fileSize + ' MB</div>');  
        }
        else{
            $('body').append('<div class="file invalid">' + fileSize + ' MB</div>'); 
        }            
    });
});
.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}
 
.file.valid{
background-color: rgb(127, 197, 127);
}
 
.file.invalid{
background-color: rgb(197, 127, 127);
}

Here’s the link to the full fiddle: http://jsfiddle.net/nLLMF/

There’re also a whole heap of other options listed on this StackOverflow post if you’re chasing something a bit more robust: http://stackoverflow.com/a/13249924/522859

Rails Flash Messages in MVC4

Hey everyone,

Coming from Rails I’d grown quite fond of flash messages. Unfortunately there isn’t a built in way of doing this in MVC4. Luckily, there’s a five minute solution posted on StackOverflow: http://stackoverflow.com/a/11809178/522859

Once implemented, it works just like in Rails:

this.Flash("We need you to login before you can edit anything.", FlashEnum.Warning);

Definitely worth checking out if you’ve got time, even more so if you’ve come over from Rails!

Twitter Bootstrap – Carousel Only CSS

Hey everyone,

I ran into a bit of an issue today with my stylesheet conflicting with Bootstrap. After a bit of tinkering I realised that all I really needed from bootstrap were the Carousel styles. I’ve taken everything else out and included everything that’s left below:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

Minified:

.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5)0),color-stop(rgba(0,0,0,.0001)100%));background-image:linear-gradient(to right,rgba(0,0,0,.5)0,rgba(0,0,0,.0001)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001)0),color-stop(rgba(0,0,0,.5)100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.5)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:focus,.carousel-control:hover{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Let me know if you have any other issues.