JSFiddle

  • !This is !important!

    Checking out specificity and how !important things can be. EVEN YOU can override an inline style!

    <div id="thingamabob" class="dinglehopper" style="background-color:#BADA55;">
    Stuff
    </div>  
    
  • Pipes betwen list items

    Neat CSS selector that Alyssa Nicoll posted on Twitter.

    <p>This is a neat CSS selector that I got from <a href="https://twitter.com/AlyssaNicoll/status/781677466096140288" target="_blank">Alyssa Nicoll on Twitter.</a></p>
    <ul>
    
    <li>Stuff</li>
    <li>Things</li>
    <li>Doodads</li>
    <li>Dinglehoppers</li>
    </ul>
  • jQuery draggable with limits

    Responsive horizontal nav menu that only drags to its edges. Still not totally happy with the right side. Might round off the list items to keep fractions out of the mix.

    var accum_width = 0;
    $('ul > li').each(function() {
    	var myWidth = Math.ceil( $(this)[0].getBoundingClientRect().width );
      //$(this).width(myWidth);
      console.log ...
  • Basic jQuery plugin with old version 1.6.2

    Needed to make an example with an older version for work.

    // Put into a closure as an IIFE to protect the dollar sign
    (function($) {
    	// Protected variables could go here, inside the ...
  • Some Event Objects to Study

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

    $('#container').on('click', function(event){
    	console.log(' ');
    	console.log('Something was clicked.');
      console.log(event);
    });
    
    $('#container').on('change', function(event ...
  • Handlebars Example

    Nothing fancy, just playing around.

    var source = $("#my-template").html(); 
    var template = Handlebars.compile(source); 
    
    var data = {
    	jedi: [
      	{
        first:'Obi Wan',
        last: 'Kenobi'
        },
      	{
        first:'Yoda',
        last ...
  • Notes about jQuery Deferred Objects

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

    // These can each resolve on their own.
    var dfd_one   = $.Deferred(),
    		dfd_two   = $.Deferred();
    
    // Run this whenever the first deferred object resolves ...
  • Toggle second inline input

    Goes from a full-width input to a couple of inline half-width inputs, gutter included. Triggered with a button, shown/hidden with CSS.

    $( "button" ).on( "click", function() {
      $('.wrapper').toggleClass('both');
    });
  • Simple Content Filter

    Reductive filter for when you have a bunch of divs and you want to find one with a partial name.

    $( "#myInput" ).keyup(function() {
        
        /* Grab the input content and set it to lowercase. */
        var inputText = $(this).val().toLowerCase();
    
       /* On each keyUp ...
  • Typeahead with 2 Datasets

    Filter a Bloodhound dataset dynamically. Sort results according to cagegory.

    // https://twitter.github.io/typeahead.js/examples/
    
    var dudes = [
    {name:'Albert', age:25, hair:'blonde'},
    {name:'Allen', age:26, hair ...