From 0de0a83fd75093428e18604b3b3f8658c7452e73 Mon Sep 17 00:00:00 2001 From: rwldrn Date: Fri, 3 Sep 2010 12:05:40 -0400 Subject: [PATCH 1/2] updates to examples; syntax changes per discussion; comment clarifications --- examples/config.php | 58 +- examples/deparam/index.php | 382 +++--- examples/fragment-advanced/burger.html | 30 +- examples/fragment-advanced/chicken.html | 30 +- examples/fragment-advanced/index.php | 618 +++++----- examples/fragment-advanced/kebabs.html | 30 +- examples/fragment-advanced/kielbasa.html | 30 +- examples/fragment-advanced/ribs.html | 30 +- examples/fragment-advanced/steak.html | 30 +- examples/fragment-ajax-crawlable/XMLpage.php | 191 +-- examples/fragment-ajax-crawlable/index.php | 577 ++++----- examples/fragment-ajax-crawlable/page.php | 43 +- examples/fragment-basic/burger.html | 30 +- examples/fragment-basic/chicken.html | 30 +- examples/fragment-basic/index.php | 502 ++++---- examples/fragment-basic/kebabs.html | 30 +- examples/fragment-basic/kielbasa.html | 30 +- examples/fragment-basic/ribs.html | 30 +- examples/fragment-basic/steak.html | 30 +- examples/fragment-jquery-ui-tabs/index.php | 498 ++++---- examples/index.css | 1102 +++++++++--------- examples/index.php | 319 +++-- 22 files changed, 2388 insertions(+), 2262 deletions(-) diff --git a/examples/config.php b/examples/config.php index 184df44..be5be69 100644 --- a/examples/config.php +++ b/examples/config.php @@ -1,20 +1,38 @@ - - Project Home, - Documentation, - Source - + + Project Home, + Documentation, + Source + -$(function(){ - - // Values are not coerced. - var params = $.deparam.querystring(); - - debug.log( 'not coerced', params ); - $('#deparam_string').text( JSON.stringify( params, null, 2 ) ); - - // Values are coerced. - params = $.deparam.querystring( true ); - - debug.log( 'coerced', params ); - $('#deparam_coerced').text( JSON.stringify( params, null, 2 ) ); - - // Highlight the current sample query string link - var qs = $.param.querystring(); - - $('li a').each(function(){ - if ( $(this).attr( 'href' ) === '?' + qs ) { - $(this).addClass( 'current' ); - } - }); - -}); - - - - - - - - - -

- jQuery BBQ includes a powerful jQuery.deparam method that is capable of fully deserializing not only any params string that jQuery.param can create, but that PHP and Rails (and hopefully everything else) can create. And even though only the query string is being parsed this example, methods for parsing a params string out of the fragment (hash) as well parsing any stand-alone params string are included. jQuery BBQ can also be used to merge params from multiple URLs or objects into a new URL, even within element attributes. See the documentation for a full list of methods! -

- -

Sample query strings for you to click:

- -
    -
  1. Arrays encoded like this won't work as-expected in PHP / Rails, but work in BBQ and many older server-side frameworks (jQuery 1.3.2 or older $.param, jQuery 1.4 with $.param.traditional = true):
    - ?a=1&a=2&a=3&b=4&c=true&d=0
    2. -
  2. Arrays encoded like this will work as-expected in PHP / Rails / BBQ (jQuery 1.4 or newer $.param):
    - ?a[]=1&a[]=2&a[]=3&b=4&c=true&d=0
    3. -
  3. jQuery BBQ and PHP can handle non-shallow arrays, but Rails (rack) cannot (jQuery 1.4 or newer $.param):
    - ?a[]=0&a[1][]=1&a[1][]=2&a[2][]=3&a[2][1][]=4&a[2][1][]=5&a[2][2][]=6&a[3][b][]=7&a[3][b][1][]=8&a[3][b][1][]=9 - &a[3][b][2][0][c]=10&a[3][b][2][0][d]=11&a[3][b][3][0][]=12&a[3][b][4][0][0][]=13&a[3][b][5][e][f][g][]=14 - &a[3][b][5][e][f][g][1][]=15&a[3][b][]=16&a[]=17
    4. -
  4. Some simple implicitly non-string values that BBQ can optionally coerce:
    - ?a=true&b=false&c=undefined&d=&f=1&g=2&h=hello+world
    5. -
  5. More nested data structures. Since the arrays are shallow, this works in Rails (rack).
    - ?a[]=4&a[]=5&a[]=6&b[x][]=7&b[y]=8&b[z][]=9&b[z][]=0&b[z][]=true&b[z][]=false&b[z][]=undefined&b[z][]=&c=1
    6. -
- -

Urldecoded query string

- - - - -

Query string params, as parsed by jQuery BBQ (and converted to JSON)

- -
-

$.deparam.querystring();

- 

-

-
-

-  
$.deparam.querystring( true );

-  

-

-
-

-
-
-
GET params, as parsed by PHP

-
print_r( $_GET );

-
-
-
-

-
-
-
The code

-
-
-
-

-
-
+$(function(){
+  
+  // Values are not coerced.
+  var params = $.deparam.querystring();
+  
+  debug.log( 'not coerced', params );
+  $('#deparam_string').text( JSON.stringify( params, null, 2 ) );
+  
+  // Values are coerced.
+  params = $.deparam.querystring( true );
+  
+  debug.log( 'coerced', params );
+  $('#deparam_coerced').text( JSON.stringify( params, null, 2 ) );
+  
+  // Highlight the current sample query string link
+  var qs = $.param.querystring();
+  
+  $('li a').each(function(){
+    if ( $(this).attr( 'href' ) === '?' + qs ) {
+      $(this).addClass( 'current' );
+    }
+  });
+  
+});
+
+
+
+
+
+
+
+
+
+

+  jQuery BBQ includes a powerful jQuery.deparam method that is capable of fully deserializing not only any params string that jQuery.param can create, but that PHP and Rails (and hopefully everything else) can create. And even though only the query string is being parsed this example, methods for parsing a params string out of the fragment (hash) as well parsing any stand-alone params string are included. jQuery BBQ can also be used to merge params from multiple URLs or objects into a new URL, even within element attributes. See the documentation for a full list of methods!
+

+
+
Sample query strings for you to click:

+
+
    
+  
  1. Arrays encoded like this won't work as-expected in PHP / Rails, but work in BBQ and many older server-side frameworks (jQuery 1.3.2 or older $.param, jQuery 1.4 with $.param.traditional = true):
    
+    ?a=1&a=2&a=3&b=4&c=true&d=0
    2. 
+  
  2. Arrays encoded like this will work as-expected in PHP / Rails / BBQ (jQuery 1.4 or newer $.param):
    
+    ?a[]=1&a[]=2&a[]=3&b=4&c=true&d=0
    3. 
+  
  3. jQuery BBQ and PHP can handle non-shallow arrays, but Rails (rack) cannot (jQuery 1.4 or newer $.param):
    
+    ?a[]=0&a[1][]=1&a[1][]=2&a[2][]=3&a[2][1][]=4&a[2][1][]=5&a[2][2][]=6&a[3][b][]=7&a[3][b][1][]=8&a[3][b][1][]=9
+  &a[3][b][2][0][c]=10&a[3][b][2][0][d]=11&a[3][b][3][0][]=12&a[3][b][4][0][0][]=13&a[3][b][5][e][f][g][]=14
+  &a[3][b][5][e][f][g][1][]=15&a[3][b][]=16&a[]=17
    4. 
+  
  4. Some simple implicitly non-string values that BBQ can optionally coerce:
    
+    ?a=true&b=false&c=undefined&d=&f=1&g=2&h=hello+world
    5. 
+  
  5. More nested data structures. Since the arrays are shallow, this works in Rails (rack).
    
+    ?a[]=4&a[]=5&a[]=6&b[x][]=7&b[y]=8&b[z][]=9&b[z][]=0&b[z][]=true&b[z][]=false&b[z][]=undefined&b[z][]=&c=1
    6. 
+

+
+
Urldecoded query string

+
+
+
+
+
Query string params, as parsed by jQuery BBQ (and converted to JSON)

+
+

+  
$.deparam.querystring();

+  

+

+
+

+  
$.deparam.querystring( true );

+  

+

+
+

+
+
+
GET params, as parsed by PHP

+
print_r( $_GET );

+
+
+
+

+
+
+
The code

+
+
+
+

+
+
\ No newline at end of file
diff --git a/examples/fragment-advanced/burger.html b/examples/fragment-advanced/burger.html
index 6848322..84f757b 100644
--- a/examples/fragment-advanced/burger.html
+++ b/examples/fragment-advanced/burger.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Delicious Burgers

-
It might look like more food than you can eat, but trust me, you'll finish 
-this burger. What, you say you're a vegetarian? Ok then, try the
-Chicken!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Delicious Burgers

+
It might look like more food than you can eat, but trust me, you'll finish 
+this burger. What, you say you're a vegetarian? Ok then, try the
+Chicken!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-advanced/chicken.html b/examples/fragment-advanced/chicken.html
index 92327e4..315e947 100644
--- a/examples/fragment-advanced/chicken.html
+++ b/examples/fragment-advanced/chicken.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Mesquite Rub Chicken

-
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
-seconds! Still hungry? Why not wash that chicken down with a heaping plate of
-Kebabs?

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Mesquite Rub Chicken

+
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
+seconds! Still hungry? Why not wash that chicken down with a heaping plate of
+Kebabs?

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-advanced/index.php b/examples/fragment-advanced/index.php
index d575ffc..ecbf745 100644
--- a/examples/fragment-advanced/index.php
+++ b/examples/fragment-advanced/index.php
@@ -1,307 +1,313 @@
-
-$(function(){
-  
-  // For each .bbq widget, keep a data object containing a mapping of
-  // url-to-container for caching purposes.
-  $('.bbq').each(function(){
-    $(this).data( 'bbq', {
-      cache: {
-        // If url is '' (no fragment), display this div's content.
-        '': $(this).find('.bbq-default')
-      }
-    });
-  });
-  
-  // For all links inside a .bbq widget, push the appropriate state onto the
-  // history when clicked.
-  $('.bbq a[href^=#]').live( 'click', function(e){
-    var state = {},
-      
-      // Get the id of this .bbq widget.
-      id = $(this).closest( '.bbq' ).attr( 'id' ),
-      
-      // Get the url from the link's href attribute, stripping any leading #.
-      url = $(this).attr( 'href' ).replace( /^#/, '' );
-    
-    // Set the state!
-    state[ id ] = url;
-    $.bbq.pushState( state );
-    
-    // And finally, prevent the default link click behavior by returning false.
-    return false;
-  });
-  
-  // Bind an event to window.onhashchange that, when the history state changes,
-  // iterates over all .bbq widgets, getting their appropriate url from the
-  // current state. If that .bbq widget's url has changed, display either our
-  // cached content or fetch new content to be displayed.
-  $(window).bind( 'hashchange', function(e) {
-    
-    // Iterate over all .bbq widgets.
-    $('.bbq').each(function(){
-      var that = $(this),
-        
-        // Get the stored data for this .bbq widget.
-        data = that.data( 'bbq' ),
-        
-        // Get the url for this .bbq widget from the hash, based on the
-        // appropriate id property. In jQuery 1.4, you should use e.getState()
-        // instead of $.bbq.getState().
-        url = $.bbq.getState( that.attr( 'id' ) ) || '';
-      
-      // If the url hasn't changed, do nothing and skip to the next .bbq widget.
-      if ( data.url === url ) { return; }
-      
-      // Store the url for the next time around.
-      data.url = url;
-      
-      // Remove .bbq-current class from any previously "current" link(s).
-      that.find( 'a.bbq-current' ).removeClass( 'bbq-current' );
-      
-      // Hide any visible ajax content.
-      that.find( '.bbq-content' ).children( ':visible' ).hide();
-      
-      // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
-      url && that.find( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
-      
-      if ( data.cache[ url ] ) {
-        // Since the widget is already in the cache, it doesn't need to be
-        // created, so instead of creating it again, let's just show it!
-        data.cache[ url ].show();
-        
-      } else {
-        // Show "loading" content while AJAX content loads.
-        that.find( '.bbq-loading' ).show();
-        
-        // Create container for this url's content and store a reference to it in
-        // the cache.
-        data.cache[ url ] = $( '
' )
-          
-          // Append the content container to the parent container.
-          .appendTo( that.find( '.bbq-content' ) )
-          
-          // Load external content via AJAX. Note that in order to keep this
-          // example streamlined, only the content in .infobox is shown. You'll
-          // want to change this based on your needs.
-          .load( url, function(){
-            // Content loaded, hide "loading" content.
-            that.find( '.bbq-loading' ).hide();
-          });
-      }
-    });
-  })
-  
-  // Since the event is only triggered when the hash changes, we need to trigger
-  // the event now, to handle the hash the page may have loaded with.
-  $(window).trigger( 'hashchange' );
-  
-});
-
-
-
-
-
-
-
-

-  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
-

-
-

-  In this example, window.location.hash is used to store a serialized data object representing the state of multiple "widgets". Due to the flexibility of $.bbq.pushState(), a widget doesn't need to know the state of any other widget to push a state change onto the history, only their state needs to be specifed and it will be merged in, creating a new history entry and a page state that is bookmarkable. Of course, if you only want to keep track of a single item on the page, you might want to check out the basic window.onhashchange example.
-

-
-
-
This div.bbq widget has id "bbq1"

-
-

-  

-    Burgers |
-    Chicken |
-    Kebabs
-  

-  
-  

-    
-    
-    
-    
-    
-    

-      
-      
jQuery BBQ

-      
Click a nav item above to load some delicious AJAX content! Also, once
-        the content loads, feel free to further explore our savory delights by
-        clicking any inline links you might see.

-    

-    
-  

-  
-  

-

-
-
This div.bbq widget has id "bbq2"

-
-

-  

-    Kielbasa |
-    Ribs |
-    Steak
-  

-  
-  

-    
-    
-    
-    
-    
-    

-      
-      
jQuery BBQ

-      
And there's plenty more where that came from! Don't forget to click
-        here for some down-home AJAX content, cooked special, just for this
-        content area. You just can't have too much of a good thing!

-    

-    
-  

-  
-  

-

-
-
The code

-
-
Note that a lot of the following code is very similar to the basic window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far more robust, it is somewhat more complex. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

-
-
-
-

-
-
+$(function(){
+  
+  // For each .bbq widget, keep a data object containing a mapping of
+  // url-to-container for caching purposes.
+  $('.bbq').each(function(){
+    $(this).data( 'bbq', {
+      cache: {
+        // If url is '' (no fragment), display this div's content.
+        '': $(this).find('.bbq-default')
+      }
+    });
+  });
+  
+  // For all links inside a .bbq widget, push the appropriate state onto the
+  // history when clicked.
+  $('.bbq a[href^=#]').live( 'click', function(e){
+    var state = {},
+      
+      // Get the id of this .bbq widget.
+      id = $(this).closest( '.bbq' ).attr( 'id' ),
+      
+      // Get the url from the link's href attribute, stripping any leading #.
+      url = $(this).attr( 'href' ).replace( /^#/, '' );
+    
+    // Set the state!
+    state[ id ] = url;
+    $.bbq.pushState( state );
+    
+    // And finally, prevent the default link click behavior by returning false.
+    return false;
+  });
+  
+  // Bind an event to window.onhashchange that, when the history state changes,
+  // iterates over all .bbq widgets, getting their appropriate url from the
+  // current state. If that .bbq widget's url has changed, display either our
+  // cached content or fetch new content to be displayed.
+  $(window).bind( 'hashchange', function(e) {
+    
+    // Iterate over all .bbq widgets.
+    $('.bbq').each(function(){
+      var that = $(this),
+        
+        // Get the stored data for this .bbq widget.
+        data = that.data( 'bbq' ),
+        
+        // Get the url for this .bbq widget from the hash, based on the
+        // appropriate id property. In jQuery 1.4, you should use e.getState()
+        // instead of $.bbq.getState().
+        url = $.bbq.getState( that.attr( 'id' ) ) || '';
+      
+      // If the url hasn't changed, do nothing and skip to the next .bbq widget.
+      if ( data.url === url ) { return; }
+      
+      // Store the url for the next time around.
+      data.url = url;
+      
+      // Remove .bbq-current class from any previously "current" link(s).
+      that.find( 'a.bbq-current' ).removeClass( 'bbq-current' );
+      
+      // Hide any visible ajax content.
+      that.find( '.bbq-content' ).children( ':visible' ).hide();
+      
+      // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
+      url && that.find( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
+      
+      if ( data.cache[ url ] ) {
+        // Since the widget is already in the cache, it doesn't need to be
+        // created, so instead of creating it again, let's just show it!
+        data.cache[ url ].show();
+        
+      } else {
+        // Show "loading" content while AJAX content loads.
+        that.find( '.bbq-loading' ).show();
+        
+        // Create container for this url's content and store a reference to it in
+        // the cache.
+        data.cache[ url ] = $( '
' )
+          
+          // Append the content container to the parent container.
+          .appendTo( that.find( '.bbq-content' ) )
+          
+          // Load external content via AJAX. Note that in order to keep this
+          // example streamlined, only the content in .infobox is shown. You'll
+          // want to change this based on your needs.
+          .load( url, function(){
+            // Content loaded, hide "loading" content.
+            that.find( '.bbq-loading' ).hide();
+          });
+      }
+    });
+  })
+  
+  // Since the event is only triggered when the hash changes, we need to trigger
+  // the event now, to handle the hash the page may have loaded with.
+  $(window).trigger( 'hashchange' );
+  
+});
+
+
+
+
+
+
+
+

+  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+

+
+

+  In this example, window.location.hash is used to store a serialized data object representing the state of multiple "widgets". Due to the flexibility of $.bbq.pushState(), a widget doesn't need to know the state of any other widget to push a state change onto the history, only their state needs to be specifed and it will be merged in, creating a new history entry and a page state that is bookmarkable. Of course, if you only want to keep track of a single item on the page, you might want to check out the basic window.onhashchange example.
+

+
+
+
This div.bbq widget has id "bbq1"

+
+

+  

+    Burgers |
+    Chicken |
+    Kebabs
+  

+  
+  

+    
+    
+    
+    
+    
+    

+      
+      
jQuery BBQ

+      
Click a nav item above to load some delicious AJAX content! Also, once
+        the content loads, feel free to further explore our savory delights by
+        clicking any inline links you might see.

+    

+    
+  

+  
+  

+

+
+
This div.bbq widget has id "bbq2"

+
+

+  

+    Kielbasa |
+    Ribs |
+    Steak
+  

+  
+  

+    
+    
+    
+    
+    
+    

+      
+      
jQuery BBQ

+      
And there's plenty more where that came from! Don't forget to click
+        here for some down-home AJAX content, cooked special, just for this
+        content area. You just can't have too much of a good thing!

+    

+    
+  

+  
+  

+

+
+
The code

+
+
Note that a lot of the following code is very similar to the basic window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far more robust, it is somewhat more complex. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

+
+
+
+

+
+
\ No newline at end of file
diff --git a/examples/fragment-advanced/kebabs.html b/examples/fragment-advanced/kebabs.html
index 5590896..50c338c 100644
--- a/examples/fragment-advanced/kebabs.html
+++ b/examples/fragment-advanced/kebabs.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Savory Shish-Kebabs

-
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
-to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
-delicious Burger whet your appetite?

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Savory Shish-Kebabs

+
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
+to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
+delicious Burger whet your appetite?

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-advanced/kielbasa.html b/examples/fragment-advanced/kielbasa.html
index 03ebe79..313b2d0 100644
--- a/examples/fragment-advanced/kielbasa.html
+++ b/examples/fragment-advanced/kielbasa.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Sweet Kielbasa

-
One bite of this kielbasa will have you asking for the recipe, and that's a fact.
-But save some room, because while you're here, you've got to check out our fantastic
-fall-off-the-bone Ribs!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Sweet Kielbasa

+
One bite of this kielbasa will have you asking for the recipe, and that's a fact.
+But save some room, because while you're here, you've got to check out our fantastic
+fall-off-the-bone Ribs!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-advanced/ribs.html b/examples/fragment-advanced/ribs.html
index 7d55009..a1a99da 100644
--- a/examples/fragment-advanced/ribs.html
+++ b/examples/fragment-advanced/ribs.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Baby-Back Ribs

-
What's better than a half-rack of ribs? A full rack! And if you like ribs,
-which you do, you're sure to love our perfectly seared flame-broiled
-Steak!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Baby-Back Ribs

+
What's better than a half-rack of ribs? A full rack! And if you like ribs,
+which you do, you're sure to love our perfectly seared flame-broiled
+Steak!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-advanced/steak.html b/examples/fragment-advanced/steak.html
index 5315eb4..2f9eb58 100644
--- a/examples/fragment-advanced/steak.html
+++ b/examples/fragment-advanced/steak.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Flame-Broiled Steak

-
Seasoned and cooked perfectly, this amazing steak aims to please! And if you
-have room left over, don't forget to help yourself to a plate of our sweet
-Kielbasa!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Flame-Broiled Steak

+
Seasoned and cooked perfectly, this amazing steak aims to please! And if you
+have room left over, don't forget to help yourself to a plate of our sweet
+Kielbasa!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-ajax-crawlable/XMLpage.php b/examples/fragment-ajax-crawlable/XMLpage.php
index 9d43cf5..cb20b0f 100644
--- a/examples/fragment-ajax-crawlable/XMLpage.php
+++ b/examples/fragment-ajax-crawlable/XMLpage.php
@@ -1,94 +1,97 @@
-attr['id']      // The page node "id" attribute.
-// $page->attr['title']   // The page node "title" attribute.
-// $page->content         // The contents of the page node.
-// 
-// $page->options['id']   // The requested "id".
-// 
-// Notes: 
-// 
-// * Either use valid XHTML content, or wrap the content inside the page node
-//   with  tags.
-// * Page attribute values are completely arbitrary and will be auto-populated
-//   into the `attr` array. The only required attribute is "id".
-
-class XMLpage {
-  
-  // Default options.
-  private $options = array(
-    'id' => '',
-    'xml' => 'pages.xml',
-    'fallback_ids' => array( '404', '' ),
-  );
-  
-  function XMLpage( $options = array() ) {
-    // Override any default options with passed options.
-    foreach ( $options as $key => $value ) {
-      $this->options[ $key ] = $value;
-    }
-    
-    // Initialize XML and XPath objects.
-    $this->dom = new DOMDocument();
-    $this->dom->load( $this->options['xml'] );
-    $this->xpath = new DOMXPath( $this->dom );
-    
-    // While the requested id will always be tried first, in case that page
-    // doesn't exist, the first page specified in `fallback_ids` will be used
-    // instead.
-    $ids = $this->options['fallback_ids'];
-    array_unshift( $ids, $this->options['id'] );
-    
-    foreach ( $ids as $id ) {
-      // If `id` page is defined in the XML, load and initialize it.
-      if ( $this->load_page( $id ) ) {
-        $this->init_page( $id );
-        break;
-      }
-    }
-  }
-  
-  // Load a page node from the XML document and return true if successful.
-  private function load_page( $id = '' ) {
-    // Get the page node matching this ID.
-    $this->page = $this->xpath->query( "/pages/page[@id='$id']" )->item(0);
-    
-    // Return the success value.
-    return isset( $this->page );
-  }
-  
-  // Initialize page vars from the XML.
-  private function init_page( $id ) {
-    // The HTML content of the page node.
-    $dom = new DOMDocument();
-    $dom->loadXML( $this->dom->saveXML( $this->page ) );
-    $this->content = $dom->saveHTML();
-    
-    // An array of attribute values.
-    $this->attr = array();
-    foreach ( $this->page->attributes as $name => $node ) {
-      $this->attr[ $name ] = $node->nodeValue;
-    }
-  }
-  
-};
-
-?>
\ No newline at end of file
+ `id`)); // Initialize.
+// 
+// $page->attr['id']      // The page node "id" attribute.
+// $page->attr['title']   // The page node "title" attribute.
+// $page->content         // The contents of the page node.
+// 
+// $page->options['id']   // The requested "id".
+// 
+// Notes: 
+// 
+// * Either use valid XHTML content, or wrap the content inside the page node
+//   with  tags.
+// * Page attribute values are completely arbitrary and will be auto-populated
+//   into the `attr` array. The only required attribute is "id".
+
+class XMLpage {
+  
+  private $dom, $xpath;
+  
+  public  $page, 
+          $content, 
+          $attr     = array(), 
+          $options  = array(
+            'id'            => '',
+            'xml'           => 'pages.xml',
+            'fallback_ids'  => array( '404', '' )
+          );  
+  
+  public function __construct( $options = array() ) {
+  
+    // Override any default options with passed options.
+    $this->options  = array_merge($this->options, $options);
+    
+    // Initialize XML and XPath objects.
+    $this->dom      = new DOMDocument();
+    $this->dom->load( $this->options['xml'] );
+    $this->xpath    = new DOMXPath( $this->dom );
+    
+    // While the requested id will always be tried first, in case that page
+    // doesn't exist, the first page specified in `fallback_ids` will be used
+    // instead.
+    array_unshift( $this->options['fallback_ids'], $this->options['id'] );
+    
+    foreach ( $this->options['fallback_ids'] as $id ) {
+      // If `id` page is defined in the XML, load and initialize it.
+      if ( $this->load_page( $id ) ) {
+        $this->init_page( $id );
+        break;
+      }
+    }
+    
+    return $this;
+  }
+  
+  // Load a page node from the XML document and return true if successful.
+  private function load_page( $id = '' ) {
+    // Get the page node matching this ID.
+    $this->page = $this->xpath->query( "/pages/page[@id='$id']" )->item(0);
+    
+    // Return the success value.
+    return isset( $this->page );
+  }
+  
+  // Initialize page vars from the XML.
+  private function init_page( $id ) {
+    // The HTML content of the page node.
+    $dom = new DOMDocument();
+    $dom->loadXML( $this->dom->saveXML( $this->page ) );
+    $this->content = $dom->saveHTML();
+    
+    // An array of attribute values.
+    foreach ( $this->page->attributes as $name => $node ) {
+      $this->attr[ $name ] = $node->nodeValue;
+    }
+    
+    return $this;
+  }
+  
+};
\ No newline at end of file
diff --git a/examples/fragment-ajax-crawlable/index.php b/examples/fragment-ajax-crawlable/index.php
index c9719eb..2db76dc 100644
--- a/examples/fragment-ajax-crawlable/index.php
+++ b/examples/fragment-ajax-crawlable/index.php
@@ -1,280 +1,297 @@
- $_REQUEST['_escaped_fragment_'] ));
-
-// This is a special case for the 404 error page. Only if it is defined in the
-// XML and a page isn't found will a 404 header be set.
-if ( $page->attr['status'] == '404' ) {
-  header( 'HTTP/1.0 404 Not Found' );
-}
-
-// Set the title appropriately, based on the XMLpage title attribute.
-$shell['title'] = $page->attr['title'];
-
-$shell['h2'] = 'Cached AJAX + fragment + history + bookmarking = Tasty!';
-
-// ========================================================================== //
-// SCRIPT
-// ========================================================================== //
-
-ob_start();
-?>
-$(function(){
-  
-  // Enable "AJAX Crawlable" mode.
-  $.param.fragment.ajaxCrawlable( true );
-  
-  // Keep a mapping of url-to-container for caching purposes.
-  var cache = {
-    // If url is '' (no fragment), display this div's content.
-    '': {
-      title: "attr['title'] ?>",
-      elem: $('.bbq-item')
-    }
-  };
-  
-  // Bind an event to window.onhashchange that, when the history state changes,
-  // gets the url from the hash and displays either our cached content or fetches
-  // new content to be displayed.
-  $(window).bind( 'hashchange', function(e) {
-    
-    // Get the hash (fragment) as a string, with any leading # removed. Note that
-    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
-    var url = $.param.fragment();
-    
-    // Remove .bbq-current class from any previously "current" link(s).
-    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
-    
-    // Hide any visible ajax content.
-    $( '.bbq-content' ).children( ':visible' ).hide();
-    
-    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
-    url && $( 'a[href="#!' + url + '"]' ).addClass( 'bbq-current' );
-    
-    if ( cache[ url ] ) {
-      // Since the element is already in the cache, it doesn't need to be
-      // created, so instead of creating it again, let's just show it!
-      cache[ url ].elem.show();
-      
-      // Update the document title.
-      document.title = cache[ url ].title;
-      
-    } else {
-      // Show "loading" content while AJAX content loads.
-      $( '.bbq-loading' ).show();
-      
-      // Load external content (stored in the XML data file) via AJAX. The
-      // purpose of page.php is simply to provide the data stored in XML in
-      // the more friendly JSON format.
-      $.getJSON( 'page.php', { id: url }, function(data){
-        
-        // Ensure that data was actually returned. You could easily go a step
-        // further and check that data.attr.status isn't '404', for example.
-        if ( data ) {
-          // Update the document title.
-          document.title = data.attr.title;
-          
-          // Update the internal cache with a reference to this element as well
-          // as its title.
-          cache[ url ] = {
-            title: data.attr.title,
-            elem: $( '
' )
-              
-              .html( data.content )
-              
-              // Append the content container to the parent container.
-              .appendTo( '.bbq-content' )
-          };
-        }
-        
-        // Content loaded, hide "loading" content.
-        $( '.bbq-loading' ).hide();
-      });
-    }
-  })
-  
-  // Since the event is only triggered when the hash changes, we need to trigger
-  // the event now, to handle the hash the page may have loaded with.
-  $(window).trigger( 'hashchange' );
-  
-});
-
-
-
-
-
-
-
-

-  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
-

-
-

-  (EXPLAIN)
-

-
-
Navigation

-
-

-  

-    Burgers |
-    Chicken |
-    Kebabs |
-    Kielbasa |
-    Ribs |
-    Steak
-  

-  
-  

-    
-    
-    
-    
-    
-    

-      content ?>
-    

-    
-  

-  
-  

-    Burgers |
-    Chicken |
-    Kebabs |
-    Kielbasa |
-    Ribs |
-    Steak
-  

-

-
-
The code

-
-
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

-
-
-
-

-
-
\ No newline at end of file
+attr['status']) && $page->attr['status'] == '404' ) {
+  header( 'HTTP/1.0 404 Not Found' );
+}
+
+
+// Set title as per my suggestion, as an override
+$shell['titles']  = array($page->attr['title']);
+
+// Set the title appropriately, based on the XMLpage title attribute.
+$shell['title']   = $page->attr['title'];
+$shell['h2']      = 'Cached AJAX + fragment + history + bookmarking = Tasty!';
+
+
+
+
+// ========================================================================== //
+// SCRIPT
+// ========================================================================== //
+
+ob_start();
+?>
+$(function(){
+  
+  // Enable "AJAX Crawlable" mode.
+  $.param.fragment.ajaxCrawlable( true );
+  
+  // Keep a mapping of url-to-container for caching purposes.
+  var cache = {
+    // If url is '' (no fragment), display this div's content.
+    '': {
+      title: "attr['title'] ?>",
+      elem: $('.bbq-item')
+    }
+  };
+  
+  // Bind an event to window.onhashchange that, when the history state changes,
+  // gets the url from the hash and displays either our cached content or fetches
+  // new content to be displayed.
+  $(window).bind( 'hashchange', function(e) {
+    
+    // Get the hash (fragment) as a string, with any leading # removed. Note that
+    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+    var url = $.param.fragment();
+    
+    // Remove .bbq-current class from any previously "current" link(s).
+    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
+    
+    // Hide any visible ajax content.
+    $( '.bbq-content' ).children( ':visible' ).hide();
+    
+    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
+    url && $( 'a[href="#!' + url + '"]' ).addClass( 'bbq-current' );
+    
+    if ( cache[ url ] ) {
+      // Since the element is already in the cache, it doesn't need to be
+      // created, so instead of creating it again, let's just show it!
+      cache[ url ].elem.show();
+      
+      // Update the document title.
+      document.title = cache[ url ].title;
+      
+    } else {
+      // Show "loading" content while AJAX content loads.
+      $( '.bbq-loading' ).show();
+      
+      // Load external content (stored in the XML data file) via AJAX. The
+      // purpose of page.php is simply to provide the data stored in XML in
+      // the more friendly JSON format.
+      $.getJSON( 'page.php', { id: url }, function(data){
+        
+        // Ensure that data was actually returned. You could easily go a step
+        // further and check that data.attr.status isn't '404', for example.
+        if ( data ) {
+          // Update the document title.
+          document.title = data.attr.title;
+          
+          // Update the internal cache with a reference to this element as well
+          // as its title.
+          cache[ url ] = {
+            title: data.attr.title,
+            elem: $( '
' )
+              
+              .html( data.content )
+              
+              // Append the content container to the parent container.
+              .appendTo( '.bbq-content' )
+          };
+        }
+        
+        // Content loaded, hide "loading" content.
+        $( '.bbq-loading' ).hide();
+      });
+    }
+  })
+  
+  // Since the event is only triggered when the hash changes, we need to trigger
+  // the event now, to handle the hash the page may have loaded with.
+  $(window).trigger( 'hashchange' );
+  
+});
+
+
+
+
+
+
+
+

+  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+

+
+

+  (EXPLAIN)
+

+
+
Navigation

+
+

+  

+    Burgers |
+    Chicken |
+    Kebabs |
+    Kielbasa |
+    Ribs |
+    Steak
+  

+  
+  

+    
+    
+    
+    
+    
+    

+      content ?>
+    

+    
+  

+  
+  

+    Burgers |
+    Chicken |
+    Kebabs |
+    Kielbasa |
+    Ribs |
+    Steak
+  

+

+
+
The code

+
+
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

+
+
+
+

+
+
diff --git a/examples/fragment-ajax-crawlable/page.php b/examples/fragment-ajax-crawlable/page.php
index 7188a47..a832548 100644
--- a/examples/fragment-ajax-crawlable/page.php
+++ b/examples/fragment-ajax-crawlable/page.php
@@ -1,19 +1,24 @@
- $_GET['id'] ));
-
-// Return the requested page data in JSON format.
-print json_encode(array(
-  'attr' => $page->attr,
-  'content' => $page->content,
-));
-
-?>
\ No newline at end of file
+ isset($_GET['id']) ? $_GET['id'] : ''
+                      )
+                    );
+
+
+// Return the requested page data in JSON format.
+echo    json_encode(array(
+                        'attr'    => $page->attr,
+                        'content' => $page->content
+                      )
+                    );
+
+?>
diff --git a/examples/fragment-basic/burger.html b/examples/fragment-basic/burger.html
index 8264721..c1c8cf4 100644
--- a/examples/fragment-basic/burger.html
+++ b/examples/fragment-basic/burger.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Delicious Burgers

