December 16, 2013

Simple JSON prettify

I went looking for a quick and easy way to style JSON content for display in the browser and quickly came across this answer at stack overflow with a corresponding jsfiddle entry. However the problem is that this is kinda broken, the output isn’t valid JSON because the keys aren’t quoted. It’s just outputting a JavaScript object intead. A quick fix (and slight refactor) to the JavaScript gave me what I needed, I couldn’t post on SO as I don’t have the reputation (yeah that’s annoying) so I’m posting here for reference and I forked the original JSFiddle. ... Read more

November 21, 2012

JSON undefined issues on IE8 and IE9

I had some issues today while testing in IE, where “JSON” was undefined. This was happening in IE8 and IE9, which is strange because the JSON functions are in those IE versions. The problem was IE’s compatibility view, which triggers rendering in sort-of-IE7 mode. Classy. This was making JSON undefined ;( The usual fix for this is to add a meta tag to force IE to use “edge” (or a specific version if you like): ... Read more

September 14, 2012

jQuery UI dialog focus on first tabable element

I’ve been using the jQuery UI dialog¬†for a project recently, one thing that bugged me though, was that upon opening a dialog the first tabable element always gets focussed. This can be: hyperlinks input boxes select boxes buttons textareas etc An example of this is: A quick way around this is to fire a blur() method, targeting the first tabable element type of your dialog. So if I open up a dialog window with an id of dialog, I can do: ... Read more

August 13, 2012

Timing synchronous JavaScript operations

There’s a cool little method on the console object that allows you to track how long an operation took to run. It’s called console.time. Basically you just start a timer at the top of the code you want to time, like so: console.time('timer-name'); // your javascript goes here console.timeEnd('timer-name'); Each timer block should have a unique name (in the example above I called my timer ‘timer-name’), and you can have up to 10,000 timers running on a single page. ... Read more

July 4, 2012

jQuery tinyMCE issue with $.attr();

I had some strange behaviour with the jQuery verion of tinyMCE (3.4.6). Basically I was integrating the chosen library¬†(which is build as a jQuery plugin), but it seems the $.attr(‘id’) from within chosen.js was returning a JavaScript element reference instead of the value of the “id” field. Some basic tracing showed the strange error: The solution for me was moving to tinyMCE 3.5.4.1 (and jQuery 1.7.2, previously I was on 1. ... Read more

December 7, 2010

Adding Prototype methods to jQuery

We recently upgraded a project which was using the Prototype JavaScript framework to use jQuery and ran into a few methods which didn’t exist in jQuery at all. A quick search gave us an easy solution; by adding a prototype property (not related to the Prototype framework) to String.prototype we can give every string in our codebase access to these methods as if they were part of the JavaScript spec (or the jQuery library). ... Read more

October 28, 2009

Extracting URL variables using JavaScript

Server side languages are cool in that they give you a nice associative array to access URL variables. ColdFusion has the URL scope, PHP has $_GET[] etc, but how do you get these values easily with JavaScript? I came across a post over at Jake Munson’s blog which had just what I needed. Actually although Jakes solution was perfectly valid, I preferred a slight modification from one of the commenters which wrapped the entire URL string into an associative array so you can access the entire URL scope, as well as extracting a specific value via a key. ... Read more

June 15, 2009

Prototype/scriptaculous issue with Sortable.create()

I’ve been doing some custom sorting within FarCry using the prototype/scriptaculous libraries as they already exist in the FarCry framework by default. I was having trouble getting the Sortable.create() to work properly and the main docs site for scriptaculous seems severely lacking in examples. Basically the “sorting” action was happening fine but no event was being fired “onUpdate”. No exception was being thrown, just that nothing was happening after the drag/drop. ... Read more

March 11, 2008

Passing extra parameters to Prototype observer handlers

Another tip from my Prototype travels… ‘Observers’ let you create a listener for a user event, for example on a form submission you may want to run some client side validation before actually submitting the form. Of course you can add ‘onsubmit()’ in your tag, but isn’t it much nicer to keep your markup clean of this type of thing? In your dom:loaded observer you can ‘listen’ for a form submission as follows: ... Read more

March 10, 2008

Showing and hiding elements with CSS and JavaScript

*** Note:** These examples reference the Prototype JavaScript framework. Often I find that I want to load content onto a page but have its default view state as hidden until a user defined event makes it appear. The problem is if I hide an element using a linked CSS file (with a class or Id style of {display:none;}) it seems I cannot show that element using either of the following JavaScript options: ... Read more

© Michael Sharman 2017