jQuery increment/decrement plugin
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 });
How to build popup menus and tooltips with jQuery
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…
How to trigger the Firebug debugger programatically
1 $('form').submit(function() { 2 debugger; // This will open the Firebug debugger 3 $.post(this.action, $(this).serialize(), null, "json"); 4 return false; 5 });
How to parse XML feeds with jQuery
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.
How to parse request parameters with JavaScript
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'];