-
It might look like more food than you can eat, but trust me, you'll finish 
-this burger. What, you say you're a vegetarian? Ok then, try the
-Chicken!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Delicious Burgers

+
It might look like more food than you can eat, but trust me, you'll finish 
+this burger. What, you say you're a vegetarian? Ok then, try the
+Chicken!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-basic/chicken.html b/examples/fragment-basic/chicken.html
index d2c5a78..28ad3cb 100644
--- a/examples/fragment-basic/chicken.html
+++ b/examples/fragment-basic/chicken.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Mesquite Rub Chicken

-
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
-seconds! Still hungry? Why not wash that chicken down with a heaping plate of
-Kebabs?

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Mesquite Rub Chicken

+
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
+seconds! Still hungry? Why not wash that chicken down with a heaping plate of
+Kebabs?

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-basic/index.php b/examples/fragment-basic/index.php
index 461e8fc..b9831dd 100644
--- a/examples/fragment-basic/index.php
+++ b/examples/fragment-basic/index.php
@@ -1,249 +1,255 @@
-
-$(function(){
-  
-  // Keep a mapping of url-to-container for caching purposes.
-  var cache = {
-    // If url is '' (no fragment), display this div's content.
-    '': $('.bbq-default')
-  };
-  
-  // Bind an event to window.onhashchange that, when the history state changes,
-  // gets the url from the hash and displays either our cached content or fetches
-  // new content to be displayed.
-  $(window).bind( 'hashchange', function(e) {
-    
-    // Get the hash (fragment) as a string, with any leading # removed. Note that
-    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
-    var url = $.param.fragment();
-    
-    // Remove .bbq-current class from any previously "current" link(s).
-    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
-    
-    // Hide any visible ajax content.
-    $( '.bbq-content' ).children( ':visible' ).hide();
-    
-    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
-    url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
-    
-    if ( cache[ url ] ) {
-      // Since the element is already in the cache, it doesn't need to be
-      // created, so instead of creating it again, let's just show it!
-      cache[ url ].show();
-      
-    } else {
-      // Show "loading" content while AJAX content loads.
-      $( '.bbq-loading' ).show();
-      
-      // Create container for this url's content and store a reference to it in
-      // the cache.
-      cache[ url ] = $( '
' )
-        
-        // Append the content container to the parent container.
-        .appendTo( '.bbq-content' )
-        
-        // Load external content via AJAX. Note that in order to keep this
-        // example streamlined, only the content in .infobox is shown. You'll
-        // want to change this based on your needs.
-        .load( url, function(){
-          // Content loaded, hide "loading" content.
-          $( '.bbq-loading' ).hide();
-        });
-    }
-  })
-  
-  // Since the event is only triggered when the hash changes, we need to trigger
-  // the event now, to handle the hash the page may have loaded with.
-  $(window).trigger( 'hashchange' );
-  
-});
-
-
-
-
-
-
-
-

-  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
-

-
-

-  In this basic example, window.location.hash is used to store a simple string value of the file to be loaded via AJAX, so that not only a history entry is added, but also so that the page, in its current state, can be bookmarked. Because the hash contains only a single filename, this example doesn't support multiple content boxes, each with their own state, on the same page, but that's definitely still possible! Just check out the advanced window.onhashchange example.
-

-
-
Navigation

-
-

-  

-    Burgers |
-    Chicken |
-    Kebabs |
-    Kielbasa |
-    Ribs |
-    Steak
-  

-  
-  

-    
-    
-    
-    
-    
-    

-      
-      
jQuery BBQ

-      
Click a nav item above or below to load some delicious AJAX content! Also,
-        once the content loads, feel free to further explore our savory delights by
-        clicking any inline links you might see.

-    

-    
-  

-  
-  

-    Burgers |
-    Chicken |
-    Kebabs |
-    Kielbasa |
-    Ribs |
-    Steak
-  

-

-
-
The code

-
-
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

-
-
-
-

-
-
+$(function(){
+  
+  // Keep a mapping of url-to-container for caching purposes.
+  var cache = {
+    // If url is '' (no fragment), display this div's content.
+    '': $('.bbq-default')
+  };
+  
+  // Bind an event to window.onhashchange that, when the history state changes,
+  // gets the url from the hash and displays either our cached content or fetches
+  // new content to be displayed.
+  $(window).bind( 'hashchange', function(e) {
+    
+    // Get the hash (fragment) as a string, with any leading # removed. Note that
+    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+    var url = $.param.fragment();
+    
+    // Remove .bbq-current class from any previously "current" link(s).
+    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
+    
+    // Hide any visible ajax content.
+    $( '.bbq-content' ).children( ':visible' ).hide();
+    
+    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
+    url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
+    
+    if ( cache[ url ] ) {
+      // Since the element is already in the cache, it doesn't need to be
+      // created, so instead of creating it again, let's just show it!
+      cache[ url ].show();
+      
+    } else {
+      // Show "loading" content while AJAX content loads.
+      $( '.bbq-loading' ).show();
+      
+      // Create container for this url's content and store a reference to it in
+      // the cache.
+      cache[ url ] = $( '
' )
+        
+        // Append the content container to the parent container.
+        .appendTo( '.bbq-content' )
+        
+        // Load external content via AJAX. Note that in order to keep this
+        // example streamlined, only the content in .infobox is shown. You'll
+        // want to change this based on your needs.
+        .load( url, function(){
+          // Content loaded, hide "loading" content.
+          $( '.bbq-loading' ).hide();
+        });
+    }
+  })
+  
+  // Since the event is only triggered when the hash changes, we need to trigger
+  // the event now, to handle the hash the page may have loaded with.
+  $(window).trigger( 'hashchange' );
+  
+});
+
+
+
+
+
+
+
+

+  With jQuery BBQ you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+

+
+

+  In this basic example, window.location.hash is used to store a simple string value of the file to be loaded via AJAX, so that not only a history entry is added, but also so that the page, in its current state, can be bookmarked. Because the hash contains only a single filename, this example doesn't support multiple content boxes, each with their own state, on the same page, but that's definitely still possible! Just check out the advanced window.onhashchange example.
+

+
+
Navigation

+
+

+  

+    Burgers |
+    Chicken |
+    Kebabs |
+    Kielbasa |
+    Ribs |
+    Steak
+  

+  
+  

+    
+    
+    
+    
+    
+    

+      
+      
jQuery BBQ

+      
Click a nav item above or below to load some delicious AJAX content! Also,
+        once the content loads, feel free to further explore our savory delights by
+        clicking any inline links you might see.

+    

+    
+  

+  
+  

+    Burgers |
+    Chicken |
+    Kebabs |
+    Kielbasa |
+    Ribs |
+    Steak
+  

+

+
+
The code

+
+
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but while this version is far less robust, it is much more simple. Look at both to see which meets your needs, and don't be afraid to adapt. Also, if you want to see a robust AND simple implementation, be sure to check out the jQuery UI Tabs example.

+
+
+
+

+
+
\ No newline at end of file
diff --git a/examples/fragment-basic/kebabs.html b/examples/fragment-basic/kebabs.html
index f237ce6..8af8fad 100644
--- a/examples/fragment-basic/kebabs.html
+++ b/examples/fragment-basic/kebabs.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Savory Shish-Kebabs

-
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
-to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
-delicious Burger whet your appetite?

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Savory Shish-Kebabs

+
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
+to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
+delicious Burger whet your appetite?

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-basic/kielbasa.html b/examples/fragment-basic/kielbasa.html
index bf1c0dd..6701071 100644
--- a/examples/fragment-basic/kielbasa.html
+++ b/examples/fragment-basic/kielbasa.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Sweet Kielbasa

-
One bite of this kielbasa will have you asking for the recipe, and that's a fact.
-But save some room, because while you're here, you've got to check out our fantastic
-fall-off-the-bone Ribs!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Sweet Kielbasa

+
One bite of this kielbasa will have you asking for the recipe, and that's a fact.
+But save some room, because while you're here, you've got to check out our fantastic
+fall-off-the-bone Ribs!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-basic/ribs.html b/examples/fragment-basic/ribs.html
index c63074b..c16444c 100644
--- a/examples/fragment-basic/ribs.html
+++ b/examples/fragment-basic/ribs.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Baby-Back Ribs

-
What's better than a half-rack of ribs? A full rack! And if you like ribs,
-which you do, you're sure to love our perfectly seared flame-broiled
-Steak!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Baby-Back Ribs

+
What's better than a half-rack of ribs? A full rack! And if you like ribs,
+which you do, you're sure to love our perfectly seared flame-broiled
+Steak!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-basic/steak.html b/examples/fragment-basic/steak.html
index c698959..a8a29e8 100644
--- a/examples/fragment-basic/steak.html
+++ b/examples/fragment-basic/steak.html
@@ -1,16 +1,16 @@
-
-
-
-  
-  Ben Alman » jQuery BBQ » Barbecue!
-
-
-
-
-
Flame-Broiled Steak

-
Seasoned and cooked perfectly, this amazing steak aims to please! And if you
-have room left over, don't forget to help yourself to a plate of our sweet
-Kielbasa!

-
-
+
+
+
+  
+  Ben Alman » jQuery BBQ » Barbecue!
+
+
+
+
+
Flame-Broiled Steak

+
Seasoned and cooked perfectly, this amazing steak aims to please! And if you
+have room left over, don't forget to help yourself to a plate of our sweet
+Kielbasa!

+
+
 
\ No newline at end of file
diff --git a/examples/fragment-jquery-ui-tabs/index.php b/examples/fragment-jquery-ui-tabs/index.php
index adce278..febd7ca 100644
--- a/examples/fragment-jquery-ui-tabs/index.php
+++ b/examples/fragment-jquery-ui-tabs/index.php
@@ -1,247 +1,251 @@
-
-$(function(){
-  
-  // The "tab widgets" to handle.
-  var tabs = $('.tabs'),
-    
-    // This selector will be reused when selecting actual tab widget A elements.
-    tab_a_selector = 'ul.ui-tabs-nav a';
-  
-  // Enable tabs on all tab widgets. The `event` property must be overridden so
-  // that the tabs aren't changed on click, and any custom event name can be
-  // specified. Note that if you define a callback for the 'select' event, it
-  // will be executed for the selected tab whenever the hash changes.
-  tabs.tabs({ event: 'change' });
-  
-  // Define our own click handler for the tabs, overriding the default.
-  tabs.find( tab_a_selector ).click(function(){
-    var state = {},
-      
-      // Get the id of this tab widget.
-      id = $(this).closest( '.tabs' ).attr( 'id' ),
-      
-      // Get the index of this tab.
-      idx = $(this).parent().prevAll().length;
-    
-    // Set the state!
-    state[ id ] = idx;
-    $.bbq.pushState( state );
-  });
-  
-  // Bind an event to window.onhashchange that, when the history state changes,
-  // iterates over all tab widgets, changing the current tab as necessary.
-  $(window).bind( 'hashchange', function(e) {
-    
-    // Iterate over all tab widgets.
-    tabs.each(function(){
-      
-      // Get the index for this tab widget from the hash, based on the
-      // appropriate id property. In jQuery 1.4, you should use e.getState()
-      // instead of $.bbq.getState(). The second, 'true' argument coerces the
-      // string value to a number.
-      var idx = $.bbq.getState( this.id, true ) || 0;
-      
-      // Select the appropriate tab for this tab widget by triggering the custom
-      // event specified in the .tabs() init above (you could keep track of what
-      // tab each widget is on using .data, and only select a tab if it has
-      // changed).
-      $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
-    });
-  })
-  
-  // Since the event is only triggered when the hash changes, we need to trigger
-  // the event now, to handle the hash the page may have loaded with.
-  $(window).trigger( 'hashchange' );
-  
-});
-
-
-
-
-
-
-
-
-
-
-

-  With jQuery BBQ you can keep track of state, history and allow bookmarking multiple jQuery UI tab widgets simultaneously.. just click some tabs, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
-

-
-

-  Like the advanced window.onhashchange example, window.location.hash is used to store a serialized data object representing the state of multiple tab boxes. Due to the flexibility of $.bbq.pushState(), each tab box doesn't need to know the state of any other tab box to push a state change onto the history, only their state needs to be specifed and it will be merged in, creating a new history entry and a page state that is bookmarkable. Of course, if you only want to keep track of a single item on the page, you might want to check out the basic window.onhashchange example.
-

-
-
This jQuery UI Tabs widget has id "some_tabs"

-
-

-  
-  

-    
-    
jQuery BBQ

-    
Click a tab above to display some delicious content!

-  

-  

-    
-    
Delicious Burgers

-    
It might look like more food than you can eat, but trust me, you'll finish 
-    this burger.

-  

-  

-    
-    
Mesquite Rub Chicken

-    
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
-    seconds!

-  

-  

-    
-    
Savory Shish-Kebabs

-    
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
-    to blow your mind!

-  

-  

-

-
-
This jQuery UI Tabs widget has id "more_tabs"

-
-

-  
-  

-    
-    
jQuery BBQ

-    
And there's plenty more where that came from! Don't forget to click
-      here for some more down-home content.

-  

-  

-    
-    
Sweet Kielbasa

-    
One bite of this kielbasa will have you asking for the recipe, and that's a fact.

-  

-  

-    
-    
Baby-Back Ribs

-    
What's better than a half-rack of ribs? A full rack!

-  

-  

-    
-    
Flame-Broiled Steak

-    
Seasoned and cooked perfectly, this amazing steak aims to please!

-  

-  

-

-
-
The code

-
-
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but this example is much less complicated due to jQuery UI Tabs' built-in functionality.

-
-
-
-

-
-
+
+$(function(){
+  
+  // The "tab widgets" to handle.
+  var tabs = $('.tabs'),
+    
+    // This selector will be reused when selecting actual tab widget A elements.
+    tab_a_selector = 'ul.ui-tabs-nav a';
+  
+  // Enable tabs on all tab widgets. The `event` property must be overridden so
+  // that the tabs aren't changed on click, and any custom event name can be
+  // specified. Note that if you define a callback for the 'select' event, it
+  // will be executed for the selected tab whenever the hash changes.
+  tabs.tabs({ event: 'change' });
+  
+  // Define our own click handler for the tabs, overriding the default.
+  tabs.find( tab_a_selector ).click(function(){
+    var state = {},
+      
+      // Get the id of this tab widget.
+      id = $(this).closest( '.tabs' ).attr( 'id' ),
+      
+      // Get the index of this tab.
+      idx = $(this).parent().prevAll().length;
+    
+    // Set the state!
+    state[ id ] = idx;
+    $.bbq.pushState( state );
+  });
+  
+  // Bind an event to window.onhashchange that, when the history state changes,
+  // iterates over all tab widgets, changing the current tab as necessary.
+  $(window).bind( 'hashchange', function(e) {
+    
+    // Iterate over all tab widgets.
+    tabs.each(function(){
+      
+      // Get the index for this tab widget from the hash, based on the
+      // appropriate id property. In jQuery 1.4, you should use e.getState()
+      // instead of $.bbq.getState(). The second, 'true' argument coerces the
+      // string value to a number.
+      var idx = $.bbq.getState( this.id, true ) || 0;
+      
+      // Select the appropriate tab for this tab widget by triggering the custom
+      // event specified in the .tabs() init above (you could keep track of what
+      // tab each widget is on using .data, and only select a tab if it has
+      // changed).
+      $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
+    });
+  })
+  
+  // Since the event is only triggered when the hash changes, we need to trigger
+  // the event now, to handle the hash the page may have loaded with.
+  $(window).trigger( 'hashchange' );
+  
+});
+
+
+
+
+
+
+
+
+
+
+

+  With jQuery BBQ you can keep track of state, history and allow bookmarking multiple jQuery UI tab widgets simultaneously.. just click some tabs, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+

+
+

+  Like the advanced window.onhashchange example, window.location.hash is used to store a serialized data object representing the state of multiple tab boxes. Due to the flexibility of $.bbq.pushState(), each tab box doesn't need to know the state of any other tab box to push a state change onto the history, only their state needs to be specifed and it will be merged in, creating a new history entry and a page state that is bookmarkable. Of course, if you only want to keep track of a single item on the page, you might want to check out the basic window.onhashchange example.
+

+
+
This jQuery UI Tabs widget has id "some_tabs"

+
+

+  
+  

+    
+    
jQuery BBQ

+    
Click a tab above to display some delicious content!

+  

+  

+    
+    
Delicious Burgers

+    
It might look like more food than you can eat, but trust me, you'll finish 
+    this burger.

+  

+  

+    
+    
Mesquite Rub Chicken

+    
This spicy meal might have you begging for "cerveza" but you'll be coming back for 
+    seconds!

+  

+  

+    
+    
Savory Shish-Kebabs

+    
Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
+    to blow your mind!

+  

+  

+

+
+
This jQuery UI Tabs widget has id "more_tabs"

+
+

+  
+  

+    
+    
jQuery BBQ

+    
And there's plenty more where that came from! Don't forget to click
+      here for some more down-home content.

+  

+  

+    
+    
Sweet Kielbasa

+    
One bite of this kielbasa will have you asking for the recipe, and that's a fact.

+  

+  

+    
+    
Baby-Back Ribs

+    
What's better than a half-rack of ribs? A full rack!

+  

+  

+    
+    
Flame-Broiled Steak

+    
Seasoned and cooked perfectly, this amazing steak aims to please!

+  

+  

+

+
+
The code

+
+
Note that a lot of the following code is very similar to the advanced window.onhashchange example. That's intentional! They're functionally very similar, but this example is much less complicated due to jQuery UI Tabs' built-in functionality.

+
+
+
+

+
+
diff --git a/examples/index.css b/examples/index.css
index 36c2bb2..d843107 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -1,551 +1,551 @@
-/* YUI RESETS */
-
-/*
-Copyright (c) 2008, Yahoo! Inc. All rights reserved.
-Code licensed under the BSD License:
-http://developer.yahoo.net/yui/license.txt
-version: 2.5.2
-*/
-html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
-
-/*
-Copyright (c) 2008, Yahoo! Inc. All rights reserved.
-Code licensed under the BSD License:
-http://developer.yahoo.net/yui/license.txt
-version: 2.5.2
-*/
-body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
-
-/*
-Copyright (c) 2008, Yahoo! Inc. All rights reserved.
-Code licensed under the BSD License:
-http://developer.yahoo.net/yui/license.txt
-version: 2.5.2
-*/
-h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;} em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}
-
-/* MISC RESETS */
-
-em, i {
-  font-weight: inherit;
-}
-
-ul, ol {
-  margin-right: 0;
-}
-
-pre {
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  white-space: -o-pre-wrap;
-  word-wrap: break-word;
-  _white-space: pre;
-}
-
-/* LISTS */
-
-div.nav ul, ul.nav {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-div.nav li, ul.nav li {
-  list-style: none !important;
-  background: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-div.nav-inline ul, ul.nav-inline {
-  width: auto !important;
-}
-
-div.nav-inline li, ul.nav-inline li {
-  display: inline !important;
-}
-
-dl.inline {
-  margin-left: 0;
-}
-
-dl.inline dt,
-dl.inline dd {
-  margin: 0;
-  display: inline;
-}
-
-/* HORIZONTAL RULE */
-
-hr {
-  height: 1px;
-  color: #777;
-}
-
-div.hr {
-  height: 1px;
-  overflow: hidden;
-  border-bottom: 1px solid #777;
-  margin: 0.8em 0;
-}
-
-
-/* GENERAL-PURPOSE CLASSES */
-
-.hidden {
-  display: none !important;
-}
-
-.inline {
-  display: inline !important;
-  float: none !important;
-}
-
-.floatright {
-  display: inline;
-  float: right !important;
-}
-
-.floatleft {
-  display: inline;
-  float: left !important;
-}
-
-.clear {
-  clear: both !important;
-  display: block;
-}
-
-.clearleft {
-  clear: left !important;
-  display: block;
-}
-
-.clearright {
-  clear: right !important;
-  display: block;
-}
-
-.left {
-  text-align: left !important;
-}
-
-.right {
-  text-align: right !important;
-}
-
-.center {
-  text-align: center !important;
-}
-
-.nowrap {
-  white-space: nowrap !important;
-}
-
-.uppercase {
-  text-transform: uppercase !important;
-}
-
-.lowercase {
-  text-transform: lowercase !important;
-}
-
-.nocase {
-  text-transform: default !important;
-}
-
-.bold {
-  font-weight: 700 !important;
-}
-
-.normal {
-  font-weight: 400 !important;
-}
-
-.small {
-  font-size: 86% !important;
-}
-
-@media print {
-  .hidden-print {
-    display: none !important;
-  }
-  .nopagebreak {
-    page-break-inside: avoid !important;
-  }
-}
-
-@media screen {
-  .hidden-screen {
-    display: none !important;
-  }
-}
-
-
-/* HORIZONTAL + VERTICAL CENTERING */
-
-.center1 {
-  text-align: center;
-}
-
-.center2 {
-  #left: 50%;
-}
-
-.center3 {
-  margin: 0 auto;
-  #left: -50%;
-}
-
-.center1, .vcenter1 {
-  display: table;
-  #display: block;
-  #text-align: auto;
-  #position: relative;
-}
-
-.center2, .vcenter2 {
-  display: table-cell;
-  vertical-align: middle;
-  #position: absolute;
-  #top: 50%;
-}
-
-.center3, .vcenter3 {
-  display: block;
-  #position: relative;
-  #top: -50%;
-}
-
-/*
-.center1, .vcenter1 { border: 1px solid #f00 !important; }
-.center2, .vcenter2 { border: 1px solid #0f0 !important; }
-.center3, .vcenter3 { border: 1px solid #00f !important; }
-*/
-
-
-/* CSS BG IMAGE REPLACEMENT */
-
-.bgfx, .bgfx1, .bgfx2 {
-  display: block;
-  width: 300px;
-  height: 50px;
-  padding: 0 !important;
-}
-
-a.bgfx, a.bgfx1, a.bgfx2,
-a.bgfx:hover, a.bgfx1:hover, a.bgfx2:hover {
-  text-decoration: none;
-  cursor: pointer;
-  cursor: hand;
-}
-
-.bgfx {
-  position: relative;
-  overflow: hidden;
-  background: no-repeat 0 0;
-}
-
-.bgfx1, .bgfx2 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  background: no-repeat 0 0;
-}
-
-
-/* "HIT" LINKS */
-
-.hit, .hit .hit1 {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: hand;
-  cursor: pointer;
-  _width: 100%;
-  _height: 100%;
-}
-
-.hit {
-  z-index: 1000;
-}
-
-.hit .hit1 {
-  #background: #fff;
-  #filter: alpha(opacity=1);
-}
-
-
-/* EXAMPLE CSS */
-
-/* http://colorschemedesigner.com/#3s40M--K-BRJD */
-
-.primary-1 { background-color: #008CD0 }
-.primary-2 { background-color: #2C7091 }
-.primary-3 { background-color: #005178 }
-.primary-4 { background-color: #58C0F2 }
-.primary-5 { background-color: #9FD7F2 }
-
-.secondary-a-1 { background-color: #0BE700 }
-.secondary-a-2 { background-color: #36A131 }
-.secondary-a-3 { background-color: #078500 }
-.secondary-a-4 { background-color: #62F85A }
-.secondary-a-5 { background-color: #A7F8A3 }
-
-.secondary-b-1 { background-color: #FE0006 }
-.secondary-b-2 { background-color: #B13639 }
-.secondary-b-3 { background-color: #920004 }
-.secondary-b-4 { background-color: #FF5D61 }
-.secondary-b-5 { background-color: #FFA7A9 }
-
-.complement-1 { background-color: #FF8900 }
-.complement-2 { background-color: #B27836 }
-.complement-3 { background-color: #934F00 }
-.complement-4 { background-color: #FFB45D }
-.complement-5 { background-color: #FFD6A7 }
-
-/*
-bg: #FDEBDC
-bg1: #FFBE7D
-bg2: #FFAB59
-orange: #FF7F00
-brown: #913D00
-lt. brown: #C4884F
-*/
-
-html, body {
-  color: #000;
-  background: #fff;
-  font-family: Arial;
-}
-
-body {
-  font-size: 0.8em;
-  margin: 1em;
-}
-
-h1, h2 {
-  font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif;
-}
-
-h1 {
-  font-size: 140%;
-  font-weight: 400;
-  text-transform: uppercase;
-  color: #FF7F00;
-  margin: 0 0 0.6em;
-}
-
-h1 a {
-  color: #FF7F00;
-}
-
-h1 a:hover {
-  color: #913D00;
-}
-
-h1 .title {
-  color: #913D00;
-}
-
-h1 a.title:hover {
-  color: #FF7F00;
-}
-
-h2 {
-  font-size: 120%;
-  color: #913D00;
-}
-
-h3 {
-  font-size: 100%;
-}
-
-a {
-  color: #913D00;
-}
-
-a:hover {
-  color: #FF7F00;
-}
-
-.divider {
-  color: #C4884F;
-}
-
-#page {
-  width: 700px;
-}
-
-#header h1 {
-  white-space: nowrap;
-}
-
-#footer {
-  clear: both;
-  padding-top: 2em;
-  font-size: 80%;
-  color: #C4884F;
-}
-
-#footer a {
-  color: #C4884F;
-}
-
-#footer a:hover {
-  color: #FF7F00;
-}
-
-#donate {
-  color: #000;
-  background: #fff;
-  border: 1px solid #3D942F;
-  font-size: 80%;
-  padding: 0.5em;
-  float: right;
-  width: 11em;
-  margin: 0 0 1.5em 2em;
-  -moz-box-shadow: 0 0 6px #3D942F;
-  -webkit-box-shadow: 0 0 6px #3D942F;
-  box-shadow: 0 0 6px #3D942F;
-}
-
-#donate form {
-  text-align: center;
-}
-
-#donate .submit {
-  width: 74px;
-  height: 21px;
-}
-
-pre {
-  overflow-x: auto;
-}
-
-pre code {
-  display: block;
-  border: 1px solid transparent;
-  _border: none;
-}
-
-/* ROUNDED BORDERS */
-
-#donate,
-pre,
-.syntaxhighlighter,
-.syntaxhighlighter .toolbar {
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-}
-
-/* PRE/CODE BLOCKS, SYNTAX HIGHLIGHTING */
-
-code, pre {
-  font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
-}
-
-a code {
-  color: inherit;
-}
-
-code {
-  color: #913D00;
-  font-size: 12px;
-  font-weight: inherit;
-}
-
-pre {
-  margin: 0 0 0.6em;
-  padding: 0 0.6em;
-  border: 1px solid #C4884F;
-  background: #fee0c5;
-  color: #000;
-}
-
-pre code {
-  color: #000;
-}
-
-pre,
-.syntaxhighlighter, 
-.syntaxhighlighter div, 
-.syntaxhighlighter code, 
-.syntaxhighlighter span {
-  font-size: 11px !important;
-  line-height: 1.5em !important;
-}
-
-pre,
-.syntaxhighlighter,
-.syntaxhighlighter .line:first-child .content {
-  min-height: 2.99em;
-}
-
-.syntaxhighlighter .line:not(:last-child) .content {
-  min-height: 0;
-}
-
-.syntaxhighlighter .content {
-  min-height: 0\9 !important; /* IE6, IE7, IE8 */
-}
-
-.syntaxhighlighter, 
-.syntaxhighlighter code,
-.syntaxhighlighter a {
-  word-wrap: break-word !important;
-}
-
-.syntaxhighlighter .line .content .block {
-  background-position: 0 1.5em !important;
-}
-
-.syntaxhighlighter {
-  width: auto !important;
-  margin: 0 0 0.6em !important;
-  padding: 0 1px !important;
-  background: #fee0c5 !important;
-  border: 1px solid #C4884F !important;
-  _zoom: 1;
-}
-
-.syntaxhighlighter .toolbar {
-  right: 3px !important;
-  top: 3px !important;
-}
-
-.syntaxhighlighter .line .number {
-  color: #C4884F !important;
-}
-
-.syntaxhighlighter .lines .content {
-  border-color: #C4884F !important;
-}
-
-.syntaxhighlighter .lines .line:first-child,
-.syntaxhighlighter .lines .line:first-child .content {
-  -moz-border-radius-topright: 10px;
-  -webkit-border-top-right-radius: 10px;
-}
-
-.syntaxhighlighter .lines .line:last-child,
-.syntaxhighlighter .lines .line:last-child .content {
-  -moz-border-radius-bottomright: 10px;
-  -webkit-border-bottom-right-radius: 10px;
-}
-
-.syntaxhighlighter.nogutter .lines .line:first-child,
-.syntaxhighlighter.nogutter .lines .line:first-child .content {
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-}
-
-.syntaxhighlighter.nogutter .lines .line:last-child,
-.syntaxhighlighter.nogutter .lines .line:last-child .content {
-  -moz-border-radius-bottomleft: 10px;
-  -webkit-border-bottom-left-radius: 10px;
-}
+/* YUI RESETS */
+
+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 2.5.2
+*/
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
+
+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 2.5.2
+*/
+body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
+
+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 2.5.2
+*/
+h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;} em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}
+
+/* MISC RESETS */
+
+em, i {
+  font-weight: inherit;
+}
+
+ul, ol {
+  margin-right: 0;
+}
+
+pre {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+  _white-space: pre;
+}
+
+/* LISTS */
+
+div.nav ul, ul.nav {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+div.nav li, ul.nav li {
+  list-style: none !important;
+  background: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+div.nav-inline ul, ul.nav-inline {
+  width: auto !important;
+}
+
+div.nav-inline li, ul.nav-inline li {
+  display: inline !important;
+}
+
+dl.inline {
+  margin-left: 0;
+}
+
+dl.inline dt,
+dl.inline dd {
+  margin: 0;
+  display: inline;
+}
+
+/* HORIZONTAL RULE */
+
+hr {
+  height: 1px;
+  color: #777;
+}
+
+div.hr {
+  height: 1px;
+  overflow: hidden;
+  border-bottom: 1px solid #777;
+  margin: 0.8em 0;
+}
+
+
+/* GENERAL-PURPOSE CLASSES */
+
+.hidden {
+  display: none !important;
+}
+
+.inline {
+  display: inline !important;
+  float: none !important;
+}
+
+.floatright {
+  display: inline;
+  float: right !important;
+}
+
+.floatleft {
+  display: inline;
+  float: left !important;
+}
+
+.clear {
+  clear: both !important;
+  display: block;
+}
+
+.clearleft {
+  clear: left !important;
+  display: block;
+}
+
+.clearright {
+  clear: right !important;
+  display: block;
+}
+
+.left {
+  text-align: left !important;
+}
+
+.right {
+  text-align: right !important;
+}
+
+.center {
+  text-align: center !important;
+}
+
+.nowrap {
+  white-space: nowrap !important;
+}
+
+.uppercase {
+  text-transform: uppercase !important;
+}
+
+.lowercase {
+  text-transform: lowercase !important;
+}
+
+.nocase {
+  text-transform: default !important;
+}
+
+.bold {
+  font-weight: 700 !important;
+}
+
+.normal {
+  font-weight: 400 !important;
+}
+
+.small {
+  font-size: 86% !important;
+}
+
+@media print {
+  .hidden-print {
+    display: none !important;
+  }
+  .nopagebreak {
+    page-break-inside: avoid !important;
+  }
+}
+
+@media screen {
+  .hidden-screen {
+    display: none !important;
+  }
+}
+
+
+/* HORIZONTAL + VERTICAL CENTERING */
+
+.center1 {
+  text-align: center;
+}
+
+.center2 {
+  #left: 50%;
+}
+
+.center3 {
+  margin: 0 auto;
+  #left: -50%;
+}
+
+.center1, .vcenter1 {
+  display: table;
+  #display: block;
+  #text-align: auto;
+  #position: relative;
+}
+
+.center2, .vcenter2 {
+  display: table-cell;
+  vertical-align: middle;
+  #position: absolute;
+  #top: 50%;
+}
+
+.center3, .vcenter3 {
+  display: block;
+  #position: relative;
+  #top: -50%;
+}
+
+/*
+.center1, .vcenter1 { border: 1px solid #f00 !important; }
+.center2, .vcenter2 { border: 1px solid #0f0 !important; }
+.center3, .vcenter3 { border: 1px solid #00f !important; }
+*/
+
+
+/* CSS BG IMAGE REPLACEMENT */
+
+.bgfx, .bgfx1, .bgfx2 {
+  display: block;
+  width: 300px;
+  height: 50px;
+  padding: 0 !important;
+}
+
+a.bgfx, a.bgfx1, a.bgfx2,
+a.bgfx:hover, a.bgfx1:hover, a.bgfx2:hover {
+  text-decoration: none;
+  cursor: pointer;
+  cursor: hand;
+}
+
+.bgfx {
+  position: relative;
+  overflow: hidden;
+  background: no-repeat 0 0;
+}
+
+.bgfx1, .bgfx2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  background: no-repeat 0 0;
+}
+
+
+/* "HIT" LINKS */
+
+.hit, .hit .hit1 {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: hand;
+  cursor: pointer;
+  _width: 100%;
+  _height: 100%;
+}
+
+.hit {
+  z-index: 1000;
+}
+
+.hit .hit1 {
+  #background: #fff;
+  #filter: alpha(opacity=1);
+}
+
+
+/* EXAMPLE CSS */
+
+/* http://colorschemedesigner.com/#3s40M--K-BRJD */
+
+.primary-1 { background-color: #008CD0 }
+.primary-2 { background-color: #2C7091 }
+.primary-3 { background-color: #005178 }
+.primary-4 { background-color: #58C0F2 }
+.primary-5 { background-color: #9FD7F2 }
+
+.secondary-a-1 { background-color: #0BE700 }
+.secondary-a-2 { background-color: #36A131 }
+.secondary-a-3 { background-color: #078500 }
+.secondary-a-4 { background-color: #62F85A }
+.secondary-a-5 { background-color: #A7F8A3 }
+
+.secondary-b-1 { background-color: #FE0006 }
+.secondary-b-2 { background-color: #B13639 }
+.secondary-b-3 { background-color: #920004 }
+.secondary-b-4 { background-color: #FF5D61 }
+.secondary-b-5 { background-color: #FFA7A9 }
+
+.complement-1 { background-color: #FF8900 }
+.complement-2 { background-color: #B27836 }
+.complement-3 { background-color: #934F00 }
+.complement-4 { background-color: #FFB45D }
+.complement-5 { background-color: #FFD6A7 }
+
+/*
+bg: #FDEBDC
+bg1: #FFBE7D
+bg2: #FFAB59
+orange: #FF7F00
+brown: #913D00
+lt. brown: #C4884F
+*/
+
+html, body {
+  color: #000;
+  background: #fff;
+  font-family: Arial;
+}
+
+body {
+  font-size: 0.8em;
+  margin: 1em;
+}
+
+h1, h2 {
+  font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  font-size: 140%;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #FF7F00;
+  margin: 0 0 0.6em;
+}
+
+h1 a {
+  color: #FF7F00;
+}
+
+h1 a:hover {
+  color: #913D00;
+}
+
+h1 .title {
+  color: #913D00;
+}
+
+h1 a.title:hover {
+  color: #FF7F00;
+}
+
+h2 {
+  font-size: 120%;
+  color: #913D00;
+}
+
+h3 {
+  font-size: 100%;
+}
+
+a {
+  color: #913D00;
+}
+
+a:hover {
+  color: #FF7F00;
+}
+
+.divider {
+  color: #C4884F;
+}
+
+#page {
+  width: 700px;
+}
+
+#header h1 {
+  white-space: nowrap;
+}
+
+#footer {
+  clear: both;
+  padding-top: 2em;
+  font-size: 80%;
+  color: #C4884F;
+}
+
+#footer a {
+  color: #C4884F;
+}
+
+#footer a:hover {
+  color: #FF7F00;
+}
+
+#donate {
+  color: #000;
+  background: #fff;
+  border: 1px solid #3D942F;
+  font-size: 80%;
+  padding: 0.5em;
+  float: right;
+  width: 11em;
+  margin: 0 0 1.5em 2em;
+  -moz-box-shadow: 0 0 6px #3D942F;
+  -webkit-box-shadow: 0 0 6px #3D942F;
+  box-shadow: 0 0 6px #3D942F;
+}
+
+#donate form {
+  text-align: center;
+}
+
+#donate .submit {
+  width: 74px;
+  height: 21px;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+pre code {
+  display: block;
+  border: 1px solid transparent;
+  _border: none;
+}
+
+/* ROUNDED BORDERS */
+
+#donate,
+pre,
+.syntaxhighlighter,
+.syntaxhighlighter .toolbar {
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+/* PRE/CODE BLOCKS, SYNTAX HIGHLIGHTING */
+
+code, pre {
+  font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
+}
+
+a code {
+  color: inherit;
+}
+
+code {
+  color: #913D00;
+  font-size: 12px;
+  font-weight: inherit;
+}
+
+pre {
+  margin: 0 0 0.6em;
+  padding: 0 0.6em;
+  border: 1px solid #C4884F;
+  background: #fee0c5;
+  color: #000;
+}
+
+pre code {
+  color: #000;
+}
+
+pre,
+.syntaxhighlighter, 
+.syntaxhighlighter div, 
+.syntaxhighlighter code, 
+.syntaxhighlighter span {
+  font-size: 11px !important;
+  line-height: 1.5em !important;
+}
+
+pre,
+.syntaxhighlighter,
+.syntaxhighlighter .line:first-child .content {
+  min-height: 2.99em;
+}
+
+.syntaxhighlighter .line:not(:last-child) .content {
+  min-height: 0;
+}
+
+.syntaxhighlighter .content {
+  min-height: 0\9 !important; /* IE6, IE7, IE8 */
+}
+
+.syntaxhighlighter, 
+.syntaxhighlighter code,
+.syntaxhighlighter a {
+  word-wrap: break-word !important;
+}
+
+.syntaxhighlighter .line .content .block {
+  background-position: 0 1.5em !important;
+}
+
+.syntaxhighlighter {
+  width: auto !important;
+  margin: 0 0 0.6em !important;
+  padding: 0 1px !important;
+  background: #fee0c5 !important;
+  border: 1px solid #C4884F !important;
+  _zoom: 1;
+}
+
+.syntaxhighlighter .toolbar {
+  right: 3px !important;
+  top: 3px !important;
+}
+
+.syntaxhighlighter .line .number {
+  color: #C4884F !important;
+}
+
+.syntaxhighlighter .lines .content {
+  border-color: #C4884F !important;
+}
+
+.syntaxhighlighter .lines .line:first-child,
+.syntaxhighlighter .lines .line:first-child .content {
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-right-radius: 10px;
+}
+
+.syntaxhighlighter .lines .line:last-child,
+.syntaxhighlighter .lines .line:last-child .content {
+  -moz-border-radius-bottomright: 10px;
+  -webkit-border-bottom-right-radius: 10px;
+}
+
+.syntaxhighlighter.nogutter .lines .line:first-child,
+.syntaxhighlighter.nogutter .lines .line:first-child .content {
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
+}
+
+.syntaxhighlighter.nogutter .lines .line:last-child,
+.syntaxhighlighter.nogutter .lines .line:last-child .content {
+  -moz-border-radius-bottomleft: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+}
diff --git a/examples/index.php b/examples/index.php
index 8986ec1..5507279 100644
--- a/examples/index.php
+++ b/examples/index.php
@@ -1,128 +1,191 @@
-
-    
-
-
-
-  
-  
-    <? if ( $shell['title'] ) { print $shell['title']; } else { ?>
-    Ben Alman » <?= $shell['title1'] ?><? if ( $shell['title2'] ) { print ' » ' . $shell['title2']; } ?><? if ( $shell['title3'] ) { print ' » ' . $shell['title3']; } ?>
-    <? } ?>
-  
-  
-  
-  
-  
-  
-  
-
-
-
-
-
-

-  
-  

-    
-  

-  
-

-
-
-$title
";
-    }
-  }
-  
-  $base = '';
-  draw_shell();
-}
-
-?>
+
+    
+
+  
+  
+  
+    
+    
+      <?php  
+        /* 
+          Changed this handling to an array
+
+          ex: 
+
+          // initial assignment/declaration that would be in config.php
+          $shell['titles'] = array('jQuery BBQ');
+
+          // then, later in the application as your adding information...
+          array_push($shell['titles'], 'a second title string');
+          array_push($shell['titles'], 'a third title string');
+
+          // then here, where it's printed, you can do this:
+
+          echo implode(' » ', $shell['titles']);
+
+        */          
+
+        if ( isset($shell['title']) AND !empty($shell['title']) ) {
+
+          echo $shell['title'];
+        } else {
+          echo implode(' » ', $shell['titles']);
+        }
+
+      ?>
+    
+    
+    
+      
+      
+    
+    
+        
+        
+    
+    
+    
+
+  
+
+  
+  
+
+  

+    
+    

+      
+    

+    
+  

+
+  
+  
+  ' . 
+                             ( ( $title == $file_contents ) ? $file : stripcslashes( $title ) ) . 
+                             '
';
+    }
+  }
+  
+  $base = '';
+  draw_shell();
+}
+
+?>

From 173ccf36cb5cb895afee7612693afa533db2a2c6 Mon Sep 17 00:00:00 2001
From: rwldrn 
Date: Fri, 3 Sep 2010 12:11:06 -0400
Subject: [PATCH 2/2] Fixed: examples/fragment-ajax-crawlable/index.php Fatal
 on line 22

---
 examples/fragment-ajax-crawlable/index.php | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/fragment-ajax-crawlable/index.php b/examples/fragment-ajax-crawlable/index.php
index 2db76dc..48a71c0 100644
--- a/examples/fragment-ajax-crawlable/index.php
+++ b/examples/fragment-ajax-crawlable/index.php
@@ -16,7 +16,10 @@
 
 // Initialize the XMLpage, fetching the appropriate page's data.
 $page = new XMLpage(array( 
-            a
+                        'id' => $_REQUEST['_escaped_fragment_'] 
+                      )
+                    );
+
 // This is a special case for the 404 error page. Only if it is defined in the
 // XML and a page isn't found will a 404 header be set.
 if ( isset($page->attr['status']) && $page->attr['status'] == '404' ) {