Merge branch 'master' of github.com:jquery/web-learn-jquery-com

* 'master' of github.com:jquery/web-learn-jquery-com:
  How To: fix title as the colon does not make nanoc happy
  adding working with events part 2 and correcting note on part 1
  adding working with events part 1
  correcting md
  adding keyboard navigation post
  adding events, using delegate and undelegate
  adding plugin development pattern post, correcting entity encoding
  adding making a jq plugin customizable post
  adding editrequired
  markdown correction for soln list
  adding enabling the back button
  adding queue examples post from gnarf.net
  adding queue/dequeue post

Author: ajpiano

content/effects/queue_and_dequeue_explained.md

@@ -0,0 +1,55 @@
+---
+title:        Queue & Dequeue Explained
+attribution:  Remy Sharp
+editrequired: 2
+source:       http://jqueryfordesigners.com/api-queue-dequeue/
+---
+
+When you use the animate and show, hide, slideUp, etc effect methods, you’re adding a job on to the fx queue.By default, using queue and passing a function, will add to the fx queue. So we’re creating our own bespoke animation step:
+
+<div class="example" markdown="1">
+$('.box').animate({
+	height : 20
+}, 'slow')
+.queue(function () {
+	$('#title').html("We're in the animation, baby!");
+});
+</div>
+
+As I said though, these methods come in pairs, so anything you add using queue, you need to dequeue to allow the process to continue. In the code above, if I chained more animations on, until I call $(this).dequeue(), the subsequent animations wouldn’t run:
+
+<div class="example" markdown="1">
+$('.box').animate({
+	height : 20
+}, 'slow')
+.queue(function () {
+	$('#title').html("We're in the animation, baby!");
+	$(this).dequeue();
+})
+.animate({
+	height: 150
+});
+</div>
+
+Keeping in mind that the animation won’t continue until we’ve explicitly called dequeue, we can easily create a pausing plugin, by adding a step in the queue that sets a timer and triggers after n milliseconds, at which time, it dequeues the element:
+
+<div class="example" markdown="1">
+$.fn.pause = function (n) {
+	return this.queue(function () {
+		var el = this;
+		setTimeout(function () {
+			return $(el).dequeue();
+		}, n);
+	});
+};
+
+$('.box').animate({
+		height : 20
+	}, 'slow')
+	.pause(1000) // 1000ms == 1 second
+	.animate({
+		height: 150
+	});
+</div>
+
+Remember that the first argument for queue and dequeue are ‘fx’, and that in all of these examples I’m not including it because jQuery set the argument to ‘fx’ by default - so I don’t have to specify it.

content/effects/uses_of_queue_and_dequeue.md

