Archive for the 'JavaScript' Category

How to create an Angular directive for eonasdan’s Bootstrap datetime picker

I recently needed to add a DateTime picker to Process Street for use with our upcoming assignment feature. I ended up choosing eonasdan’s DateTime picker. Here’s the code to wrap it in an AngularJS directive:

…and here’s the code to include it in your AngularJS app:

Pajama: Client and Server Validation Simplified

When implementing an HTML form that requires validation, a developer must make a decision: should I use client-side validation, server-side validation, or both?

In this article I will give a quick overview of the pros and cons of these validation techniques, as well as introduce my solution to the problem: Pajama.

Read more »

Creating ASP.NET HttpCookie-compatible multi-valued cookies in JavaScript

Cookies are ubiquitous on the web. They’re used to store usernames, login tokens, shopping cart contents, and so on. In libraries, cookies are typically modeled as name-value pairs. An API consumer requests a cookie using a known name (e.g. $.cookie('user') in jQuery with the Cookie plugin) and the library returns a string (e.g. alice). Sometimes, however, just plain old name-value pairs aren’t enough. In this article, we will take a look at how to bake multi-valued cookies in JavaScript that are compatible with the Values property of ASP.NET’s HttpCookie class.

Read more »

Eager boolean operators in JavaScript

In most programming languages like Java, JavaScript, C and C#, the boolean operators && and || perform short-circuited evaluation. Essentially, this means that a program, when evaluating boolean operators, will only evaluate as many arguments as is necessary to determine the value of a boolean expression. Sometimes, however, this is not the behaviour we want.

In this article we will look at how to implement non-short-circuited or “eager” versions of the JavaScript boolean operators && and ||.

Read more »

How to do an AJAX search with jQTouch, Part 2

In the last installment of How to do an AJAX search with jQTouch we looked at how to setup a jQTouch interface with the goal of performing an AJAX search. In this article, we will write the necessary JavaScript to perform that AJAX search, as well as a PHP script to respond to those calls.

This article assumes you have read the first part of this series.

Read more »

How to use custom jQuery animation queues

You may not know this, but whenever you use jQuery commands like fadeIn, slideDown, and delay, you are implicitly making use of a jQuery queue behind the scenes. That queue is named fx, and it is the default queue that all animations use unless otherwise specified.

In this article, we will look at how jQuery animation queues work, how to create and manipulate them, and how to use them in a meaningful way.

Read more »

Biomorph.js: Natural Selection in JavaScript

For his 1986 book The Blind Watchmaker, Richard Dawkins developed a program that created “biomorphs”: virtual creatures created by a computer simulation. The simulation, called Biomorph, was developed in order to demonstrate the power of natural selection.

Recently, in an effort to better understand how the Biomorph program worked, I decided to implement it myself in JavaScript using the HTML5 canvas element. The result of this endeavour can be found here and the GitHub repository here. Read more to learn how to use the Biomorph program.

Read more »

A little bit about Webble and JavaScript games

Webble is a pure HTML/CSS/JavaScript implementation of some of the core features Wezzle game engine. By “pure” I mean that there are no external plugins like Flash used. Furthermore, Webble does not make use of the HTML5 canvas element: all the animation is done purely by moving around HTML elements using JavaScript.

Writing a simple game engine using the DOM and JavaScript poses some interesting problems that are atypical to regular website development. In this article I will discuss a few of the problems that I encountered while writing Webble and how I solved them.

Read more »

How to do an AJAX search with jQTouch, Part 1

jQTouch is a pretty nifty little jQuery plugin for making websites look like native iPhone apps. Unfortunately, beyond a bunch of examples included with the distribution, there’s not a whole lot of online documentation written for jQTouch. Having started to use jQTouch for a professional project, I thought I’d help remedy this deficiency by posting what I learned along the way.

We’ll start with something fairly straightforward by making a jQTouch app that makes an AJAX call to a PHP script to search a database. It then displays the results of that search in the jQTouch app. This article is split up into two parts. The first part deals with the jQTouch UI and the second part deals with the PHP script and the supporting JavaScript.

This is part 1 of a two part series.

Read more »

The jQuery animate() step callback function

If you’ve ever needed to do more complex animations than fades and slides, then you’ve probably encountered the jQuery animate function. The animate function allows you quite a bit more flexibility than just using fadeOut or slideDown. In fact, the oft-used fades and slides simply wrap calls to animate.

If you’ve ever looked at the jQuery animate docs at api.jquery.com you might have noticed that one of the optional arguments you can define is step which is defined as:

A function to be called after each step of the animation.

…and that’s it. If you search for “step” on the page, you won’t see another mention of it.

Read more »

Next Page »