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 Fancybox 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.

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

If you surround all your javascript with <![CDATA[ and ]]> 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('<p>hello</p>');
</script>

becomes this:

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

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

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

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)

A harmless virus has been seen on Twitter over the last couple of weeks. It manifests itself as a tweet from someone which simply reads ‘Don’t click {link}’
If you are logged into twitter and you click the link, followed by a link on the following page which also reads ‘Don’t click’ then an identical message is posted without your knowledge to your own feed.

How? I hear you ask.
Well the simple way to put it is that the site you are taken to, hides your twitter home page over the top of it’s own content. They then prefil the tweet form with some text and position the ‘Don’t click’ button in exactly the same place as the ‘update’ button on twitter. Put simply you post to your own feed without even knowing.

The geeky version is that they hide your twitter home page in a hidden iframe and prepopulate your tweet box. They then match up the two buttons so that when you click ‘Don’t click’, you are actually clicking to update your feed.

So what have twitter done to stop it?
Well on the twitter blog they say “this morning we submitted an update which blocks this clickjacking technique”. What they have actually done is just made it harder for other sites to include twitter within their own site. They implemented a fix using javascript, which 95%+ of internet users have enabled. The actual code twitter used is:

 
if (window.top !== window.self) { window.top.location.href = window.self.location.href; }

Which basically says: If twitter is in a frame, redirect so twitter is on top and isn’t in a frame.

So not only are there still 1000’s of vunerable sites. The problem is that using the same code Twitter have will stop plenty of fair and helpful uses of frame based sites.

Oh, and for once if you have javascript disabled, you are still vunerable. Now there is a refreshing change.

$('#hover_div').hover(function()
{
/* something to do on mouseenter */
},
function()
{
/* something to do on mouseleave */
});

Great when you want a simple way of doing something when your mouse enters or leaves the selected element(s).

But then I needed to unbind the listener from the elements and I couldn’t for the life of me work out how.

/* WRONG */
$('#hover_div').unbind('hover');
 
/* WRONG */
$('#hover_div').unbind('mouseover').unbind('mouseout');
 
/* update 2: WRONG - but hopefully in the next release */
$('#hover_div').unbind('mouseenter mouseleave');
 
/* CORRECT */
$('#hover_div').unbind('mouseenter').unbind('mouseleave');

So there you go. That’s how to unbind hover().

That would be most of you then.

I can’t stand its special ways of doing things, so when I find an easy work around it makes me happy.

The latest one I have had to find and put into practice is a method for disabling some Select dropdown options in a form. Internet explorer doesn’t support the disabled attribute on option elements. The following code will only work in standards complaint browsers (not in IE 6 or 7):

<select id="select_1" name="a_select">
	<option>Please select...</option>
	<option disabled="disabled">----------</option>
	<option>One</option>
	<option disabled="disabled">Two</option>
	<option>Three</option>
</select>

But there is a simple(ish) workaround we can use. Replace the disabled option elements with empty optgroup elements. This looks good in all browsers except for Safari which won’t show the option using the below code:

<select id="select_1" name="a_select">
	<option>Please select...</option>
	<optgroup label="----------"></optgroup>
	<option>One</option>
	<optgroup label="Two"></optgroup>
	<option>Three</option>
</select>

By adding a little css styling magic and you end up with an identical outcome in all other modern browsers.

You can then enable and disable using javascript. Many people have written code which makes an option look like it’s disabled, waits for a click on the option element and then bluring it or focusing the next / previously selected option to make it act like it’s disabled.

I have come up with functions used with jQuery to disable / enable a select option by converting it to an optgroup and back. It is tested in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9 (although the opgroups jump to the bottom)

The code

$(document).ready(function()
{
	$.fn.extend(
	{
		optionDisable:function()
		{
			var ths = $(this);
			if(ths.attr('tagName').toLowerCase() == 'option')
			{
				ths.before($('<optgroup>&nbsp;</optgroup>').css({color:'#ccc',height:ths.height()}).attr({id:ths.attr('value'),label:ths.text()})).remove();
			}
			return ths;
		},
		optionEnable:function()
		{
			var ths = $(this);
			var tag = ths.attr('tagName').toLowerCase();
			if(tag == 'option')
			{
				ths.removeAttr('disabled');
			}
			else if(tag == 'optgroup')
			{
				ths.before($('<option />').attr({value:ths.attr('id')}).text(ths.attr('label'))).remove();
			}
			return ths;
		}
	});
});

Fixes and explainations

Safari requires a &nbsp; in the optgroup tag to make it visible, and because of this Firefox 2 then required the height:ths.height() to stop it showing a blank line below the optgroup.
Two small fixes.

Additionally (as kindly pointed out by Luenyar below) this will not work if the options you are playing around with are already in an optgroup. That said, it will work but will create unwanted optgroups.

I almost forgot to mention that the functions are chainable!

Example

And to put it into practice you could use the following code snippets:

/* a specific option */
$('#a_select').children(':eq(2)').optionDisable();
 
/* the selected option */
$('#a_select option:selected').optionDisable().text('I am a disabled option!');
 
/* enable all options in a select */
$('#a_select').children().optionEnable();

Update: Be sure to read all the excellent comments for further thoughts and improvements

So using the console of firebug in firefox paste the following javascript and off you go.

var elms = document.getElementById('v4-45').getElementsByTagName('td');
i = elms.length;
ttl = 0;
str = '';
while(i--)
{
    if(mtch = elms[i].innerHTML.match(/£([0-9]+.[0-9][0-9])/))
    {
        ttl += parseInt(mtch[1]);
        str += mtch[1] + ' - ';
    }
}
alert(str + "\n" + '£'+ttl);

Of course if they change the id of any of the elements involved this will stop working. But hey, if you can handle that javascript and firebug then you probably keep it up to date yourself.

Well never fear. A solution for php, Javascript and plenty of other languages is simply to use

if(0)
{
... lots of code ...
}


Simple and quick

str = str.slice(0,1).toUpperCase() + str.slice(1);

If you want to convert more than one letter then you might want to use the following. As examples if you wanted the first 4 characters uppercase use (0,3) and then (4) and if you wanted the first 2 uppercase you would use (0,1) and then (2)

str = str.slice(0,3).toUpperCase + str.slice(4);

Remember that an array starts at zero so always take one from the numbers you want.