Harry Bailey

Hide topics row in Postbox message view

Harry — Wed, 21 Jul 2010 07:45:30 +0000

I love Postbox. I talk about it a lot. However Postbox is trying to be more than a mail client and as part of that is attempting to sneak into the world of GTD with the inclusion of todos and topics.

Now call me old fashioned but I use Things for my GTD stuff and so don’t use todos or topics in Postbox.

“Not a problem really is it?” I hear you yell. Well no until you look at the amount of space the topic row of Message View takes up. Believe me on a small screen this matters:

postbox topics

Lucky Thunderbird (and therefore Postbox) has a way to edit the Chrome (or look and feel) using CSS.
Even better it’s done on a profile level, so you don’t have to worry about losing your changes when you upgrade.

1) Add a new folder and call it ‘chrome’ into your profile folder. On a mac you profile folder can be found in either systems Library/Application Support/ folder or your own user version of the Library/Application Support/

~/Library/Application Support/Postbox

2) Add a file into that folder called userChrome.css

3) Edit that file and add the following:

#tagsBox.mailheader {
	display:none;
}

4) Restart Postbox.

postbox no topics

Fancybox left and right key problem

Harry — Wed, 02 Jun 2010 11:40:04 +0000

When you use fancybox, it automatically adds listeners which stop any other use of the Esc, Left and Right keys on your keyboard. The just don’t work in forms etc inside Fancybox.

This isn’t such an issue with the escape key, but not being able to use the left and right, for example in text inputs, is a pain.

The changes below add an additional option to Fancybox called useNextPrev which you can set to false to stop Fancybox adding listeners to these keys. I haven’t included the escape key as I think it’s far less of an issue.

The call to Fancbox after these changes would look something like this:

$('a.fancybox').fancybox({useNextPrev:false});

Changes needed to the fancybox javascript file:

replace:

} else if (e.keyCode == 37) {
	e.preventDefault();
	$.fancybox.prev();
 
} else if (e.keyCode == 39) {
	e.preventDefault();
	$.fancybox.next();
}

with:

} else if (currentOpts.useNextPrev && e.keyCode == 37) {
	e.preventDefault();
	$.fancybox.prev();
 
} else if (currentOpts.useNextPrev && e.keyCode == 39) {
	e.preventDefault();
	$.fancybox.next();
}

