JSFiddle

  • Simple Generator Example

    jQuery 2.2.3, HTML, CSS, JavaScript

    $("#first").click(function(){
    	davidGenerator.next("David");
    	console.log("*** First clicked.  Keep going. ***");
    	$("#first").prop("disabled", true); // Prevent a second click ...
  • Shuffle Letters

    When my son's assignment involves me shuffling his spelling words for him, it seems reasonable to write code.

    // Define a list of words.
    		var words = [
    			"dish",
    			"cherries",
    			"teachers",
    			"box",
    			"branches",
    			"supplies",
    			"tear",
    			"cherry",
    			"class",
    			"working",
    			"classes",
    			"family",
    			"boxes ...
  • How to Fix CMS

    Unwrap lots of divs.

    var divs = 42;
    
    // First, CMS wraps our element in unnecessary divs.
    for (i = 0; i < divs; i++) {
      $("#wrapMeUp").wrap("<div class='repeatedContainer container" + i + "'></div>");
    }
    var count = $(".repeatedContainer").length;
    $("#divsCount ...
  • How CMS Works

    Make lots of divs.

    var divs = 42;
    
    for (i = 0; i < divs; i++) {
      $("#wrapMeUp").wrap("<div class='container" + i + "'></div>");
    }
    
  • Unwrap #2 is the latest revision

    jQuery 1.11.0, HTML, CSS, JavaScript

    //$(".table-responsive > div").
    
    $(".table").unwrap();
  • What's the word on h1?

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Document Title</h1>
    <section>
      <h1>Section 1 Title</h1>
      <p>Text.  Text text text.</p>
    </section>
    <section>
      <h1>Section 2 Title</h1>
      <p>Text for you is here.</p>
    </section>
  • Specificity

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>
      CSS Specificity
    </h1>
    <div class="nav">
      <li>
        <a href="http://www.jcoulson.com">One</a>
      </li>
      <li>
        <a href="http://www.fatherofsamwise.com" class="green">Two</a>
      </li>
      <li>
        <a href="http://www.npr.org" class="blue">Three</a>
      </li>
    </div>
    
    <p>More about specificity: </p>
    <ul>
      <li><a href="https://specificity.keegan.st/">Specificity Calculator</a></li>
      <li><a href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/">Things You Should Know</a></li>
    </ul>
  • How CMS Works

    Make lots of divs.

    var divs = 42;
    
    for (i = 0; i < divs; i++) {
      $("#wrapMeUp").wrap("<div class='container" + i + "'></div>");
    }
    
  • Remove onmouseover

    No-Library (pure JS), HTML, CSS, JavaScript

    document.getElementById("test").onmouseover = function() {
    	alert("hello");
    }
    
    document.getElementById("btnTest").addEventListener("click", function() {
    	document.getElementById("test").onmouseover = null;
    });
    
  • JavaScript Namespace 1 #10 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var jeremy = (function() {
    	var TestVariable1;
      function TestVariable2(data) {
      	return data.toUpperCase();
      }
      function TestVariableDay() {
      	var d = new Date();
        var weekday = new ...