apply core styles to using-jquery-core sectione examples

Author: bobholt

order.yml

@@ -33,6 +33,7 @@
   - feature-browser-detection
   - utility-methods
   - iterating
+  - understanding-index
 - events:
   - introduction-to-events
   - handling-events

page/using-jquery-core/attributes.md

@@ -11,19 +11,20 @@ or an object containing one or more key/value pairs.
 
 ```
 // Setting attributes
-$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
-$('a').attr({
-  'title' : 'all titles are the same too!',
-  'href' : 'somethingNew.html'
+$("a").attr( "href", "allMyHrefsAreTheSameNow.html" );
+
+$("a").attr({
+  "title" : "all titles are the same too!",
+  "href" : "somethingNew.html"
 });
 ```
 
 This time, we broke the object up into multiple lines. Remember, whitespace
-doesn't matter in JavaScript, so you should feel free to use it liberally to
+doesn"t matter in JavaScript, so you should feel free to use it liberally to
 make your code more legible! You can use a minification tool later to strip out
 unnecessary whitespace for production.
 
 ```
 // Getting attributes
-$('a').attr('href');  // returns the href for the first a element in the document
+$("a").attr("href");  // returns the href for the first a element in the document
 ```

page/using-jquery-core/avoid-conflicts-other-libraries.md

@@ -17,7 +17,11 @@ variable name to replace `$`.
 <!-- Putting jQuery into no-conflict mode -->
 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
-<script>var $j = jQuery.noConflict();</script>
+<script>
+
+  var $j = jQuery.noConflict();
+
+</script>
 ```
 
 You can continue to use the standard $ by wrapping your code in a
@@ -30,10 +34,13 @@ over the `$`.
 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
 <script>
+
 jQuery.noConflict();
 
 (function($) {
+
    // your code here, using the $
-})(jQuery);
+
+})( jQuery );
 </script>
 ```

page/using-jquery-core/css-styling-dimensions.md

@@ -17,14 +17,18 @@ will work.
 
 ```
 // Getting CSS properties
-$('h1').css('fontSize'); // returns a string such as "19px"
-$('h1').css('font-size'); // also works
+$("h1").css("fontSize"); // returns a string such as "19px"
+$("h1").css("font-size"); // also works
 ```
 
 ```
 // Setting CSS properties
-$('h1').css('fontSize', '100px'); // setting an individual property
-$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // setting multiple properties
+$("h1").css( "fontSize", "100px" ); // setting an individual property
+
+$("h1").css({
+  "fontSize": "100px",
+  "color": "red"
+}); // setting multiple properties
 ```
 
 Note the style of the argument we use on the second line — it is an object that
@@ -44,13 +48,13 @@ class on the element you want to affect.
 
 ```
 // Working with classes
-var $h1 = $('h1');
+var $h1 = $("h1");
 
-$h1.addClass('big');
-$h1.removeClass('big');
-$h1.toggleClass('big');
+$h1.addClass("big");
+$h1.removeClass("big");
+$h1.toggleClass("big");
 
-if ($h1.hasClass('big')) { ... }
+if ( $h1.hasClass("big") ) { ... }
 ```
 
 Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
