random .NET and web development musings

I have lots of calls to jQuery’s focus() method in my sites:

$('input:first').focus();

However on mobile devices you might not want to be calling this, because focus() doesnt open the keyboard, but does focus the element. Under certain cirumstances you might want to prevent the focus from happening to give a better user experience.

You can do this with the following code:

$.event.special.focus = {
	trigger: function (e) {
		e.preventDefault();
		return true;
	}
};

You will only want to apply this when your responsive site is being displayed on a mobile device.

thanks to pushOK on StackOverflow for this jQuery insight.

Annoyed to death that Twitter have swapped the column order round on their site so the content is on the right, I’ve made an extension for Chrome that fixes it.

Here’s how to do it.

Make a folder somewhere, and inside it create a file called “manifest.json”. Put this inside it:

{
	"name": "Fix Twitter Columns Order"
	, "version": "0.1"
	, "description": "Switches the Twitter columns around so content is on the left"
	, "content_scripts": [
		{
			"matches": ["https://twitter.com/*", "http://twitter.com/*"]
			, "css": ["style.css"]
		}
	]
}

Then create a file called “style.css” and put this inside it:

.content-main
{
	float: left !important;
}

.dashboard
{
	float: right !important;
}

And there we go!

Goto Chrome -> Tools -> Extensions.

Tick “Developer Mode”, then click “Load unpacked extension” and navigate to the folder you created the json and css in.

Done! You can download the source here.

Here is a simple jQuery plugin to allow users to filter table rows through dropdowns in the header rows.

Read more…

It seems IE doesn’t print canvas elements which are absolutely positioned in the correct place. What a surprise.

This problem came about when i tried to print some of my jqPlot graphs, as it uses absolutely positioned canvas tags for the data and axes.

There’s probably a much easier solution to this, but i couldn’t find it.

Heres some mega-hax that makes things work:

Update: This requires jQuery 1.4.2+

(function($) {
	$.fn.CanvasHack = function() {
		var canvases = this.find('canvas').filter(function() {
			return $(this).css('position') == 'absolute';
		});

		canvases.wrap(function() {
			var canvas = $(this);
			var div = $('<div />').css({
				position: 'absolute',
				top: canvas.css('top'),
				left: canvas.css('left')
			});
			canvas.css({
				top: '0',
				left: '0'
			});
			return div;
		});

		return this;
	};
})(jQuery);

Call it after your graph setup code, like this:

$('body').CanvasHack();

jqPlot is an awesome javascript graphing library, supporting loads of cool features. Except clickable bar charts.

Here is a plugin which allows you to capture click events for bar charts.

Use it like this:

$.jqplot('Graph', data, {
	ClickableBars: { 
		onClick: function(i, j, data){
			alert("Clicked series: " + i + ", data point: " + j + ", data: " + data);
		}
	}
});

This won’t work on horizontal or stacked graphs without modification, but it would be a fairly trivial change.

The code is available on github.