Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 40290853916c6ab520fa2bd3e034c7e851dcd239 0 parents
@wycats wycats authored
Showing with 13,356 additions and 0 deletions.
  1. +1 −0  .gitignore
  2. +1 −0  Rakefile
  3. +105 −0 Rules
  4. +59 −0 config.yaml
  5. +33 −0 content/ajax/ajax-and-forms.md
  6. +22 −0 content/ajax/ajax-events.md
  7. +60 −0 content/ajax/ajax-excercises.md
  8. +31 −0 content/ajax/ajax-overview.md
  9. +264 −0 content/ajax/jquery-ajax-methods.md
  10. +115 −0 content/ajax/key-concepts.md
  11. +46 −0 content/ajax/working-with-jsonp.md
  12. +1,991 −0 content/assets/css/style.css
  13. +7 −0 content/assets/css/stylesheet.css
  14. +558 −0 content/assets/css/syntax.css
  15. BIN  content/assets/i/bg-body-jquery-project.jpg
  16. BIN  content/assets/i/bg-body-jquery.jpg
  17. BIN  content/assets/i/bg-body-mobile.jpg
  18. BIN  content/assets/i/bg-body-sizzle.jpg
  19. BIN  content/assets/i/bg-body-ui.jpg
  20. BIN  content/assets/i/bg-footer-noise.jpg
  21. BIN  content/assets/i/bg-footer.png
  22. BIN  content/assets/i/bg-title-shadow.png
  23. BIN  content/assets/i/bg-tooltip.png
  24. BIN  content/assets/i/bg-top.jpg
  25. BIN  content/assets/i/cdn-download.png
  26. BIN  content/assets/i/external.png
  27. BIN  content/assets/i/favicon.ico
  28. BIN  content/assets/i/footer-comp.png
  29. BIN  content/assets/i/footer-icons-large.png
  30. BIN  content/assets/i/footer-icons.png
  31. BIN  content/assets/i/icon-arrow.png
  32. BIN  content/assets/i/icon-rss.png
  33. BIN  content/assets/i/icons.png
  34. BIN  content/assets/i/icons/book.png
  35. BIN  content/assets/i/jq-global-nav.png
  36. BIN  content/assets/i/jq-global-noise-only.png
  37. BIN  content/assets/i/jq-nav-icons.png
  38. BIN  content/assets/i/logo-jquery.png
  39. BIN  content/assets/i/logo-mobile.png
  40. BIN  content/assets/i/logo-project.png
  41. BIN  content/assets/i/logo-top-jquery.png
  42. BIN  content/assets/i/logo-top-mobile.png
  43. BIN  content/assets/i/logo-top-qunit.png
  44. BIN  content/assets/i/logo-top-sizzle.png
  45. BIN  content/assets/i/logo-top-ui.png
  46. BIN  content/assets/i/logo-ui.png
  47. BIN  content/assets/i/logos-sponsors.png
  48. +16 −0 content/assets/js/jquery-1.5.min.js
  49. +28 −0 content/assets/js/modernizr-1.5.min.js
  50. +11 −0 content/assets/js/plugins.js
  51. +57 −0 content/assets/js/plugins/app.base.js
  52. +9 −0 content/assets/js/plugins/ba-dotimeout.min.js
  53. +9 −0 content/assets/js/plugins/ba-outside-events.min.js
  54. +22 −0 content/assets/js/plugins/infieldlabel.min.js
  55. +61 −0 content/assets/js/plugins/syntaxhighlighter.min.js
  56. +10 −0 content/assets/js/plugins/tmpl.min.js
  57. +7 −0 content/assets/js/respond.min.js
  58. +132 −0 content/assets/js/scripts.js
  59. +50 −0 content/assets/js/scripts/jquery.project-tool-tip.js
  60. +5 −0 content/assets/js/selectivizr.js
  61. +619 −0 content/code-organization/ch10-code-organization.html
  62. +308 −0 content/code-organization/concepts.md
  63. +501 −0 content/custom-events/ch11-custom-events.html
  64. +380 −0 content/custom-events/introduction.md
  65. +119 −0 content/effects/built-in-effects.md
  66. +58 −0 content/effects/custom-effects.md
  67. +53 −0 content/effects/effects-exercises.md
  68. +15 −0 content/effects/effects-overview.md
  69. +28 −0 content/effects/managing-effects.md
  70. +55 −0 content/effects/queue_and_dequeue_explained.md
  71. +180 −0 content/effects/uses_of_queue_and_dequeue.md
  72. +62 −0 content/events/event-delegation.md
  73. +54 −0 content/events/event-exercises.md
  74. +51 −0 content/events/event-helpers.md
  75. +23 −0 content/events/events-overview.md
  76. +123 −0 content/events/events-to-elements.md
  77. +63 −0 content/events/inside-event-handling-function.md
  78. +31 −0 content/events/triggering-event-handlers.md
  79. +162 −0 content/events/using_delegate_and_undelegate.md
  80. +152 −0 content/events/working_with_events_part_1.md
  81. +249 −0 content/events/working_with_events_part_2.md
  82. +235 −0 content/getting-started/ch01-welcome.html
  83. +150 −0 content/getting-started/downloading-jquery.md
  84. +178 −0 content/getting-started/how-jquery-works.md
  85. +181 −0 content/how-to/add_keyboard_navigation.md
  86. +94 −0 content/how-to/enable_the_back_button.md
  87. +11 −0 content/index.html
  88. +54 −0 content/javascript-101/arrays.md
  89. +1,493 −0 content/javascript-101/ch02-javascript-basics.html
  90. +141 −0 content/javascript-101/closures.md
  91. +141 −0 content/javascript-101/conditional-code.md
  92. +114 −0 content/javascript-101/functions.md
  93. +153 −0 content/javascript-101/loops.md
  94. +43 −0 content/javascript-101/objects.md
  95. +138 −0 content/javascript-101/operators.md
  96. +64 −0 content/javascript-101/reserved-words.md
  97. +101 −0 content/javascript-101/scope.md
  98. +34 −0 content/javascript-101/syntax-basics.md
  99. +52 −0 content/javascript-101/testing-type.md
  100. +126 −0 content/javascript-101/this-keyword.md
  101. +28 −0 content/jquery-basics/attributes.md
  102. +71 −0 content/jquery-basics/css-styling-dimensions.md
  103. +41 −0 content/jquery-basics/document-ready.md
  104. +54 −0 content/jquery-basics/exercises.md
  105. +235 −0 content/jquery-basics/manipulating-elements.md
  106. +241 −0 content/jquery-basics/selecting-elements.md
  107. +77 −0 content/jquery-basics/traversing.md
  108. +76 −0 content/jquery-basics/working-with-selections.md
  109. +34 −0 content/performance/append-outside-loop.md
  110. +42 −0 content/performance/beware-anonymous-functions.md
  111. +16 −0 content/performance/cache-loop-length.md
  112. +16 −0 content/performance/clever-conditionals.md
  113. +18 −0 content/performance/detach-elements-before-work-with-them.md
  114. +33 −0 content/performance/dont-act-on-absent-elements.md
  115. +30 −0 content/performance/dont-repeat-yourself.md
  116. +28 −0 content/performance/event-delegation.md
  117. +60 −0 content/performance/optimize-selectors.md
  118. +10 −0 content/performance/read-the-source.md
  119. +15 −0 content/performance/use-stylesheets-for-changing-css.md
  120. +23 −0 content/performance/variable-definition.md
  121. +283 −0 content/plugins/a_plugin_development_pattern.md
  122. +143 −0 content/plugins/basic-plugin-creation.md
  123. +34 −0 content/plugins/finding-evaluating-plugins.md
  124. +212 −0 content/plugins/making_a_jquery_plugin_truly_customizable.md
  125. +355 −0 content/plugins/stateful-plugins-with-widget-factory.md
  126. +21 −0 content/plugins/whats-a-plugin.md
  127. +91 −0 content/plugins/writing-plugins.md
  128. +42 −0 content/using-jquery-core/avoid-conflicts-other-libraries.md
  129. +29 −0 content/using-jquery-core/checking-types.md
  130. +40 −0 content/using-jquery-core/data-methods.md
  131. +35 −0 content/using-jquery-core/dollar-object-vs-function.md
  132. +25 −0 content/using-jquery-core/feature-browser-detection.md
  133. +110 −0 content/using-jquery-core/utility-methods.md
  134. +287 −0 layouts/default.html
  135. +2 −0  lib/default.rb