@@ -65,13 +69,13 @@ methods, visit the [Dimensions documentation on api.jquery.com](http://api.jquer
 
 ```
 // Basic dimensions methods
-$('h1').width('50px');   // sets the width of all H1 elements
-$('h1').width();         // gets the width of the first H1
+$("h1").width("50px");   // sets the width of all H1 elements
+$("h1").width();         // gets the width of the first H1
 
-$('h1').height('50px');  // sets the height of all H1 elements
-$('h1').height();        // gets the height of the first H1
+$("h1").height("50px");  // sets the height of all H1 elements
+$("h1").height();        // gets the height of the first H1
 
-$('h1').position();      // returns an object containing position
+$("h1").position();      // returns an object containing position
                          // information for the first H1 relative to
                          // its "offset (positioned) parent"
 ```

page/using-jquery-core/data-methods.md

@@ -13,8 +13,8 @@ store data related to an element, and it manages the memory issues for you.
 
 ```
 // Storing and retrieving data related to an element
-$('#myDiv').data('keyName', { foo : 'bar' });
-$('#myDiv').data('keyName'); // { foo : 'bar' }
+$("#myDiv").data( "keyName", { foo: "bar" } );
+$("#myDiv").data("keyName"); // { foo: "bar" }
 ```
 
 You can store any kind of data on an element, and it's hard to overstate the
@@ -30,15 +30,20 @@ list item using `$.fn.data`:
 
 ```
 // Storing a relationship between elements using $.fn.data
-$('#myList li').each(function() {
-  var $li = $(this), $div = $li.find('div.content');
-  $li.data('contentDiv', $div);
+$("#myList li").each(function() {
+
+  var $li = $( this );
+  var $div = $li.find("div.content");
+
+  $li.data( "contentDiv", $div );
+
 });
 
 // later, we don't have to find the div again;
 // we can just read it from the list item's data
-var $firstLi = $('#myList li:first');
-$firstLi.data('contentDiv').html('new content');
+var $firstLi = $("#myList li:first");
+
+$firstLi.data("contentDiv").html("new content");
 ```
 
 In addition to passing `$.fn.data` a single key-value pair to store data, you can also pass an object containing one or more pairs.

page/using-jquery-core/document-ready.md

@@ -1,63 +1,74 @@
 ---
-title   : $(document).ready()
+title   : $( document ).ready()
 level: beginner
 ---
-You cannot safely manipulate a page until the document is “ready.” 
-jQuery detects this state of readiness for you; code included inside 
-`$(document).ready()` will only run once the page DOM (Document Object Model) is ready for JavaScript code to execute 
-whereas `$(window).load(function () {})` will run once the entire page (images or iframe) not just the DOM is ready.
-
-``` js
-// A $(document).ready() block
-$(document).ready(function() {
-  console.log('ready!');
+You cannot safely manipulate a page until the document is “ready.”
+jQuery detects this state of readiness for you; code included inside
+`$( document ).ready()` will only run once the page DOM (Document Object Model) is ready for JavaScript code to execute
+whereas `$( window ).load(function () {})` will run once the entire page (images or iframe) not just the DOM is ready.
+
+```
+// A $( document ).ready() block
+$( document ).ready(function() {
+
+  console.log("ready!");
+
 });
 ```
 
-There is a shorthand for `$(document).ready()` that you will sometimes see; however, 
-I recommend against using it if you are writing code that people who aren't experienced 
+There is a shorthand for `$( document ).ready()` that you will sometimes see; however,
+I recommend against using it if you are writing code that people who aren't experienced
 with jQuery may see.
 
-``` js
-// Shorthand for $(document).ready()
+```
+// Shorthand for $( document ).ready()
 $(function() {
-  console.log('ready!');
+
+  console.log("ready!");
+
 });
 ```
 
 You can also pass a named function to `$(document).ready()` instead of passing an anonymous function.
 
-``` js
+```
 // Passing a named function instead of an anonymous function
 
 function readyFn( jQuery ) {
+
   // code to run when the document is ready
+
 }
 
-$(document).ready(readyFn);
+$( document ).ready( readyFn );
 
-// OR 
+// OR
 
-$(window).load(readyFn);
+$( window ).load( readyFn );
 ```
 
-Let's take a look at how both the events act. The below example tries to load some website url in an iframe and checks for both the events. 
+Let's take a look at how both the events act. The below example tries to load some website url in an iframe and checks for both the events.
 ``` html
 <html>
   <head>
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-            <script>
-                    $(document).ready(function () {
-                            console.log('document loaded');
-                    });
-                    
-                    $(window).load(function () {
-                            console.log('window loaded');
-                    });	
-            </script>
+      <script>
+
+        $( document ).ready(function () {
+
+          console.log("document loaded");
+
+        });
+
+        $( window ).load(function () {
+
+          console.log("window loaded");
+
+        });
+      </script>
     </head>
     <body>
-            <iframe src='http://techcrunch.com'></iframe>
+      <iframe src="http://techcrunch.com"></iframe>
     </body>
 </html>
 ```

page/using-jquery-core/dollar-object-vs-function.md

@@ -9,7 +9,7 @@ Until now, we’ve been dealing entirely with methods that are called on a jQuer
 object. For example:
 
 ```
-$('h1').remove();
+$("h1").remove();
 ```
 
 Most jQuery methods are called on jQuery objects as shown above; these methods