JSFiddle

  • Get deep properties dynamically

    This is meant for use with Underscore's "groupBy" method, when you're using an iterator function to sort by a deeper property.

    
    var myButton = document.getElementById('my-button'),
    		myResults = document.getElementById('my-results');
    
    var myObject = {
    	one: {
      	two: {
        	three: 'This is the string you want ...
  • Vue 2.0 Hello World

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

    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
    
    var app2 = new Vue({
    	el:'#app-2',
    	data: {
    		message: 'You loaded this ...
  • SpectrumJS Example

    Just playing around with it, and throttling the move event.

    $("#picker").spectrum({
      color: "#f00"//,
      /*move: function(evt, tinycolor) {
    		console.log(['move()', tinycolor]);
      },
      show: function(evt, tinycolor) {
    		console.log(['show()', tinycolor ...
  • jQuery UI Custom Autocomplete

    _renderItemData is internal, and you don't want to override it. You don't even want to encounter it, really. This custom widget avoids that trouble.

    var myDataArray = [
    {label:'Stuff', value:'01'},
    {label:'Things', value:'02'},
    {label:'Whatevs', value:'03'},
    {label:'Doodads', value:'04'},
    {label:'Dinglehoppers ...
  • Wait for All Deferreds to Resolve

    Doing some stuff when each Deferred Object resolves, and doing some other stuff only when ALL of them have resolved.

    /*
    Putting the deferred objects into a parent object just to keep things tidy. Adding them to an array because that ...
  • Height of a div's contents.

    Get the height of the content inside the content container.

    
    
    // The content takes up more height than the content container.
    // So how tall is it?
    $(".total-height").html( $('.content').outerHeight(true ...
  • Run JS at the end of a CSS3 transition

    Identifying the browser's event for the end of a CSS transition, and tossing that into a jQuery listener.

    // Inspired by: https://davidwalsh.name/css-animation-callback
    
    var toggle = true;
    
    
    $( "body" ).on( "click", function() {
    	var pos = (toggle) ? '0px' : '100px';
    	$('ul').css ...
  • Center images without knowing their sizes

    Due to a weird situation at work (caused by the Marketing Department) I have to do this clunky thing to get images centered with CSS alone.

    <ul>
      <li>
        <div class="fake-table">
          <div class="fake-row">
            <div class="fake-cell">
              <img src="https://placekitten.com/87/28">
            </div>
          </div>
        </div>
        <span>* * * * *</span>
      </li>
    </ul>
    <ul>
      <li>
        <div class="fake-table">
          <div class="fake-row">
            <div class="fake-cell">
              <img src="https://placekitten.com/87/28">
            </div>
          </div>
        </div>
        <span>* * * * *</span>
      </li>
    </ul>
    <ul>
      <li>
        <div class="fake-table">
          <div class="fake-row">
            <div class="fake-cell">
              <img src="https://placekitten.com/87/28">
            </div>
          </div>
        </div>
        <span>* * * * *</span>
      </li>
    </ul>
    
  • AngularJS with Two Data Sources #17 is the latest revision

    Telling AngularJS to wait up while multiple data sources come in.

    angular.module("myApp", []);
    /*
    I like the above declaration better than the var="myAPP" pattern because we're just doing everything ...
  • Show and Hide Content

    Sort of like tabs, but independent of markup. Shows corresponding content when a link is clicked.

    function contentGroup($controllers, $contentEls, doEach) {
    	// http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5
      $controllers.on( "click", function(event) {
      	event.preventDefault();
        
      	// Saving "$(this ...