bioneural.net

As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in?

The winds of change

WordPress hasn't altogether dropped either Prototype or script.aculo.us. As of version 2.3.2 they're still bundled in wp-includes/js/, but the Codex notes that since version 2.2:

Switched to jQuery for core JS, which is lighter and faster.

I'm no programmer, but I do understand that loading a smaller function library is kinder on your bandwidth and browser, and that writing fewer lines of script to call those functions is kinder on web developers.

K2, on the other hand, stopped bundling Prototype and script.aculo.us as of revision 382. This popular WordPress theme now does all its Ajax magic—Live Search, Rolling Archives, and Live Comments—via jQuery.

Loosing weight

As of this writing Prototype (1.6.0.1) weighs in at 121 KB. The six core files that make up script.aculo.us 1.8.1 (sound.js and unittest.js are optional) also happen to total 121 KB, making a combined size of 242 KB. If I could therefore use jQuery 1.2.1 (at 45 KB) to achieve the same JavaScript-mediated effects, I'd be using around one fifth of the code libraries I was previously loading. But it's worse than that, because if I retained Proto.aculo.us for custom effects and loaded jQuery for K2, I'd be wasting bandwidth and CPU cycles like there was no tomorrow.

Prototype plus script.aculo.us

Here's how I was loading Proto.aculo.us in the head in my old WordPRess K2 r163 theme ("..." is a contracted path):

<script type="text/javascript" src=".../js/prototype.js.php"></script>
<script type="text/javascript" src=".../js/effects.js.php"></script>

I built a toggle for my sidebar to display a list of category feeds, initially styled not to display on my home page, with the following:

<?php if ((is_home()) && !(is_paged()) ) { ?>
<div class="sb-catfeeds"><h2>Category feeds</h2>
<span class="metalink"><a href="#catfeed" onclick="Effect.Combo('catfeed', {duration: .5}); return false" title="Click to show/hide category feeds (requires JavaScript)" class="feedlink">.../styles/bioneural/feedicongrey.png" alt="Feed" /></a></span>
<noscript><p class="alert">Please enable JavaScript for full functionality (toggle feed list visibility)</p></noscript>
<ul id="catfeed" style="display: none;">
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 0, 1, 1, 1, 0,'','','Feed','.../images/feedicon16px.png','') ?>
<!-- http://wiki.wordpress.org/list_cats -->
</ul>
</div>
<?php } ?>

A similar arrangement was used to hide and reveal my site preferences panel. Could I achieve the same using the lightweight jQuery?

Converting to jQuery

In my upgraded K2 RC3 theme I'm not loading any additional scripts in the head, because jQuery is already included. If you're not already using jQuery and just want to try it out, you can add it to your head temporarily and without uploading it to your own server like this:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.js"></script>

Here's what I now have in sidebar.php using jQuery syntax (adapted from this example):

	<?php if (is_home()) { ?>
	<div class="sb-catfeeds"><h4>Category feeds</h4>
	<script type="text/javascript">
		jQuery(document).ready(function() {

		// hide #catfeed as soon as the DOM is ready
		jQuery('#catfeed').hide();

		// toggle #catfeed on clicking the #catfeed-toogle link
		jQuery('a#catfeed-toggle').click(function() {
		jQuery('#catfeed').slideToggle(400);
		return false;
		});

	});
	</script>
	<noscript><p class="alert">Please enable JavaScript for full functionality (toggle feed list visibility)</p></noscript>
	<span class="metalink"><a href="#" id="catfeed-toggle" title="Click to show/hide category feeds (requires JavaScript)" class="feedlink"><img src=".../styles/bioneural/feedicongrey.png" alt="Feed" /></a></span>
	<ul id="catfeed">
		<?php wp_list_categories('feed_image=.../images/feedicon16px.png&title_li='); ?>
		<!-- http://codex.wordpress.org/Template_Tags/wp_list_categories -->
	</ul>
	</div>
	<?php } ?>

It's as close to poetry as code gets, but initially I was using "$" in place of "jQuery" and the code had no effect at all. Thanks to Karl we determined that K2 was already using $, thus leading to the "Error: $ is not a function" I was getting:

That error usually occurs when a script tries to use the $ function before the core jQuery file has been loaded or when $ is being used for something else. Try replac[ing] each mention of $ with jQuery and see if that fixes the problem.

Issues

The only issue I've noticed is that you get a "flash" view of the hidden div when changing pages (on bioneural.net this affects the site preferences panel). While I generally discourage flashing, I don't believe in this case it's an arrestable offence.

Actions Send this article link by e-mail Print this article without other content Follow responses to this article (comments feed) Share this on del.icio.us, Digg, StumbleUpon Translate this page: DE | ES | FR Follow tag feeds: css, Internet, javascript, jquery, opensource, webdev, wordpress. Buy for yourself on Amazon.com or Amazon.co.uk, leave a "tip"