With the jQuery increment-decrement plugin:

   1  (function($){  
   2    /**
   3     * Returns the current value of the counter.
   4     */
   5    function value(counter) {
   6      return parseInt(counter.html());
   7    }
   8    /**
   9     * Changes the counter's value.
  10     */
  11    function change(counters, step) {
  12      return counters.each(function() {  
  13        var $counter = $(this);
  14        // Increment counter
  15        var count = value($counter) + step;
  16        $counter.html(count);
  17        // Trigger event
  18        var event_name = step > 0 ? 'increment' : 'decrement';
  19        $counter.trigger(event_name, [$counter, count]);
  20        return count;
  21      });  
  22    }
  23    $.fn.increment = function(step) {  
  24      if(!step) { step = 1; }
  25      change(this, step);
  26    };  
  27    $.fn.decrement = function(step) {  
  28      if(!step) { step = -1; }
  29      change(this, step);
  30    };  
  31    $.fn.counterValue = function() {  
  32      return value($(this));
  33    };  
  34  })(jQuery); 

and the following HTML:

   1  <div id="counter">0</div>

you can call these methods to increment/decrement the number:

   1  $('#counter').increment();
   2  $('#counter').increment(10)
   3  $('#counter').decrement();
   4  $('#counter').decrement(-10)

Event listeners

You can also listen to the increment and decrement events:

   1  $('#counter').bind('increment', function(event, counter, value) {
   2    console.log('Incremented ' + counter + value);
   3  });
   4  $('#counter').bind('decrement', function(event, counter, value) {
   5    console.log('Decremented ' + counter + value);
   6  });

This snippet shows you how to build a simple popup menu with jQuery. The example code can also be used to build things such as tooltips.

In the example we’re going to build a menu for deleting table rows.

The HTML:

   1  <table id="data">
   2    <tr>
   3      <td>
   4        <a href='/domains/digg.com'>digg.com</a>
   5        <!-- menu start -->
   6        <span class='hover-menu'>
   7          <a href='/domains/digg.com/remove' class='remove'>remove</a>
   8        </span>
   9        <!-- menu end -->
  10      </td>
  11    </tr>
  12  </table>

The CSS:

   1  .hover-menu
   2    display: none

The Javascript:

   1  $.event.special.hover.delay = 200; 
   2  $.event.special.hover.speed = 200; 
   3  
   4  var show = function(e) {
   5    var $this = $(this);
   6    var $tooltip = $this.find('.hover-menu');
   7    $tooltip.fadeIn();
   8  }
   9  
  10  var hide = function() {
  11    var $this = $(this);
  12    var $tooltip = $this.find('.hover-menu');
  13    $tooltip.fadeOut();
  14  }
  15  $('#data td').bind('hover', show);
  16  $('#data td').bind('hoverend', hide);

When you hover your mouse over table rows the menu will be shown.

You’ll need to install the Event hover jQuery plugin to be able to use the hover and hoverend events. You could replace them with mouseenter and mouseleave, but usability would suffer…

   1  $('form').submit(function() {
   2      debugger; // This will open the Firebug debugger
   3      $.post(this.action, $(this).serialize(), null, "json");
   4      return false;
   5  });

   1  $.ajax({
   2  	type: 'GET',
   3  	url: '/some/good/stuff.xml',
   4  	dataType: 'xml',
   5  	error: function(xhr) {
   6  		alert('Failed to parse feed');
   7  	},
   8  	success: function(xml) {
   9  		var channel = $('channel', xml).eq(0);
  10  		var items = [];
  11  		$('item', xml).each( function() {
  12  			var item = {};
  13  			item.title = $(this).find('title').eq(0).text();
  14  			item.link = $(this).find('link').eq(0).text();
  15  			item.description = $(this).find('description').eq(0).text();
  16  			item.updated = $(this).find('pubDate').eq(0).text();
  17  			item.id = $(this).find('guid').eq(0).text();
  18  			items.push(item);
  19  		});
  20  		console.dir(items);
  21  	}
  22  });

Your friend Internet Explorer

For IE 6 and better (worse?) the feed must return the right content type, so make sure the response contains this header:

   1  Content-type: text/xml

If this header is not set the jQuery Ajax error handler is called and the feed is not parsed.

Code:

   1  var Request = {	
   2  	parameter: function(name) {
   3  		return this.parameters()[name];
   4  	},
   5  	
   6  	parameters: function() {
   7  		var result = {};
   8  		var url = window.location.href;
   9  		var parameters = url.slice(url.indexOf('?') + 1).split('&');
  10  		
  11  		for(var i = 0;  i < parameters.length; i++) {
  12  			var parameter = parameters[i].split('=');
  13  			result[parameter[0]] = parameter[1];
  14  		}
  15  		return result;
  16  	}
  17  }

Examples:

   1  // ?query=test
   2  var query = Request.parameter('query');
   3  
   4  var parameters = Request.parameters();
   5  // This works too
   6  var query = parameters.query;
   7  // And this
   8  var query = parameters['query'];