1  .gitignore
@@ -0,0 +1 @@
+output/
1  Rakefile
@@ -0,0 +1 @@
+require 'nanoc3/tasks'
105 Rules
@@ -0,0 +1,105 @@
+#!/usr/bin/env ruby
+
+# A few helpful tips about the Rules file:
+#
+# * The order of rules is important: for each item, only the first matching
+# rule is applied.
+#
+# * Item identifiers start and end with a slash (e.g. “/about/” for the file
+# “content/about.html”). To select all children, grandchildren, … of an
+# item, use the pattern “/about/*/”; “/about/*” will also select the parent,
+# because “*” matches zero or more characters.
+
+require "cgi"
+
+class Nanoc3::Filter
+ class CodeBlocks < Nanoc3::Filter
+ LANGUAGES = { "ruby" => "ruby", "sql" => "sql", "javascript" => "javascript",
+ "css" => "css", "plain" => "plain", "erb" => "ruby; html-script: true",
+ "html" => "xml", "xml" => "xml", "shell" => "plain", "yaml" => "yaml" }
+
+ def run(content, params={})
+ @string = content.dup
+
+ @output = ""
+ @pending = ""
+
+ languages = LANGUAGES.keys.join("|")
+
+ until @string.empty?
+ match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?>|\z)/m
+
+ @pending << match.pre_match
+
+ if match[2] # +foo+
+ @pending << "<notextile><tt>#{CGI.escapeHTML(match[2])}</tt></notextile>" if match[2]
+ elsif match[3] # <language>
+ flush
+ generate_brushes match[3], LANGUAGES[match[3]], match[4]
+ end
+ end
+
+ flush
+
+ @output
+ end
+
+ def scan_until(regex)
+ match = @string.match(regex)
+ return unless match
+ @string = match.post_match
+ match
+ end
+
+ def generate_brushes(tag, replace, filename)
+ match = scan_until %r{</#{tag}>}
+ @output << %{<div class="code_container">\n}
+ @output << %{<div class="filename">#{filename}</div>\n} if filename
+ @output << %{<pre class="brush: #{replace}; gutter: false; toolbar: false">\n} <<
+ CGI.escapeHTML(match.pre_match) << %{</pre></div>}
+ end
+
+ def flush
+ @output << @pending
+ @pending = ""
+ end
+ end
+end
+
+Nanoc3::Filter.register 'CodeBlocks', :code_blocks
+
+
+
+compile '/assets/*' do
+ # don’t filter or layout
+end
+
+compile '/images/*' do
+end
+
+filters = {
+ :markdown => :kramdown,
+ :md => :kramdown,
+ :html => :erb
+}
+
+compile '*' do
+ filter :code_blocks
+ filter filters[item[:extension].to_sym] || item[:extension].to_sym
+ layout 'default'
+end
+
+route '*' do
+ p [item.identifier, item[:extension], item.binary?]
+ if item.binary? || item[:extension] == 'css' || item[:extension] =~ /\.js$/
+ # /foo/ -> /foo.ext
+ p item.identifier.chop + '.' + item[:extension]
+ item.identifier.chop + '.' + item[:extension]
+ else
+ # /foo/ -> /foo/index.html
+ item.identifier + 'index.html'
+ end
+end
+
+layout '*', :erb
+
59 config.yaml
@@ -0,0 +1,59 @@
+# A list of file extensions that nanoc will consider to be textual rather than
+# binary. If an item with an extension not in this list is found, the file
+# will be considered as binary.
+text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt', 'xhtml', 'xml' ]
+
+# The path to the directory where all generated files will be written to. This
+# can be an absolute path starting with a slash, but it can also be path
+# relative to the site directory.
+output_dir: output
+
+# A list of index filenames, i.e. names of files that will be served by a web
+# server when a directory is requested. Usually, index files are named
+# “index.hml”, but depending on the web server, this may be something else,
+# such as “default.htm”. This list is used by nanoc to generate pretty URLs.
+index_filenames: [ 'index.html' ]
+
+# Whether or not to generate a diff of the compiled content when compiling a
+# site. The diff will contain the differences between the compiled content
+# before and after the last site compilation.
+enable_output_diff: false
+
+# The data sources where nanoc loads its data from. This is an array of
+# hashes; each array element represents a single data source. By default,
+# there is only a single data source that reads data from the “content/” and
+# “layout/” directories in the site directory.
+data_sources:
+ -
+ # The type is the identifier of the data source. By default, this will be
+ # `filesystem_unified`.
+ type: filesystem_unified
+
+ # The path where items should be mounted (comparable to mount points in
+ # Unix-like systems). This is “/” by default, meaning that items will have
+ # “/” prefixed to their identifiers. If the items root were “/en/”
+ # instead, an item at content/about.html would have an identifier of
+ # “/en/about/” instead of just “/about/”.
+ items_root: /
+
+ # The path where layouts should be mounted. The layouts root behaves the
+ # same as the items root, but applies to layouts rather than items.
+ layouts_root: /
+
+# Configuration for the “watch” command, which watches a site for changes and
+# recompiles if necessary.
+watcher:
+ # A list of directories to watch for changes. When editing this, make sure
+ # that the “output/” and “tmp/” directories are _not_ included in this list,
+ # because recompiling the site will cause these directories to change, which
+ # will cause the site to be recompiled, which will cause these directories
+ # to change, which will cause the site to be recompiled again, and so on.
+ dirs_to_watch: [ 'content', 'layouts', 'lib' ]
+
+ # A list of single files to watch for changes. As mentioned above, don’t put
+ # any files from the “output/” or “tmp/” directories in here.
+ files_to_watch: [ 'config.yaml', 'Rules' ]
+
+ # When to send notifications (using Growl or notify-send).
+ notify_on_compilation_success: true
+ notify_on_compilation_failure: true
33 content/ajax/ajax-and-forms.md
@@ -0,0 +1,33 @@
+---
+chapter : ajax
+section : 4
+title : Ajax and Forms
+attribution: jQuery Fundamentals
+---
+## Ajax and Forms
+
+jQuery’s ajax capabilities can be especially useful when dealing with forms.
+The [jQuery Form Plugin](http://jquery.malsup.com/form/) is a well-tested tool
+for adding Ajax capabilities to forms, and you should generally use it for
+handling forms with Ajax rather than trying to roll your own solution for
+anything remotely complex. That said, there are a two jQuery methods you
+should know that relate to form processing in jQuery: `$.fn.serialize` and
+`$.fn.serializeArray`.
+
+<div class="example" markdown="1">
+Turning form data into a query string
+
+ $('#myForm').serialize();
+</div>
+
+<div class="example" markdown="1">
+Creating an array of objects containing form data
+
+ $('#myForm').serializeArray();
+
+ // creates a structure like this:
+ [
+ { name : 'field1', value : 123 },
+ { name : 'field2', value : 'hello world' }
+ ]
+</div>
22 content/ajax/ajax-events.md
@@ -0,0 +1,22 @@
+---
+chapter : ajax
+section : 6
+title : Ajax Events
+attribution: jQuery Fundamentals
+---
+## Ajax Events
+
+Often, you’ll want to perform an operation whenever an Ajax requests starts or
+stops, such as showing or hiding a loading indicator. Rather than defining
+this behavior inside every Ajax request, you can bind Ajax events to elements
+just like you'd bind other events. For a complete list of Ajax events, visit
+[http://docs.jquery.com/Ajax_Events](http://docs.jquery.com/Ajax_Events "Ajax
+Events documentation on docs.jquery.com").
+
+Setting up a loading indicator using Ajax Events
+
+<javascript>
+$('#loading_indicator')
+ .ajaxStart(function() { $(this).show(); })
+ .ajaxStop(function() { $(this).hide(); });
+</javascript>
60 content/ajax/ajax-excercises.md
@@ -0,0 +1,60 @@
+---
+chapter : ajax
+section : 7
+title : Exercises
+attribution: jQuery Fundamentals
+---
+## Exercises
+
+### Load External Content
+
+Open the file `/exercises/index.html` in your browser. Use the file
+`/exercises/js/load.js`. Your task is to load the content of a blog item when
+a user clicks on the title of the item.
+
+1. Create a target div after the headline for each blog post and store a
+ reference to it on the headline element using `$.fn.data`.
+
+2. Bind a click event to the headline that will use the $.fn.load method to
+ load the appropriate content from /exercises/data/blog.html into the target
+ div. Don't forget to prevent the default action of the click event.
+
+Note that each blog headline in index.html includes a link to the post. You'll
+need to leverage the href of that link to get the proper content from
+blog.html. Once you have the href, here's one way to process it into an ID
+that you can use as a selector in `$.fn.load`:
+
+<div class="example" markdown="1">
+ var href = 'blog.html#post1';
+ var tempArray = href.split('#');
+ var id = '#' + tempArray[1];
+</div>
+
+Remember to make liberal use of `console.log` to make sure you're on the right
+path!
+
+### Load Content Using JSON
+
+Open the file `/exercises/index.html` in your browser. Use the file
+`/exercises/js/specials.js`. Your task is to show the user details about the
+special for a given day when the user selects a day from the select dropdown.
+
+1. Append a target div after the form that's inside the #specials element;
+ this will be where you put information about the special once you receive
+ it.
+
+2. Bind to the change event of the select element; when the user changes the
+ selection, send an Ajax request to `/exercises/data/specials.json`.
+
+3. When the request returns a response, use the value the user selected in the
+ select (hint: `$.fn.val`) to look up information about the special in the
+ JSON response.
+
+4. Add some HTML about the special to the target div you created.
+
+5. Finally, because the form is now Ajax-enabled, remove the submit button
+ from the form.
+
+Note that we're loading the JSON every time the user changes their selection.
+How could we change the code so we only make the request once, and then use a
+cached response when the user changes their choice in the select?
31 content/ajax/ajax-overview.md
@@ -0,0 +1,31 @@
+---
+chapter : ajax
+section : 1
+title : Overview
+attribution: jQuery Fundamentals
+---
+## Overview
+
+The XMLHttpRequest method (XHR) allows browsers to communicate with the server
+without requiring a page reload. This method, also known as Ajax (Asynchronous
+JavaScript and XML), allows for web pages that provide rich, interactive
+experiences.
+
+Ajax requests are triggered by JavaScript code; your code sends a request to a
+URL, and when it receives a response, a callback function can be triggered to
+handle the response. Because the request is asynchronous, the rest of your
+code continues to execute while the request is being processed, so it’s
+imperative that a callback be used to handle the response.
+
+jQuery provides Ajax support that abstracts away painful browser differences.
+It offers both a full-featured $.ajax() method, and simple convenience methods
+such as `$.get()`, `$.getScript()`, `$.getJSON()`, `$.post()`, and
+`$().load()`.
+
+Most jQuery applications don’t in fact use XML, despite the name “Ajax”;
+instead, they transport data as plain HTML or JSON (JavaScript Object
+Notation).
+
+In general, Ajax does not work across domains. Exceptions are services that
+provide JSONP (JSON with Padding) support, which allow limited cross-domain
+functionality.
264 content/ajax/jquery-ajax-methods.md
@@ -0,0 +1,264 @@
+---
+chapter : ajax
+section : 3
+title : jQuery's Ajax-Related Methods
+attribution: jQuery Fundamentals
+---
+## jQuery's Ajax-Related Methods
+
+While jQuery does offer many Ajax-related convenience methods, the core
+`$.ajax` method is at the heart of all of them, and understanding it is
+imperative. We'll review it first, and then touch briefly on the convenience
+methods.
+
+I generally use the `$.ajax` method and do not use convenience methods. As
+you'll see, it offers features that the convenience methods do not, and its
+syntax is more easily understandable, in my opinion.
+
+### `$.ajax`
+
+jQuery’s core `$.ajax` method is a powerful and straightforward way of creating
+Ajax requests. It takes a configuration object that contains all the
+instructions jQuery requires to complete the request. The `$.ajax` method is
+particularly valuable because it offers the ability to specify both success and
+failure callbacks. Also, its ability to take a configuration object that can
+be defined separately makes it easier to write reusable code. For complete
+documentation of the configuration options, visit
+[http://api.jquery.com/jQuery.ajax/](http://api.jquery.com/jQuery.ajax/ "$.ajax
+documentation on api.jquery.com").
+
+<div class="example" markdown="1">
+Using the core `$.ajax` method
+
+ $.ajax({
+ // the URL for the request
+ url : 'post.php',
+
+ // the data to send
+ // (will be converted to a query string)
+ data : { id : 123 },
+
+ // whether this is a POST or GET request
+ type : 'GET',
+
+ // the type of data we expect back
+ dataType : 'json',
+
+ // code to run if the request succeeds;
+ // the response is passed to the function
+ success : function(json) {
+ $('&lt;h1/>').text(json.title).appendTo('body');
+ $('&lt;div class="content"/>')
+ .html(json.html).appendTo('body');
+ },
+
+ // code to run if the request fails;
+ // the raw request and status codes are
+ // passed to the function
+ error : function(xhr, status) {
+ alert('Sorry, there was a problem!');
+ },
+
+ // code to run regardless of success or failure
+ complete : function(xhr, status) {
+ alert('The request is complete!');
+ }
+ });
+</div>
+
+<div class="note" markdown="1">
+### Note
+
+A note about the dataType setting: if the server sends back data that is in a
+different format than you specify, your code may fail, and the reason will not
+always be clear, because the HTTP response code will not show an error. When
+working with Ajax requests, make sure your server is sending back the data type
+you're asking for, and verify that the Content-type header is accurate for the
+data type. For example, for JSON data, the Content-type header should be
+`application/json`. </div>
+
+### `$.ajax` Options
+
+There are many, many options for the `$.ajax` method, which is part of its
+power. For a complete list of options, visit
+[http://api.jquery.com/jQuery.ajax/](http://api.jquery.com/jQuery.ajax/ "$.ajax
+documentation on api.jquery.com"); here are several that you will use
+frequently:
+
+#### async
+
+Set to `false` if the request should be sent synchronously. Defaults to `true`.
+Note that if you set this option to `false`, your request will block execution
+of other code until the response is received.
+
+#### cache
+
+Whether to use a cached response if available. Defaults to true for all
+dataTypes except "script" and "jsonp". When set to false, the URL will simply
+have a cachebusting parameter appended to it.
+
+#### complete
+
+A callback function to run when the request is complete, regardless of success
+or failure. The function receives the raw request object and the text status of
+the request.
+
+#### context
+
+The scope in which the callback function(s) should run (i.e. what `this` will
+mean inside the callback function(s)). By default, `this` inside the callback
+function(s) refers to the object originally passed to `$.ajax`.
+
+#### data
+
+The data to be sent to the server. This can either be an object or a query
+string, such as `foo=bar&amp;baz=bim`.
+
+#### dataType
+
+The type of data you expect back from the server. By default, jQuery will look
+at the MIME type of the response if no dataType is specified.
+
+#### error
+
+A callback function to run if the request results in an error. The function
+receives the raw request object and the text status of the request.
+
+#### jsonp
+
+The callback name to send in a query string when making a JSONP request.
+Defaults to "callback".
+
+#### success
+
+A callback function to run if the request succeeds. The function receives the
+response data (converted to a JavaScript object if the dataType was JSON), as
+well as the text status of the request and the raw request object.
+
+#### timeout
+
+The time in milliseconds to wait before considering the request a failure.
+
+#### traditional
+
+Set to true to use the param serialization style in use prior to jQuery 1.4.
+For details, see
+[http://api.jquery.com/jQuery.param/](http://api.jquery.com/jQuery.param/
+"$.param documentation on api.jquery.com").
+
+#### type
+
+The type of the request, "POST" or "GET". Defaults to "GET". Other request
+types, such as "PUT" and "DELETE" can be used, but they may not be supported by
+all browsers.
+
+#### url
+
+The URL for the request.
+
+The `url` option is the only required property of the `$.ajax` configuration
+object; all other properties are optional. This can also be passed as the first
+argument to $.ajax, and the options object as the second argument.
+
+### Convenience Methods
+
+If you don't need the extensive configurability of `$.ajax`, and you don't care
+about handling errors, the Ajax convenience functions provided by jQuery can be
+useful, terse ways to accomplish Ajax requests. These methods are just
+"wrappers" around the core `$.ajax` method, and simply pre-set some of the
+options on the `$.ajax` method.
+
+The convenience methods provided by jQuery are:
+
+#### $.get
+
+Perform a GET request to the provided URL.
+
+#### $.post
+
+Perform a POST request to the provided URL.
+
+#### $.getScript
+
+Add a script to the page.
+
+#### $.getJSON
+
+Perform a GET request, and expect JSON to be returned.
+
+In each case, the methods take the following arguments, in order:
+
+#### url
+
+The URL for the request. Required.
+
+#### data
+
+The data to be sent to the server. Optional. This can either be an object or a
+query string, such as `foo=bar&amp;baz=bim`.
+
+<div class="note" markdown="1">
+### Note
+
+This option is not valid for `$.getScript`.
+</div>
+
+#### success callback
+
+A callback function to run if the request succeeds. Optional. The function
+receives the response data (converted to a JavaScript object if the data type
+was JSON), as well as the text status of the request and the raw request
+object.
+
+#### data type
+
+The type of data you expect back from the server. Optional.
+
+<div class="note" markdown="1">
+### Note
+
+This option is only applicable for methods that don't already specify the data
+type in their name. </div>
+
+<div class="example" markdown="1">
+Using jQuery's Ajax convenience methods
+
+ // get plain text or html
+ $.get('/users.php', { userId : 1234 }, function(resp) {
+ console.log(resp);
+ });
+
+ // add a script to the page, then run a function defined in it
+ $.getScript('/static/js/myScript.js', function() {
+ functionFromMyScript();
+ });
+
+ // get JSON-formatted data from the server
+ $.getJSON('/details.php', function(resp) {
+ $.each(resp, function(k, v) {
+ console.log(k + ' : ' + v);
+ });
+ });
+</div>
+
+### `$.fn.load`
+
+The `$.fn.load` method is unique among jQuery’s Ajax methods in that it is
+called on a selection. The `$.fn.load` method fetches HTML from a URL, and
+uses the returned HTML to populate the selected element(s). In addition to
+providing a URL to the method, you can optionally provide a selector; jQuery
+will fetch only the matching content from the returned HTML.
+
+<div class="example" markdown="1">
+Using `$.fn.load` to populate an element
+
+ $('#newContent').load('/foo.html');
+</div>
+
+<div class="example" markdown="1">
+Using `$.fn.load` to populate an element based on a selector
+
+ $('#newContent').load('/foo.html #myDiv h1:first', function(html) {
+ alert('Content updated!');
+ });
+</div>
115 content/ajax/key-concepts.md
@@ -0,0 +1,115 @@
+---
+chapter : ajax
+section : 2
+title : Key Concepts
+attribution: jQuery Fundamentals
+---
+## Key Concepts
+
+Proper use of Ajax-related jQuery methods requires understanding some key
+concepts first.
+
+### GET vs. Post
+
+The two most common “methods” for sending a request to a server are GET and
+POST. It’s important to understand the proper application of each.
+
+The GET method should be used for non-destructive operations — that is,
+operations where you are only “getting” data from the server, not changing data
+on the server. For example, a query to a search service might be a GET
+request. GET requests may be cached by the browser, which can lead to
+unpredictable behavior if you are not expecting it. GET requests generally
+send all of their data in a query string.
+
+The POST method should be used for destructive operations — that is, operations
+where you are changing data on the server. For example, a user saving a blog
+post should be a POST request. POST requests are generally not cached by the
+browser; a query string can be part of the URL, but the data tends to be sent
+separately as post data.
+
+### Data Types
+
+jQuery generally requires some instruction as to the type of data you expect to
+get back from an Ajax request; in some cases the data type is specified by the
+method name, and in other cases it is provided as part of a configuration
+object. There are several options:
+
+#### text
+
+For transporting simple strings
+
+#### html
+
+For transporting blocks of HTML to be placed on the page
+
+#### script
+
+For adding a new script to the page
+
+#### json
+
+For transporting JSON-formatted data, which can include strings, arrays, and objects
+
+<div class="note" markdown="1">
+### Note
+
+As of jQuery 1.4, if the JSON data sent by your server isn't properly
+formatted, the request may fail silently. See
+[http://json.org](http://json.org) for details on properly formatting JSON, but
+as a general rule, use built-in language methods for generating JSON on the
+server to avoid syntax issues.
+
+#### jsonp
+
+For transporting JSON data from another domain
+
+#### xml
+
+For transporting data in a custom XML schema
+
+I am a strong proponent of using the JSON format in most cases, as it provides
+the most flexibility. It is especially useful for sending both HTML and data at
+the same time.
+
+### A is for Asynchronous
+
+The asynchronicity of Ajax catches many new jQuery users off guard. Because
+Ajax calls are asynchronous by default, the response is not immediately
+available. Responses can only be handled using a callback. So, for example,
+the following code will not work:
+
+<div class="example" markdown="1">
+ var response;
+ $.get('foo.php', function(r) { response = r; });
+ console.log(response); // undefined!
+</div>
+
+Instead, we need to pass a callback function to our request; this callback will
+run when the request succeeds, at which point we can access the data that it
+returned, if any.
+
+<div class="example" markdown="1">
+ $.get('foo.php', function(response) { console.log(response); });
+</div>
+
+### Same-Origin Policy and JSONP
+
+In general, Ajax requests are limited to the same protocol (http or https), the
+same port, and the same domain as the page making the request. This limitation
+does not apply to scripts that are loaded via jQuery's Ajax methods.
+
+The other exception is requests targeted at a JSONP service on another domain.
+In the case of JSONP, the provider of the service has agreed to respond to your
+request with a script that can be loaded into the page using a `&lt;script>`
+tag, thus avoiding the same-origin limitation; that script will include the
+data you requested, wrapped in a callback function you provide.
+
+### Ajax and Firebug
+
+Firebug (or the Webkit Inspector in Chrome or Safari) is an invaluable tool for
+working with Ajax requests. You can see Ajax requests as they happen in the
+Console tab of Firebug (and in the Resources > XHR panel of Webkit Inspector),
+and you can click on a request to expand it and see details such as the request
+headers, response headers, response content, and more. If something isn't
+going as expected with an Ajax request, this is the first place to look to
+track down what's wrong.
46 content/ajax/working-with-jsonp.md
@@ -0,0 +1,46 @@
+---
+chapter : ajax
+section : 5
+title : Working with JSONP
+attribution: jQuery Fundamentals
+---
+## Working with JSONP
+
+The advent of JSONP — essentially a consensual cross-site scripting hack — has
+opened the door to powerful mashups of content. Many prominent sites provide
+JSONP services, allowing you access to their content via a predefined API. A
+particularly great source of JSONP-formatted data is the [Yahoo! Query
+Language](http://developer.yahoo.com/yql/console/), which we'll use in the
+following example to fetch news about cats.
+
+<div class="example" markdown="1">
+Using YQL and JSONP
+
+ $.ajax({
+ url : 'http://query.yahooapis.com/v1/public/yql',
+
+ // the name of the callback parameter,
+ // as specified by the YQL service
+ jsonp : 'callback',
+
+ // tell jQuery we're expecting JSONP
+ dataType : 'jsonp',
+
+ // tell YQL what we want and that we want JSON
+ data : {
+ q : 'select title,abstract,url from search.news where query="cat"',
+ format : 'json'
+ },
+
+ // work with the response
+ success : function(response) {
+ console.log(response);
+ }
+ });
+</div>
+
+jQuery handles all the complex aspects of JSONP behind-the-scenes — all we have
+to do is tell jQuery the name of the JSONP callback parameter specified by YQL
+("callback" in this case), and otherwise the whole process looks and feels like
+a normal Ajax request.
+
1,991 content/assets/css/style.css
@@ -0,0 +1,1991 @@
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Reset ]=== */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+ display: block
+}
+
+ nav ul {
+ list-style: none
+ }
+
+blockquote, q {
+ quotes: none
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+ content: '';
+ content: none;
+}
+
+a {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+ins {
+ background-color: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+
+mark {
+ background-color: #ff9;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+
+del {
+ text-decoration: line-through
+}
+
+abbr[title], dfn[title] {
+ border-bottom: 1px dotted;
+ cursor: help;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+input, select {
+ vertical-align: middle
+}
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Selectors & Classes ]=== */
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+html {
+ background: #444
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ display: block;
+ font-size: 13px;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #444;
+}
+
+h2, h3, h4 {
+ margin: 0 0 15px 0;
+ letter-spacing: -1px;
+}
+
+h2 {
+ font-size: 26px
+}
+
+h3 {
+ font-size: 20px
+}
+
+h4 {
+ font-size: 14px
+}
+
+p, ul, ol {
+ line-height: 18px;
+ margin: 0 0 15px 0;
+}
+
+ ul li, ol li {
+ padding: 0 0 0 5px;
+ margin: 0 0 0 20px;
+ }
+
+hr {
+ clear: both;
+ border: 0;
+ border-bottom: 1px solid #ccc;
+ width: 100%;
+}
+
+hr.dark {
+ border-bottom: 1px solid #777777
+}
+
+hr.light {
+ border-bottom: 1px solid #e5e5e5
+}
+
+.clearBoth {
+ clear: both;
+ width: 100%;
+ display: block;
+ height: 1px;
+}
+
+.alignLeft {
+ float: left
+}
+
+.alignRight {
+ float: right
+}
+
+.constrain {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.border {
+ border-bottom: 1px solid #333
+}
+
+.underline {
+ border-bottom: 1px solid #bfbfbf;
+ padding-bottom: 10px;
+}
+
+/* ===[ Icons ]=== */
+
+.icon {
+ display: block;
+ width: 20px;
+ height: 20px;
+ background: url(../i/icons.png) no-repeat;
+}
+
+.icon-search {
+ background-position: -158px -110px
+}
+
+.rss {
+ background: url(../i/icon-rss.png) no-repeat 100% 0;
+ padding: 0 20px 0 0;
+}
+
+.external {
+ background: url(../i/external.png) no-repeat 100% 2px;
+ padding: 0 12px 0 0;
+}
+
+/* ===[ Clearfix ]=== */
+
+.clearfix:before, .clearfix:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+
+.clearfix:after {
+ clear: both
+}
+
+.clearfix {
+ zoom: 1
+}
+
+/* ===[ Syntax ]=== */
+
+code {
+ background: #EEE;
+ font-family: monaco, monospace;
+ padding: 3px 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+
+pre, .syntaxhighlighter {
+ background: #e8e8e8;
+ padding: 15px;
+ border: 1px solid #bfbfbf;
+ margin: 0 0 15px 0;
+}
+
+iframe {
+ border: 1px solid #bfbfbf;
+ padding: 1px;
+}
+
+.syntaxhighlighter {
+ padding: 15px 0
+}
+
+ .syntaxhighlighter .toolbar {
+ display: none
+ }
+
+/* ===[ Titles ]=== */
+
+.title {
+ background: #f7b535;
+ width: 100%;
+ text-shadow: 0 1px 1px #fff;
+ margin: 0 0 20px -30px;
+ padding: 10px 30px 10px 30px;
+ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.35);
+ -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.35);
+ box-shadow: 0 1px 1px rgba(0,0,0,0.35);
+ background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#d5d5d5));
+ background: -moz-linear-gradient(top, #e5e5e5, #d5d5d5);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#d5d5d5');
+}
+
+/* ===[ Buttons ]=== */
+
+.btn {
+ padding: 5px 10px;
+ display: block;
+ margin: 0 15px 15px 0;
+ float: left;
+ border: 1px solid #bfbfbf;
+ text-decoration: none;
+ text-shadow: 0 1px 1px #fff;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#d5d5d5));
+ background: -moz-linear-gradient(top, #e5e5e5, #d5d5d5);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#d5d5d5');
+}
+
+.btn:hover {
+ text-shadow: 0 -1px 1px #fff;
+ background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#e5e5e5));
+ background: -moz-linear-gradient(top, #d5d5d5, #e5e5e5);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#e5e5e5');
+}
+
+.btn.blue {
+ color: #fff;
+ text-shadow: 0 -1px 1px #000;
+ background: -webkit-gradient(linear, left top, left bottom, from(#3492d5), to(#065791));
+ background: -moz-linear-gradient(top, #3492d5, #065791);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3492d5', endColorstr='#065791');
+ border-color: #065791;
+}
+
+.btn.blue:hover {
+ text-shadow: 0 1px 1px #000;
+ background: -webkit-gradient(linear, left top, left bottom, from(#065791), to(#3492d5));
+ background: -moz-linear-gradient(top, #065791, #3492d5);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#065791', endColorstr='#3492d5');
+}
+
+.btn:before, .btn:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+
+.btn:after {
+ clear: both
+}
+
+.btn {
+ zoom: 1
+}
+
+/* ===[ Grid ]=== */
+
+.col, .col4-1, .col4-2, .col4-3, .col3-1, .col3-2, .col2-1 {
+ float: left;
+ padding-right: 3%;
+}
+
+.col4-1 { width: 21% }
+.col4-2 { width: 47% }
+.col4-3 { width: 72% }
+
+.col7-1 { width: 15.2% }
+.col7-2 { width: 27% }
+.col7-3 { width: 40.9% }
+
+.col3-1 { width: 30% }
+.col3-2 { width: 63% }
+
+.col2-1 { width: 47% }
+
+.col.first, .col4-1.first, .col4-2.first, .col4-3.first, .col3-1.first, .col3-2.first, .col2-1.first {
+ margin-left: 0;
+ clear: left;
+}
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Project Specific Classes ]=== */
+
+/* ===[ Default ]=== */
+
+a {
+ color: #0d619c
+}
+
+footer a {
+ color: #fff;
+ text-decoration: none;
+}
+
+/* ===[ Core ]=== */
+
+html.jquery, .jquery #container {
+ background: #065791 url(../i/bg-body-jquery.jpg) no-repeat center -20px
+}
+
+.jquery h1 a {
+ height: 72px;
+ background: url(../i/logo-jquery.png) no-repeat;
+}
+
+.jquery .border, .jquery footer {
+ border-color: #0C9DD6
+}
+
+.jquery a, .jquery .title {
+ color: #065791
+}
+
+.jquery #container header nav ul li a, .jquery #container header nav .search::-webkit-input-placeholder, .jquery #container header nav .search label {
+ color: #FFF
+}
+
+.jquery #container header nav {
+ border-top: solid 1px rgba(12,157,214,0.4);
+ background: rgba(0, 64, 108, 0.3);
+ -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(0, 64, 108, 0.5) 0 -3px 5px;
+ -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(0, 64, 108, 0.5) 0 -3px 5px;
+ box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(0, 64, 108, 0.5) 0 -3px 5px;
+}
+
+ .jquery #container header nav .search .icon-search {
+ -webkit-box-shadow: rgba(12,157,214,0.5) -1px 0 0;
+ -moz-box-shadow: rgba(12,157,214,0.5) -1px 0 0;
+ box-shadow: rgba(12,157,214,0.5) -1px 0 0;
+ }
+
+/* ===[ jQuery UI ]=== */
+
+html.jquery-ui, .jquery-ui #container {
+ background: #BB6F04 url(../i/bg-body-ui.jpg) no-repeat center -20px
+}
+
+.jquery-ui h1 a {
+ background: url(../i/logo-ui.png) no-repeat;
+ width: 275px;
+ height: 72px;
+ left: -14px;
+ position: relative;
+}
+
+.jquery-ui .border, .jquery-ui footer {
+ border-color: #d69a06
+}
+
+.jquery-ui a, .jquery-ui .title {
+ color: #BB6F04
+}
+
+.jquery-ui #container header nav ul li a, .jquery-ui #container header nav .search::-webkit-input-placeholder, .jquery-ui #container header nav .search label {
+ color: #fff
+}
+
+.jquery-ui #container header nav {
+ border-top: solid 1px rgba(236,195,8,0.4);
+ background: rgba(187,111,4,0.5);
+ -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(137,81,6,0.5) 0 -3px 5px;
+ -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(137,81,6,0.5) 0 -3px 5px;
+ box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(137,81,6,0.5) 0 -3px 5px;
+}
+
+ .jquery-ui #container header nav .search .icon-search {
+ -webkit-box-shadow: rgba(255,215,124,0.5) -1px 0 0;
+ -moz-box-shadow: rgba(255,215,124,0.5) -1px 0 0;
+ box-shadow: rgba(255,215,124,0.5) -1px 0 0;
+ }
+
+/* ===[ Mobile ]=== */
+
+html.jquery-mobile, .jquery-mobile #container {
+ background: #598611 url(../i/bg-body-mobile.jpg) no-repeat center -30px
+}
+
+.jquery-mobile h1 a {
+ background: url(../i/logo-mobile.png) no-repeat;
+ height: 72px;
+ width: 275px;
+ left: -5px;
+ top: -1px;
+ position: relative;
+}
+
+.jquery-mobile .border, .jquery-mobile footer {
+ border-color: #88C41A
+}
+
+.jquery-mobile a, .jquery-mobile .title {
+ color: #598611
+}
+
+.jquery-mobile #container header nav ul li a, .jquery-mobile #container header nav .search::-webkit-input-placeholder, .jquery-mobile #container header nav .search label {
+ color: #fff
+}
+
+.jquery-mobile #container header nav {
+ border-top: solid 1px rgba(136,196,26,0.3);
+ background: rgba(80,118,17,0.4);
+ -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(80,118,17,0.5) 0 -3px 5px;
+ -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(80,118,17,0.5) 0 -3px 5px;
+ box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.2) 0 -1px 0, inset rgba(80,118,17,0.5) 0 -3px 5px;
+}
+
+ .jquery-mobile #container header nav .search .icon-search {
+ -webkit-box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ -moz-box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ }
+
+/* jQuery Project */
+
+html.jquery-project {
+ background: #861143 url(../i/bg-body-jquery-project.jpg) no-repeat center -30px
+}
+
+.jquery-project h1 a {
+ background: url(../i/logo-project.png) no-repeat;
+ height: 78px;
+ width: 275px;
+ left: -5px;
+ top: -1px;
+ position: relative;
+ margin-bottom: 9px;
+}
+
+.jquery-project .border, .jquery-project footer {
+ border-color: #b2175b
+}
+
+.jquery-project a, .jquery-project .title {
+ color: #b2175b
+}
+
+.jquery-project #container header nav ul li a, .jquery-project #container header nav .search::-webkit-input-placeholder, .jquery-project #container header nav .search label {
+ color: #fff
+}
+
+.jquery-project #container header nav {
+ border-top: solid 1px rgba(219,30,113,0.2);
+ background: rgba(92,12,47,0.5);
+ -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0, inset rgba(92,12,47,0.5) 0 -3px 5px;
+ -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0, inset rgba(92,12,47,0.5) 0 -3px 5px;
+ box-shadow: rgba(255,255,255,0.1) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0, inset rgba(92,12,47,0.5) 0 -3px 5px;
+}
+
+ .jquery-project #container header nav .search .icon-search {
+ -webkit-box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ -moz-box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ box-shadow: rgba(136,196,26,0.5) -1px 0 0;
+ }
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Logo ]=== */
+
+h1 a {
+ background: url(../i/logo-project.png) no-repeat;
+ height: 71px;
+ width: 257px;
+ float: left;
+ display: block;
+ line-height: 999px;
+ overflow: hidden;
+ margin: 25px 0 15px 10px;
+}
+
+h1 a:hover {
+ cursor: pointer
+}
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Tooltips ]=== */
+
+.tooltip {
+ display: none;
+ position: absolute;
+ z-index: 10;
+ width: 386px;
+ height: 121px;
+ background: url(../i/bg-tooltip.png) no-repeat;
+ z-index: 400;
+}
+
+.jquery.tooltip {
+ margin: -10px 0 0 -10px
+}
+
+.jquery-ui.tooltip {
+ margin: -10px 0 0 26px
+}
+
+.jquery-mobile.tooltip {
+ margin: -10px 0 0 64px
+}
+
+.tooltip .branding, .tooltip .branding:hover {
+ position: absolute;
+ float: none;
+ text-indent: 0;
+ top: 25px;
+ left: 22px;
+ width: auto;
+ height: auto;
+ border: none;
+ background: none;
+}
+
+.tooltip ul {
+ position: absolute;
+ top: 20px;
+ left: 240px;
+ width: 130px;
+ font-size: 9pt;
+ padding: 3px 0 0 0;
+ border-left: solid 1px #333;
+ border-left: solid 1px rgba(255,255,255,0.1);
+ text-shadow: rgba(0,0,0,0.9) 0 1px 0;
+ -webkit-box-shadow: rgba(0,0,0,0.2) -1px 0 0;
+ -moz-box-shadow: rgba(0,0,0,0.2) -1px 0 0;
+ box-shadow: rgba(0,0,0,0.2) -1px 0 0;
+ display: block;
+ float: none;
+ height: auto;
+ border-right: none;
+}
+
+.tooltip li {
+ float: none;
+ padding: 0;
+ margin: 0;
+ padding-left: 10px;
+ list-style: none;
+}
+
+ .tooltip li a, .tooltip li a:hover {
+ display: block;
+ height: 17px;
+ line-height: 17px;
+ color: #999;
+ float: none;
+ background: none;
+ text-indent: 0;
+ border: none;
+ text-decoration: none;
+ }
+
+ .tooltip li a:hover {
+ color: #fff
+ }
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Project Select ]=== */
+
+.project-select {
+ background: #222 url(../i/bg-top.jpg) center bottom repeat-x;
+ position: absolute;
+ padding: 5px 0 0 0;
+ margin: -155px 0 0 0;
+ height: 150px;
+ width: 100%;
+}
+
+ .project-select ul li {
+ height: 140px;
+ list-style: none;
+ display: block;
+ float: left;
+ width: 20%;
+ margin: 0;
+ padding: 10px 0 0;
+ }
+
+ .project-select ul li a {
+ display: block;
+ height: 130px;
+ border-right: solid 1px rgba(0, 0, 0, 0.3);
+ border-left: solid 1px rgba(150, 150, 150, 0.08);
+ overflow: hidden;
+ text-align: center;
+ position: relative;
+ text-decoration: none;
+ }
+
+ .project-select ul li:hover a em {
+ opacity: 1.0
+ }
+
+ .project-select ul li a em {
+ display: block;
+ color: #444;
+ text-shadow: black 0 -1px 0;
+ line-height: 140%;
+ font-size: 9pt;
+ margin-top: 10px;
+ left: 20px;
+ right: 20px;
+ bottom: 15px;
+ position: absolute;
+ text-decoration: none;
+ }
+
+ .project-select ul li a img {
+ width: 84%;
+ margin: 10px 5%;
+ }
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Header ]=== */
+
+body > header {
+ background: url(../i/jq-global-nav.png) 0 -68px repeat-x;
+}
+
+ header nav.top {
+ height: 32px;
+ }
+
+ header nav.top ul {
+ margin: 0;
+ padding: 0;
+ float: left;
+ display: block;
+ width: auto;
+ height: 31px;
+ line-height: auto;
+ border-right: 1px solid rgba(255, 255, 255, 0.0976562);
+ border-left: 1px solid rgba(0, 0, 0, 0.347656);
+ }
+
+ header nav.top li {
+ height: 31px;
+ margin: 0;
+ padding: 0;
+ float: left;
+ display: block;
+ position: relative;
+ border-left: 1px solid rgba(255, 255, 255, 0.0976562);
+ border-right: 1px solid rgba(0, 0, 0, 0.347656);
+ }
+
+ header nav.top li:hover a, header nav.top li.active a {
+ background: rgba(0,0,0,0.1)
+ }
+
+ header nav.top ul.links li.dropdown:hover, header nav.top ul.dropdown.links li.active {
+
+ }
+
+ header nav.top li.dropdown:hover a, header nav.top li.dropdown.active a {
+ background: transparent url(../i/jq-global-noise-only.png);
+ }
+
+ header nav.top li ul {
+ display: none;
+ position: absolute;
+ top: 30px;
+ left: -1px;
+ float: left;
+ min-width: 120px;
+ height: auto;
+ border-left: solid 1px #333;
+ border-right: solid 1px #111;
+ border-bottom: solid 1px #111;
+ padding: 0 0 5px 0;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 3px 4px;
+ -moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 3px 4px;
+ box-shadow: rgba(0, 0, 0, 0.3) 2px 3px 4px;
+ z-index: 999;
+ background: transparent url(../i/jq-global-noise-only.png);
+ }
+
+ header nav.top li ul li {
+ float: none;
+ border: none;
+ padding: 0 5px;
+ }
+
+ header nav.top li ul li a {
+ float: none;
+ border: none;
+ height: 27px;
+ line-height: 27px;
+ white-space: nowrap;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ }
+
+ header nav.top li ul li a:hover {
+ color: #fff
+ }
+
+ header nav.top .links {
+ float: right;
+ position: relative;
+ top: 1px;
+ }
+
+ header nav.top li a {
+ float: left;
+ display: block;
+ color: #e6e6e6;
+ text-decoration: none;
+ padding: 0px 13px;
+ height: 32px;
+ line-height: 31px;
+ text-shadow: black 0px -1px 0px, black 0px 0px 2px;
+ }
+
+.jquery header nav.top li.jquery, .jquery-ui header nav.top li.jquery-ui, .jquery-mobile header nav.top li.jquery-mobile {
+ border: none;
+ margin: 1px 0 0 -5px;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+header nav.top li.jquery a, header nav.top li.jquery-ui a, header nav.top li.jquery-mobile a {
+ background: url(../i/jq-nav-icons.png) no-repeat;
+ height: 34px;
+ width: 37px;
+ padding: 0;
+ text-align: center;
+ display: block;
+ line-height: 999px;
+ overflow: hidden;
+}
+
+header nav.top li.jquery {
+
+}
+
+.jquery header nav.top li.jquery {
+ margin-right: -4px
+}
+
+header nav.top li.jquery-ui {
+
+}
+
+.jquery-ui header nav.top li.jquery-ui {
+ margin-right: -4px
+}
+
+header nav.top li.jquery-mobile {
+
+}
+
+.jquery-mobile header nav.top li.jquery-mobile {
+ margin-right: -4px
+}
+
+header nav.top li.jquery a {
+ background-position: 11px 1px
+}
+
+.jquery header nav.top li.jquery a {
+ width: 48px;
+ height: 40px;
+ border: none;
+ background-position: 0px -36px;
+}
+
+.jquery header nav.top ul.projects {
+ border-left-color: transparent;
+}
+
+.jquery header nav.top li.jquery-ui {
+ border-left-color: transparent;
+}
+
+header nav.top li.jquery-ui a {
+ background-position: -39px 1px
+}
+
+.jquery-ui header nav.top li.jquery-ui a {
+ width: 48px;
+ height: 40px;
+ border: none;
+ background-position: -50px -36px;
+}
+
+.jquery-ui header nav li.jquery-mobile {
+ border-left-color: transparent;
+}
+
+.jquery-ui header nav li.jquery {
+ border-right-color: transparent;
+}
+
+header nav.top li.jquery-mobile a {
+ background-position: -91px 1px
+}
+
+.jquery-mobile header nav.top li.jquery-mobile a {
+ width: 48px;
+ height: 40px;
+ border: none;
+ background-position: -100px -36px;
+}
+
+.jquery-mobile header nav.top li.jquery-ui {
+ border-right-color: transparent;
+}
+
+.jquery-mobile header nav.top li.toggle-projects {
+ border-left-color: transparent;
+}
+
+header nav.top li.toggle-projects a {
+ padding-right: 30px;
+ background-image: url(../i/icon-arrow.png);
+ background-repeat: no-repeat;
+ background-position: 100% 0;
+}
+
+header nav.top li.toggle-projects.active a {
+ background-position: 100% -32px;
+ background-color: transparent;
+ text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.8) 0 0 6px;
+}
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Footer ]=== */
+
+footer {
+ width: 100%;
+ margin: 30px 0 0 0;
+ padding-bottom: 15px;
+ border-top: 1px solid #6b6868;
+ background-color: #212121;
+ position: relative;
+ z-index: 10;
+}
+
+footer .cdn {
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ background: #000 url(../i/cdn-download.png) center center repeat-x;
+ width: 96%;
+ margin-left: 2%;
+ height: 30px;
+ line-height: 30px;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+ -webkit-box-shadow: rgba(255,255,255,0.15) 0 1px 0;
+ -moz-box-shadow: rgba(255,255,255,0.15) 0 1px 0;
+ box-shadow: rgba(255,255,255,0.15) 0 1px 0;
+}
+
+footer .cdn ~ .cdn {
+ margin-top: 5px;
+}
+
+footer .cdn ~ .cdn strong {
+ text-align: right;
+}
+
+.no-cssboxshadow {
+ border-bottom: solid 1px #333;
+}
+
+ footer .cdn strong {
+ text-align: center;
+ height: 26px;
+ text-align: left;
+ padding: 0 6px 0 6px;
+ line-height: 28px;
+ display: inline-block;
+ margin: 2px 0 0 2px;
+ position: relative;
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+ background: #777;
+ color: #fff;
+ text-shadow: #000 0 -1px 0;
+ font-weight: normal;
+ background-color: #7a7a7a;
+ background-image: -moz-linear-gradient(top, #7a7a7a, #5e5e5e); /* FF3.6 */
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7a7a7a),color-stop(1, #5e5e5e)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(#7a7a7a, #5e5e5e); /* Chrome 10+, Saf6 */
+ background-image: linear-gradient(top, #7a7a7a, #5e5e5e);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7a7a7a', EndColorStr='#5e5e5e'); /* IE6�IE9 */
+ }
+
+ footer .cdn strong:after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: solid 1px rgba(255,255,255,0.2);
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+ }
+
+ footer .cdn strong em {
+ font-style: normal;
+ color: #ccc;
+ font-family: Consolas, Monaco, monospace;
+ display: inline-block;
+ width: 20px;
+ padding-left: 5px;
+ padding-right: 4px;
+ text-align: right;
+ }
+
+ footer .cdn span {
+ display: inline-block;
+ font-family: Consolas, monospace;
+ padding-left: 5px;
+ white-space: nowrap;
+ color: #ccc;
+ font-size: 12px;
+ }
+
+footer .download {
+ color: #fff;
+ padding: 10px 2% 15px 2%;
+ line-height: 140%;
+}
+
+ footer .download strong {
+ margin-right: 10px;
+ }
+
+ footer .download > span {
+ white-space: nowrap;
+ }
+
+ footer .download a {
+ margin: 0 10px;
+ }
+
+ footer .download a em {
+ font-style: normal;
+ color: #aaa;
+ }
+
+ footer .download a:hover {
+ border-bottom: solid 1px #888;
+ }
+
+footer .footer-icon-links {
+ padding: 15px 0;
+ margin: 0 2%;
+ border-top: solid 1px #333;
+ -webkit-box-shadow: #000 0 -1px 0;
+ -moz-box-shadow: #000 0 -1px 0;
+ box-shadow: #000 0 -1px 0;
+}
+
+ footer .footer-icon-links li {
+ width: 33%;
+ margin-left: 2%;
+ float: left;
+ }
+
+ footer .footer-icon-links li.icon-bugs {
+ width: 27%;
+ }
+
+ footer .footer-icon-links li a {
+ display: block;
+ padding-left: 40px;
+ line-height: auto;
+ font-size: 18px;
+ float: left;
+ position: relative;
+ }
+
+ footer .footer-icon-links li.footer-icon a,
+ footer .footer-icon-links li.footer-icon a span {
+ background: url(../i/footer-icons-large.png) no-repeat;
+ }
+
+ footer .footer-icon-links li.footer-icon a span {
+ content: "";
+ display: block;
+ opacity: 0;
+ width: 34px;
+ height: 32px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ footer .footer-icon-links li.icon-github a { background-position: 0 0;}
+ footer .footer-icon-links li.icon-forum a { background-position: 0 -123px;}
+ footer .footer-icon-links li.icon-bugs a { background-position: 0 -249px;}
+
+ footer .footer-icon-links li.icon-github a span { background-position: -251px 0;}
+ footer .footer-icon-links li.icon-forum a span { background-position: -251px -123px;}
+ footer .footer-icon-links li.icon-bugs a span { background-position: -251px -249px;}
+
+ .no-js footer .footer-icon-links li.footer-icon a:hover span { opacity: 1.0; }
+
+ footer .footer-icon-links li small {
+ display: block;
+ font-size: 14px;
+ color: #777;
+ line-height: 120%;
+ }
+
+ footer .footer-icon-links li:first-child {
+ margin-left: 0%;
+ }
+
+.multiplebgs.cssgradients footer {
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0.0)), url(../i/bg-footer-noise.jpg); /* FF3.6 */
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(0,0,0,0.3)),color-stop(1, rgba(0,0,0,0.0))), url(../i/bg-footer-noise.jpg); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.0)), url(../i/bg-footer-noise.jpg); /* Chrome 10+, Saf6 */
+ background-repeat: repeat-x, repeat;
+ -webkit-background-size: 100px 15px, 140px 140px;
+ -moz-background-size: 100px 15px, 140px 140px;
+ background-size: 100px 15px, 140px 140px;
+}
+
+.no-multiplebgs footer, .no-cssgradients footer {
+ background-image: url(../i/bg-footer-noise.jpg);
+ background-repeat: repeat;
+}
+
+footer h3 {
+ color: #777;
+ font-size: 14px;
+ font-weight: bold;
+ letter-spacing: normal;
+ font-weight: normal;
+ font-family: 'Gill Sans MT', 'GillSans MT', 'Gill Sans', GillSans, Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ text-shadow: #000 0 1px 0;
+ border: solid 1px #000;
+ text-rendering: optimizeLegibility;
+ border-bottom: none;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+ position: relative;
+ text-align: center;
+ height: 10px;
+ margin-top: 20px;
+}
+
+ footer h3 span {
+ display: inline-block;
+ padding: 3px 10px;
+ position: relative;
+ top: -0.8em;
+ background: url(../i/bg-footer-noise.jpg) repeat;
+ }
+
+footer h3:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border: solid 1px #333;
+ border-bottom: none;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+ z-index: -10;
+}
+
+.footer-site-links {
+ float: right;
+ padding: 10px 0 0 0;
+ width: 60%;
+ text-align: right;
+}
+
+footer p.copyright {
+ margin: 10px 0 0 0;
+ float: left;
+ width: 40%;
+ font-size: 11px;
+ line-height: 130%;
+ color: #777;
+}
+
+footer p.copyright a {
+ color: #aaa;
+}
+
+footer p.copyright a:hover {
+ color: #fff;
+}
+
+footer p.copyright > br { display: none ;}
+footer p.copyright span.sponsor-line {
+ display: block;
+ font-size: 10px;
+ margin: 1px 0 0 0;
+}
+
+footer li.icon {
+ position: relative ;
+ background: none;
+ width: auto;
+ height: auto;
+ line-height: 20px;
+ margin: 0 0 10px 20px;
+ font-size: 13px;
+}
+
+ footer li.icon a {
+ padding-left: 22px;
+ position: relative;
+ z-index: 10;
+ color: #aaa;
+ }
+
+ footer li.icon a:hover {
+ color: white;
+ }
+
+.footer-site-links li {
+ display: inline-block;
+}
+
+footer li.icon:before {
+ content: "";
+ display: block;
+ height: 24px;
+ width: 24px;
+ position: absolute;
+ left: 0;
+ top: -2px;
+ background: url(../i/footer-icons.png) no-repeat;
+ z-index: 5;
+}
+
+footer li.icon-learning-center:before { background-position: 1px 2px;}
+footer li.icon-forum:before { background-position: -101px 0;}
+footer li.icon-api:before { background-position: -33px 0;}
+footer li.icon-twitter:before { background-position: -135px 0;}
+footer li.icon-irc:before { background-position: -67px 0;}
+
+footer li.icon-learning-center:hover:before { background-position: 1px -32px;}
+footer li.icon-forum:hover:before { background-position: -101px -34px;}
+footer li.icon-api:hover:before { background-position: -33px -34px;}
+footer li.icon-twitter:hover:before { background-position: -135px -34px;}
+footer li.icon-irc:hover:before { background-position: -67px -34px;}
+
+footer .col {
+ margin-left: 2.5%;
+ padding: 30px 0 20px 0;
+ height: 100%;
+}
+
+footer .col:first-child {
+ margin-left: 0
+}
+
+footer .constrain.fake {
+ background: url(../i/footer-comp.png) center 45px no-repeat;
+ height: 283px;
+}
+
+ footer .constrain.fake > div {
+ display: none
+ }
+
+footer ul {
+
+}
+
+ footer ul li {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ line-height: 30px;
+ }
+
+.jquery footer a, .jquery-ui footer a, .jquery-mobile footer a, footer .bottom {
+ color: #fff;
+ text-decoration: none;
+}
+
+footer .bottom {
+ margin: 0 10% 0 0
+}
+
+footer #legal {
+ clear: left;
+ display: block;
+ border-top: solid 1px #333;
+ -webkit-box-shadow: #000 0 -1px 0;
+ -moz-box-shadow: #000 0 -1px 0;
+ box-shadow: #000 0 -1px 0;
+}
+
+ footer #legal .constrain {
+ background: none;
+ height: auto;
+ }
+
+footer .presentations {
+
+}
+
+ footer .presentations li {
+ float: left;
+ width: 45%;
+ min-width: 142px;
+ margin-left: 3.5%;
+ line-height: 130%;
+ font-size: 11px;
+ }
+
+ footer .presentations li a > span,
+ footer .books li a > span {
+ display: block;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ border: solid 1px #000;
+ position: relative;
+ width: 142px;
+ height: 92px;
+ margin-bottom: 5px;
+ overflow: hidden;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+
+ footer .presentations li a:hover > span,
+ footer .books li a:hover > span {
+ border-color: white;
+ -webkit-transition: none;
+ }
+
+ footer .presentations li a > span:after,
+ footer .books li a > span:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: -webkit-gradient(linear, 100% 0%, 55% 100%, from(rgba(255,255,255,0.02)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.505, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
+ -webkit-background-clip: padding-box;
+ border: solid 1px rgba(255,255,255,0.2);
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ }
+
+ footer .presentations li a:hover > span:after,
+ footer .books li a:hover > span:after {
+ background: -webkit-gradient(linear, 100% 0%, 55% 100%, from(rgba(255,255,255,0.02)), color-stop(0.5, rgba(255,255,255,0.3)), color-stop(0.505, rgba(255,255,255,0)), to(rgba(255,255,255,0)))
+ }
+
+ footer .presentations li a > span img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ footer .presentations li a > br,
+ footer .books li a > br {
+ display: none
+ }
+
+ footer .presentations li a cite,
+ footer .books li a cite {
+ font-style: normal;
+ display: block;
+ margin-top: 3px;
+ font-size: 9px;
+ color: #aaa;
+ }
+
+ footer .presentations li a cite,
+ footer .presentations li a strong,
+ footer .books li a cite,
+ footer .books li a strong {
+ line-height: 130%;
+ display: block;
+ font-weight: normal;
+ }
+
+ footer .books li {
+ float: left;
+ width: 30%;
+ min-width: 95px;
+ margin-left: 2.8%;
+ margin-bottom: 15px;
+ line-height: 130%;
+ font-size: 11px;
+ }
+
+ footer .books li:first-child {
+ margin-left: 2%;
+ }
+
+ footer .books li a > span {
+ width: 90px;
+ height: 114px;
+ }
+
+ footer .books li a > span.top { background-position: center top;}
+ footer .books li a > span.bottom { background-position: center bottom;}
+ footer .books li a > span { background-position: center center;}
+
+/* ------------------------------------------------------------------------------
+ ================================================== */
+
+/* ===[ Global Container ]=== */
+
+#container {
+
+}
+
+ #container header {
+
+ }
+
+ #container header nav {
+ clear: both;
+ margin-top: -1px;
+ width: auto;
+ background: transparent none;
+ border: solid 1px rgba(0,0,0,0.2);
+ -webkit-border-top-left-radius: 10px;
+ -webkit-border-top-right-radius: 10px;
+ -moz-border-radius: 10px 10px 0 0;
+ border-radius: 10px 10px 0 0;
+ }
+
+ #container header nav ul {
+ line-height: auto;
+ margin: 0;
+ padding: 8px