@@ -0,0 +1,180 @@
+---
+title:        The uses of jQuery .queue() and .dequeue()
+attribution:  Corey Frang 
+status:       needswork
+editrequired: 2
+source:       http://gnarf.net/2010/09/30/the-uses-of-jquery-queue-and-dequeue/
+---
+
+Queues in jQuery are used for animations. You can use them for any purpose you like. They are an array of functions stored on a per element basis, using jQuery.data(). The are First-In-First-Out (FIFO). You can add a function to the queue by calling .queue(), and you remove (by calling) the functions using .dequeue().
+
+To understand the internal jQuery queue functions, reading the source and looking at examples helps me out tremendously. One of the best examples of a queue function I’ve seen is .delay():
+
+<div class="example" markdown="1">
+$.fn.delay = function( time, type ) {
+  time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
+  type = type || "fx";
+
+  return this.queue( type, function() {
+    var elem = this;
+    setTimeout(function() {
+      jQuery.dequeue( elem, type );
+    }, time );
+  });
+};
+</div>
+
+## The default queue – fx
+
+The default queue in jQuery is fx. The default queue has some special properties that are not shared with other queues.
+
+- Auto Start: When calling $(elem).queue(function(){}); the fx queue will automatically dequeue the next function and run it if the queue hasn’t started.
+- ‘inprogress’ sentinel: Whenever you dequeue() a function from the fx queue, it will unshift() (push into the first location of the array) the string "inprogress" – which flags that the queue is currently being run.
+- It’s the default! The fx queue is used by .animate() and all functions that call it by default.
+
+<div class="note">
+If you are using a custom queue, you must manually .dequeue() the functions, they will not auto start!
+Retrieving/Setting the queue
+</div>
+
+You can retrieve a reference to a jQuery queue by calling .queue() without a function argument. You can use the method if you want to see how many items are in the queue. You can use push, pop, unshift, shift to manipulate the queue in place. You can replace the entire queue by passing an array to the .queue() function.
+
+## Quick Examples:
+
+<div class="example" markdown="1">
+// lets assume $elem is a jQuery object that points to some element we are animating.
+var queue = $elem.queue();
+// remove the last function from the animation queue.
+var lastFunc = queue.pop();
+// insert it at the beginning:    
+queue.unshift(lastFunc);
+// replace queue with the first three items in the queue
+$elem.queue(queue.slice(0,3));
+</div>
+
+### An animation (fx) queue example:
+
+<div class="example" markdown="1">
+$(function() {
+    // lets do something with google maps:
+    var $map = $("#map_canvas");
+    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
+    var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
+    var geocoder = new google.maps.Geocoder();
+    var map = new google.maps.Map($map[0], myOptions);
+    var resized = function() {
+        // simple animation callback - let maps know we resized
+        google.maps.event.trigger(map, 'resize');
+    };
+
+    // wait 2 seconds
+    $map.delay(2000);
+    // resize the div:
+    $map.animate({
+        width: 250,
+        height: 250,
+        marginLeft: 250,
+        marginTop:250
+    }, resized);
+    // geocode something
+    $map.queue(function(next) {
+        // find stackoverflow's whois address:
+      geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);
+
+      function handleResponse(results, status) {
+          if (status == google.maps.GeocoderStatus.OK) {
+              var location = results[0].geometry.location;
+              map.setZoom(13);
+              map.setCenter(location);
+              new google.maps.Marker({ map: map, position: location });
+          }
+          // geocoder result returned, continue with animations:
+          next();
+      }
+    });
+    // after we find stack overflow, wait 3 more seconds
+    $map.delay(3000);
+    // and resize the map again
+    $map.animate({
+        width: 500,
+        height: 500,
+        marginLeft:0,
+        marginTop: 0
+    }, resized);
+});
+</div>
+
+### Queueing something like Ajax Calls:
+
+
+<div class="example" markdown="1">
+  // jQuery on an empty object, we are going to use this as our Queue
+  var ajaxQueue = $({});
+
+  $.ajaxQueue = function(ajaxOpts) {
+    // hold the original complete function
+    var oldComplete = ajaxOpts.complete;
+
+    // queue our ajax request
+    ajaxQueue.queue(function(next) {
+
+      // create a complete callback to fire the next event in the queue
+      ajaxOpts.complete = function() {
+        // fire the original complete if it was there
+        if (oldComplete) oldComplete.apply(this, arguments);
+
+        next(); // run the next query in the queue
+      };
+
+      // run the query
+      $.ajax(ajaxOpts);
+    });
+  };
+
+// get each item we want to copy
+$("#items li").each(function(idx) {
+
+    // queue up an ajax request
+    $.ajaxQueue({
+        url: '/ajax_html_echo/',
+        data: {html : "["+idx+"] "+$(this).html()},
+        type: 'POST',
+        success: function(data) {
+            // Write to #output
+            $("#output").append($("<li>", { html: data }));
+        }
+    });
+});
+</div>
+
+### Another custom queue example
+
+<div class="example" markdown="1">
+var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
+
+$.each([1,2,3],function(i, num) {
+  // lets add some really simple functions to a queue:
+  theQueue.queue('alerts', function(next) {
+    // show something, and if they hit "yes", run the next function.
+    if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
+      next();
+    }
+  });
+});
+
+// create a button to run the queue:
+$("<button>", {
+  text: 'Run Queue',
+  click: function() {
+    theQueue.dequeue('alerts');
+  }
+}).appendTo('body');
+
+// create a button to show the length:
+$("<button>", {
+  text: 'Show Length',
+  click: function() {
+    alert(theQueue.queue('alerts').length);
+  }
+}).appendTo('body');
+</div>