replace:

	$.fn.fancybox.defaults = {
		padding				:	10,
		margin				:	20,

with:

	$.fn.fancybox.defaults = {
		padding				:	10,
		margin				:	20,
		useNextPrev			:	true,

And there you have it. By default Fancybox will use the left and right keys, but you now have the choice to stop it.

Pimping Fancybox jQuery Lightbox

Harry — Thu, 13 May 2010 00:10:14 +0000

I love fancybox. It’s a great and flexible jQuery lightbox, but I decided there were a couple of things I needed it to do that it doesn’t, so I dived into the code head first and added a couple of features. Be warned that you need to edit the file jquery.fancybox-1.3.1.js to implement them.

Combined add and fire / show / open
Yes I know you can do this with $.fancybox(content, options)

It’s tough to add the fancybox listener and fire it at the same time, for example onclick or using a live event. That annoyed me in some circumstances. Previously I have resorted to adding fancybox to anchors on hover so it could fire onclick:

$('a.fancybox').mouseover(function()
{
    $(this).fancybox();
});

But that’s not cool. So I added the option to the core.

 
// replace
	$.fn.fancybox = function(options){
		$(this)
 
// with
	$.fn.fancybox = function(options)
	{
		if(options === 1)
		{
			options = {now:true};
		}
 
		$(this)

and

 
// replace
		});
 
		return this;
	};
 
	$.fancybox = function(obj) {
 
// with
 
		});
 
		if(options.now)
		{
			$(this).click();
		}
 
		return this;
	};
 
	$.fancybox = function(obj) {

You can fire it in two ways. If you are also including options then fire it on add by including now:true as an option like:

 
$(this).fancybox({
 
    now:true,
    showCloseButton : false,
    enableEscapeButton : false
 
});

or if you are not setting options then fire it on add like:

 
// note the (1)
$(this).fancybox(1);

Either way, fancybox should now open / fire / show as soon as you attach it to an element.

And for my next trick….

Stop lightbox vertical movement

The default behavour is for fancybox to centre itself on vertical or horizontal scroll or window resize. I needed (see the final tweak) the box to stay still vertically even if I scrolled, but stay centre horizontally.

To implement this I made this change:

 
// replace
 
		to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
		to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
 
		to.top	= Math.max(view[3] + margin, to.top);
		to.left	= Math.max(view[2] + margin, to.left);
 
// with
 
                if(currentOpts.centerTopOnScroll)
                {
		    to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
		    to.top	= Math.max(view[3] + margin, to.top);
                }
 
		to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
		to.left	= Math.max(view[2] + margin, to.left);

and then add that new option to the defaults:

 
// replace
 
		centerOnScroll		:	false,
 
// with
 
		centerOnScroll		:	false,
		centerTopOnScroll	:	true,

You can then include the new option centerTopOnScroll:false to keep the top position static even on horizontal scroll.

The final change I have made is:

Clone the position and dimensions of an element

This tweak allows you to specify an element to clone. The original lightbox created will then be in the position and have the dimensions of the specified element. I bolded original because you can then alter the dimensions and positions yourself using jquery or by updating the content.

To implement this:

 
// replace
 
			final_pos = fancybox_get_zoom_to();
 
			fancybox_process_title();
 
// with
 
			if(currentOpts.clonePosition)
			{
				// get final_pos from the element we are cloning
				var pos = currentOpts.elementToClone.offset();
 
				final_pos = {
								height:currentOpts.elementToClone.outerHeight(),
								width:currentOpts.elementToClone.outerWidth(),
								left:pos.left,
								top:pos.top
							};
			}
			else
			{
				final_pos = fancybox_get_zoom_to();
			}
 
			fancybox_process_title();

and

 
// replace (after the previous change for vertical scroll)
 
to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
to.left	= Math.max(view[2] + margin, to.left);
 
// with
 
if(currentOpts.clonePosition)
{
	to.left = currentOpts.elementToClone.offset().left
}
else
{
	to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
}
 
to.left	= Math.max(view[2] + margin, to.left);

You then have the choice of including new options:

 
clonePosition:true
elementToClone:$('#element') // a jquery element

So there you have it.

Combined add and fire / show / open
Stop lightbox vertical movement
Clone the position and dimensions of an element

MySQL Toggle a Fields Value

Harry — Tue, 27 Apr 2010 15:54:43 +0000

UPDATE `table_name`
SET `field_name` = (SELECT CASE `field_name` WHEN 1 THEN 0 ELSE 1 END)
WHERE `id_column` = 1

Or with text strings

UPDATE `table_name`
SET `field_name` = (SELECT CASE `field_name` WHEN 'foo' THEN 'bar' ELSE 'foo' END)
WHERE `id_column` = 1

Validation of html within inline javascript

Harry — Wed, 21 Apr 2010 13:43:36 +0000

If you are finding you need to use javascript inside an html or xhtml file and it won’t validate, then here is a little tip for you.

If you surround all your javascript with tags, all will come good.

The CDATA is seen by the validator as data which doesn’t need checking. So this:

<script>
document.getElementById('container').innerHTML('hello
');
script>

becomes this:

<script>
[CDATA[
document.getElementById('container').innerHTML('hello
');
]]>
script>

Another option is to escape < and > characters server-side / in the file and then unescape with javascript

<script>
document.getElementById('container').innerHTML('<p>hello</p>'.replace('/</','<').replace('/>/','>'));
script>

More powerful jQuery getScript with cache control

Harry — Wed, 24 Mar 2010 09:09:16 +0000

If you love getScript as a shortcut method in jQuery but you hate not being able to control whether the script calls from the browsers cache or not then you can override the build in function with a new one which is backwards compatable, so it won’t break any of your old code, and allows you to choose true or false to caching.

Read the original post by Jamie Thompson

 
(function($){
$.getScript = function(url, callback, cache){
	$.ajax({
			type: "GET",
			url: url,
			success: callback,
			dataType: "script",
			cache: cache
	});
};
})(jQuery)

Making Facebook Share Button Fit In

Harry — Mon, 08 Mar 2010 16:28:01 +0000

The share buttons that are currently offered by sites such as Digg, Facebook and Tweetmeme all have something in common when it comes to their height. 61px seems to be a developing standard.

The problem is that when you line them all up the Facebook share button is actually wider than the others which seem to come in at 52px.

Well you can make the Facebook button 52px in width without too much trouble. Facebook only use two classes to style the inner ‘Share’ button which seems to be the decider when it comes to the buttons width.

By shaving a little off the left and right padding we can bring the Facebook share button back down to 52px in width and make it play nice with the other share buttons.