Bruce D Kyle devdays

## jQueryPlugInSample.html
<!DOCTYPE html>
<html>
<head>
    <title>Footnoter</title>
</head>
<body>
    <p id="myParagraph">
        In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted
        insensible as. Oh up unsatiable <span class="footnote">Unpacked reserved sir.</span> interested.
        Present suppose in esteems indemesne colonel it to. End horrible she landlord screened stanhill.

## setting-options.js
$.fn.footnote = function (options) {

    // This is the easiest way to have default options.
    var settings = $.extend({
        // These are the defaults.
        color: "blue",
        referencesLocation: "#references"
    }, options);

    // use the options

## chaining.html
<script>
    $("#myParagraph").footnote().css("background-color", "yellow");
</script>

## footnotes-0.0.2.js
(function ($) {
    $.fn.footnote = function () {
        // console.log("footnote");
        var footnotes = this.find("span.footnote");
        footnotes.each(function (key, value) {
            //console.log("footnote" + key + " : " + $(value).contents().text());
            var footnoteContentsNode = $(value).clone();
            var footnoteNumberTextNode = document.createTextNode("[" + key + "] ");
            $("#references").append(footnoteNumberTextNode).append(footnoteContentsNode).css("color", "blue").append("<br />");
            $(value).text("[" + key + "] ").css("color", "blue").css("vertical-align", "super").css("font-size", "60%");

## jquery.footnoter-0.0.1.js
(function ($) {
    $.fn.footnote = function () {
        console.log("footnote");
        var footnotes = this.find("span.footnote");
        footnotes.css("color", "red");
        return footnotes;
    };
}(jQuery));

## protect-jQuery.js
(function ( $ ) {
    // use $ in your code as the jQuery alias here
}( jQuery ));

## footnoter.0.0.1.html
<!DOCTYPE html>
<html>
<head>
    <title>Footnoter</title>
</head>
<body>
    <p id="myParagraph">
        In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted
        insensible as. Oh up unsatiable <span class="footnote">Unpacked reserved sir.</span> interested.
        Present suppose in esteems indemesne colonel it to. End horrible she landlord screened stanhill.

## jQuery-basic-plugin-greenify.js
$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify(); // Makes all the links green.


## css-inlinedefaults.html
<div style="border: 1px solid orange">
    <span style="width: 300px; margin-left: 100px; padding: 3px 3px 3px 3px;
        background-color: lightgreen">Now is the time for all good men to come to the aid of their country. The quick fox jumped over the lazy dog.</span>
    <span style="width: 300px; margin-left: 100px; padding: 3px 3px 3px 3px;
        background-color: lightgreen">Now is the time for all good men to come to the aid of their country. The quick fox jumped over the lazy dog.</span>
</div>

## css-SeeTheBoxes.css
* {
   border: 1px solid red !important;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Footnoter</title>
	</head>
	<body>
	<p id="myParagraph">
	In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted
	insensible as. Oh up unsatiable <span class="footnote">Unpacked reserved sir.</span> interested.
	Present suppose in esteems indemesne colonel it to. End horrible she landlord screened stanhill.
	$.fn.footnote = function (options) {

	// This is the easiest way to have default options.
	var settings = $.extend({
	// These are the defaults.
	color: "blue",
	referencesLocation: "#references"
	}, options);

	// use the options
	<script>
	$("#myParagraph").footnote().css("background-color", "yellow");
	</script>
	(function ($) {
	$.fn.footnote = function () {
	// console.log("footnote");
	var footnotes = this.find("span.footnote");
	footnotes.each(function (key, value) {
	//console.log("footnote" + key + " : " + $(value).contents().text());
	var footnoteContentsNode = $(value).clone();
	var footnoteNumberTextNode = document.createTextNode("[" + key + "] ");
	$("#references").append(footnoteNumberTextNode).append(footnoteContentsNode).css("color", "blue").append("<br />");
	$(value).text("[" + key + "] ").css("color", "blue").css("vertical-align", "super").css("font-size", "60%");
	(function ($) {
	$.fn.footnote = function () {
	console.log("footnote");
	var footnotes = this.find("span.footnote");
	footnotes.css("color", "red");
	return footnotes;
	};
	}(jQuery));
	(function ( $ ) {
	// use $ in your code as the jQuery alias here
	}( jQuery ));
	$.fn.greenify = function() {
	this.css( "color", "green" );
	};

	$( "a" ).greenify(); // Makes all the links green.
	<div style="border: 1px solid orange">
	<span style="width: 300px; margin-left: 100px; padding: 3px 3px 3px 3px;
	background-color: lightgreen">Now is the time for all good men to come to the aid of their country. The quick fox jumped over the lazy dog.</span>
	<span style="width: 300px; margin-left: 100px; padding: 3px 3px 3px 3px;
	background-color: lightgreen">Now is the time for all good men to come to the aid of their country. The quick fox jumped over the lazy dog.</span>
	</div>