Yet Another “Open External Links In A New Window Using jQuery” Tutorial

In some cases, you need to prevent users from opening links to external sites in the same window.

And what’s the easiest way to do that? jQuery, of course! Here’s my take on it:

jQuery(document).delegate(‘a’, ‘click’, function() {
    var root = location.href.replace(location.pathname + location.search + location.hash, '');
 
    if ( !this.href ) return;
 
    if ( 0 != this.href.indexOf(root) ) {
        window.open(this.href);
        return false;
    }
});

What’s going on up there? Let’s break it down:

jQuery(document).delegate(‘a’, ‘click’, function() {

First, we’re using event delegation to bind a click handler to any <a> tag.

var root = location.href.replace(location.pathname + location.search + location.hash, '');

Now we’re calculating the root address, based on the current location. For example:

http://localhost:8080/path/?foo=bar#baz

will become

http://localhost:8080

    if ( !this.href ) return;

This is a safety check, for when there is no href attribute. this.href contains the absolute path for the clicked link.

    if ( 0 != this.href.indexOf(root) ) {
        window.open(this.href);
        return false;
    }

Finally, if the URL does not begin with the root we calculated before, it means it’s “external”. In this case, we open a new window / tab using window.open() and prevent the default action by returning false.

Update: Props to filosofo for pointing out that I should be using this.href instead of jQuery(this).attr('href').

Update 2: Use .delegate() instead of .live().

Auto-shrink YouTube Videos

One of the things I hate about flash-based players is that you can’t control them properly through CSS.

For example, if you write this CSS code:

object {width: 100%; height: auto}

… the videos won’t scale properly (the height will stay fixed).

So I came up with this little jQuery script that makes a video fit neatly into it’s containing box:

jQuery(document).ready(function($) {
	$('object').each(function() {
		var $obj = $(this);
		var cWidth = $obj.attr('width');
		var pWidth = $obj.parent().width();
 
		if (cWidth <= pWidth)
		    return;
 
		var attr = {
			'width': pWidth,
			'height': Math.floor($obj.attr('height') * (pWidth / cWidth))
		};
 
		$obj.attr(attr);
		$obj.find('embed').attr(attr);
	});
});

It should work with most flash players.

The Right Way To Add Custom Quicktags

Ever since WordPress introduced quicktags, people have been wanting to customize them. Naturally, a lot of tutorials popped up, demonstrating how to do this. The problem is that all of them require that you edit quicktags.js, a file in WordPress.

But it doesn’t have to be that way now, since newer versions of WP have a script loading API. So here’s a better way to do it, without modifying any core files:

First, we make a basic plugin file, where we tell WP to load some javascript, right after loading the quicktags script:

<?php
/*
Plugin Name: My Custom Quicktags
Version: 1.0
*/
 
add_action('admin_print_scripts', 'my_custom_quicktags');
function my_custom_quicktags() {
	wp_enqueue_script(
		'my_custom_quicktags',
		plugin_dir_url(__FILE__) . 'my-custom-quicktags.js',
		array('quicktags')
	);
}

Now, instead of modifying quicktags.js, we add our quicktag code in a separate file:

edButtons[edButtons.length] = new edButton( 'sup', 'sup', '<sup>', '</sup>', '' );

Feel free to modify this to suit your needs.

The benefit of this method is that when you upgrade WordPress, your quicktag(s) will still be there.

I’ve made a .zip with these two files, which you can download and install as a regular plugin. It has been tested on WordPress 2.8.1 and 2.7.1.

Download

I’d love to know what quicktags you make with this tutorial, so feel free to share in the comments.

Update

It seems someone has taken this a step further, with the Post Edit Buttons plugin. More power to him :)

Javascript: Why you should use the ‘var’ keyword

I always wondered what was the purpose of the var keyword, since in JavaScript, you can just use a variable without declaring it.

Today I found out.

Say you have this code:

Continue reading…

Custom Field Taxonomies: Version 0.9

In version 0.9 I finally included an advanced meta search box. It can be easily styled and you can even have several boxes on the same page.

The code to display it is simple: <?php meta_filter_box() ?>.

If you don’t want to use a certain key as a filter, you can write

<?php meta_filter_box($exclude = array('key1', 'key2')) ?>

Make sure your theme has wp_footer() written somewhere in footer.php.

Deviant Thumbs: Version 1.7

In this version I have replaced the previous carousel script with a new one, made by yours truly. The main advantage is that it’s much smaller and way easier to modify and improve. Any suggestions are welcome.

Custom Field Images: Version 1.7

The new feature in version 1.7 is a button in the Upload/Insert Image box that inserts the image directly in the CFI box. Without it, you would have to insert the image into the post and then manually insert the bits of data into each field.

I haven’t tested it on versions of WordPress older than 2.7. If you don’t plan to use it, you can disable it in the settings page. This means a slightly faster Write panel because the javascript file that creates the button is not loaded.

PHP5 is required.