Select the element in JavaScript

If you are like me and take jQuery for granted in your projects, you might sometimes forget the most basic stuff. Here is a small reminder of how to select the <body> element in JavaScript: document.getElementsByTagName(“body”)[0] So to answer your question, no, there is no shortcut. Select it just like any other element. If you […]

How to get a reference to a CodeMirror instance

If you want to access a CodeMirror instance, perhaps because it was created programmatically, or by a module you don’t control, you can access it like this: //Get a reference to the CodeMirror editor var editor = $(‘.CodeMirror’)[0].CodeMirror; //You can then use it as you wish editor.setValue(‘lorem ipsum yada yada’); editor.replaceSelection(‘this is a test’); In […]

Drag and drop image upload directive for Angular.js

While converting an application of mine to Angular.js, I could not come up with a reasonable way to support drag and drop uploads, so I have created my own. Browser support As with everything that is enjoyable on the web, this will only work in IE10+, Chrome and Firefox. This is because you will need […]

How to use the HTML5 full screen API (with examples)

The new HTML5 fullscreen API allows you to build full screen web applications very easily. Before we get started, there are a few things you need to know: Only user events (click, keyup etc.) can trigger full screen mode. This prevents pop up ads from going full screen. The API is supported by IE9+, Chrome […]

Using angular.js with Tastypie for Django

The following angular.js service will allow you to consume a standard TastyPie REST API. As you may know, TastyPie returns its JSON objects a bit differently from what angular expects, so this service fixes it. This example assumes that you have always_return_data=True in your resource. This is the resource I used with this example: class […]

Zepto.js and the :selected and :checked selectors

If you switched from jQuery to its slightly anemic cousin, Zepto.js, you might have noticed that it doesn’t support two rather useful selectors, :selected and :checked. Fortunately, it is fairly easy to compensate for it. First, define the following two functions: var checked = function(){ return this.checked; } var selected = function(){ return this.selected; } […]

How to implement parallax scrolling with jQuery

A parallax effect is adds a nice touch of style to an existing website, and looks fantastic with large images. Here is how to implement a parallax on a background image with jQuery. First, set the element’s background to fixed: .myElement{background:url(‘images/myBackground.jpg’) no-repeat fixed center top} Next, put this in your $(document).ready() function. Do not forget […]

How to fade images on load with jQuery

In this article, I will show you how to properly fade in images when the page loads using jQuery. Although this has been covered by other blogs, most proposed solutions do not take caching into account. When returning on a page, images that were cached by the browser will not trigger jQuery’s load event. First, […]

How to convert Javascript dates to UTC

When you create a JavaScript Date object, it will set the date in your time zone. If you want to keep the same date, but convert it to UTC/GMT for storage and comparison purposes, use the function below: //Converts a Date object to its equivalent in UTC time. function dateToUTC(date) { return new Date(date.getUTCFullYear(), date.getUTCMonth(), […]

How to parse a JSON date with Javascript

Parsing a JSON date is rather easy, and doesn’t even require jQuery. Since the JSON date format is always the same, you can use substr to retrieve the timestamp and parse it to a date. var date = new Date(parseInt(jsonDate.substr(6))); There’s nothing more to it; it’s that easy!