Archive for the ‘jQuery’ Category

A praise for jQuery

Posted by Giovanni Intini | Filed under Ajax, Javascript, Programming, jQuery

I’ve been doing some drupal development lately, and had to make the switch from Prototype to jQuery (by the way it’s the same switch WordPress made in 2.2).

At first I had to learn the different approach jQuery has to manipulating the DOM, but once I got the hang of it I really started appreciating jQuery.

The main difference I’ve found is that I prefer programming Prototype via the Rails helpers, while programming jQuery is so fun I prefer to do it directly in JavaScript.

Actually it turned out so fun that I keep adding content to pages and changes links in JS, while I should do that in the backend.

Here’s an example, from a drupal module I wrote:

$(document).ready(function() {
  $('#comments h2').after('<p class="slider"><a href="#" class="slide-open">Espandi tutti i commenti</a> - <a href="#" class="slide-close">Contrai tutti i commenti</a></p>');
  $('.comment .expand').html("[+]");
  $('.comment .content').hide();
	$('.comment h3').click(function() { 
		$(this).siblings('.content').slideToggle(); 
		if ($(this).children('.expand').html() == "[-]") {
			$(this).children('.expand').html("[+]");
		} else {
			$(this).children('.expand').html("[-]");
		}
		return false; 
	});
 
	$('#comments .slider .slide-open').click(function() {
		$('.content').show();
		$('.comment .expand').html("[-]");
		return false;
	});
 
	$('#comments .slider .slide-close').click(function() {
		$('.content').hide();
		$('.comment .expand').html("[+]");
		return false;
	});
})

What does this code do? Add a couple of links after the comments heading, hide all the comments and add a slidedown/up functionality to them.

The best thing of adding this functionality in the frontend is that when the user has js disabled or is using a non-js browser the site falls back to the normal behavior.

Read more | Comments (2) | May 17, 2007