JSFiddle

  • select multiple w/o Ctrl

    jQuery 1.7.1, HTML, CSS, JavaScript

    $('select[multiple] option').mousedown(function(e) {
        e.preventDefault();
        this.selected = !this.selected;
        return false;
    });
  • HTML Select Options

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

    <h3>Single Select</h3>
    <select>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    
    <h3>Multi Select</h3>
    <select multiple="multiple">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
        Further Reading:
        <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select'>
            MDN - <code>&lt;select&gt;</code>
        </a>
    </div>
  • HTML Date Box is Weird

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

    <input type="Date" name="DateType" value="1/1/2017 12:00:00 AM"><br/>
    <input type="Date" name="DateType" value="1/1/2017">            <br/>
    <input type="Date" name="DateType" value="01/01/2017">          <br/>
    <input type="Date" name="DateType" value="2017-01-01">          <br/><br/>
    
    
    Browser Compatability Screenshots:<br/>
    <img src="http://i.imgur.com/MBdcbL7.png" alt="Date Box Example">
    
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
        Further Reading:
        <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date'>
            MDN - <code>&lt;input type=&quot;date&quot;&gt;</code>
        </a>
    </div>
    
  • jQuery UI Dialog Missing Button MCVE

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

    $(function() {
      $("#dialog").dialog();
    });
  • Table Spans

    jQuery 2.2.4, HTML, CSS, JavaScript

    // invoke function
    SummerizeTable('#myTable');
    
    function SummerizeTable(table) {
      $(table).each(function() {
        $(table).find('td').each(function() {
          var $this = $(this);
          var col ...
  • AIM Logo

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

    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking -->
    <img src="http://i.imgur.com/a2Hgv9H.jpg" alt="">
    
    <svg version="1.1" 
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="290" height="76">
      <defs>
          <linearGradient id="blueGradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="black"/>
            <stop offset="15%" stop-color="blue"/>
            <stop offset="85%" stop-color="blue"/>
            <stop offset="100%" stop-color="black"/>
          </linearGradient>
      </defs>
      
      <rect width="100%" height="100%" fill="white" />
      <rect width="100%" height="12px" fill="url(#blueGradient)" y="65" />
      <rect width="100%" height="15px" fill="black" />
      <rect width="20px" height="100%" fill="black" />
      
      
      <text x="55" y="10" fill="white" font-size="10">
        AGENCY OF HUMAN SERVICES
      </text>
      <text x="-65" y="12" fill="white" font-size="10"
      transform="rotate(-90)" >
        VERMONT
      </text>
      <text x="165" y="30" fill="black" font-size="12">
        <tspan>Agency Improvement</tspan>
        <tspan dy="15" dx="-65">Model</tspan>
      </text>
      <text x="60" y="62" fill="black" font-size="7" 
            style="font-family:monospace">
        CUSTOMER FOCUSED SYSTEMS CHANGE
      </text>
      <text x="105" y="72" fill="white" font-size="6" 
            style="font-style:italic;">
        The good, the bad, and the ugly
      </text>
      <text x="65" y="53" fill="#0200f7" stroke="black" stroke-width="2"
            font-size="46" style="font-family:sans-serif;">
        AIM
      </text>
      
      <g id="bullseye" transform="translate(47,40)">
        <circle r="1" fill="black" stroke="none" stroke-width="3"/>
        <circle r="5" fill="none" stroke="black" stroke-width="3"/>
        <circle r="10" fill="none" stroke="black" stroke-width="3"/>
      </g>
    </svg>
    
  • Test Adjustment #1 is the latest revision

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

    function confirmNavigationToAdjust() {
    
    
    }
  • SVG Masks #2 is the latest revision

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

    No code. How about adding some?
  • Strava Logo

    http://stackoverflow.com/a/22581434/1366033

    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking -->
    <img src="http://i.imgur.com/vmnRUXO.png" alt="">
    <svg version="1.1" 
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewbox="0 0 200 200">
      <defs>
        <mask id="tri-hole" >
          <rect width="100%" height="100%" fill="white"/>
          <polygon transform="translate(0,-40) rotate(0)"
                   points="0,0 68,0 34,68"
                   fill="black" stroke="none" />
          
        </mask>
      </defs>
    
      <rect width="100%" height="100%" fill="#fd5100"/>
          
      <!-- Clockwise x,y from 0,0 top right -->
      <polygon transform="translate(135.7,112)rotate(180)scale(1.35)"
          points="0,0 68,0 34,68"
          fill="white" stroke="none" 
          mask="url(#tri-hole)"
          />
      <polygon transform="translate(88.2,112)rotate(0)scale(1)"
          points="0,0 68,0 34,68"
          fill="#ffae89" stroke="none" 
          mask="url(#tri-hole)"
          />
    
    </svg>
    
  • CSS Toggle #2 is the latest revision

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

    <input type='checkbox' id="toggle">
    <label for="toggle">Click Here</label>
    <div>
        Hello. This is some stuff.
    </div>