JSFiddle

  • Dates Equal

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

    var a,b,equal
    
    a = new Date(1995,11,17);
    b = new Date(1995,11,17);
    equal = a.getTime() === b ...
  • jQuery Any

    jQuery 2.2.4, HTML, CSS, JavaScript

    jQuery.fn.any = function(filter){ 
    	for (i=0 ; i<this.length ; i++) {
      	 if (filter.call(this[i])) return true;
      }
      return ...
  • Required Field Validation

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

    <table>
      <thead>
        <tr>
          <th>State</th>
          <th>Opt A</th>
          <th>Opt B <span class="required">*</span></th>
          <th>Opt C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Initial</td>
          <td>
              <label for="">Name:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
          <td>
              <label for="">Name<span class="required">*</span>:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
          <td>
              <label for="">Name:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
        </tr>
    
        <tr>
          <td>Dirty - Invalid</td>
          <td>
              <label for="">Name:</label>
              <input type="text" class="invalid"><br/>
              <span class="val-msg">Name field is required</span>
          </td>
          <td>
              <label for="">Name<span class="required">*</span>:</label>
              <input type="text" class="invalid"><br/>
              <span class="val-msg">Name ...</span></br/></td></tr></tbody></table>
  • Checkbox List

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

    <form action="">
    
      <div>
        <input type="checkbox" name="Fruits[0].Selected" value="A" id="A"/>
        <input type="hidden" name="Fruits[0].Value" value="A"/>
        <label for="A" >A</label>
      </div>
      <div>
        <input type="checkbox" name="Fruits[1].Selected" value="B" id="B"/>
        <input type="hidden" name="Fruits[1].Value" value="B"/>
        <label for="B" >B</label>
      </div>  
      <div>
        <input type="checkbox" name="Fruits[2].Selected" value="C" id="C"/>
        <input type="hidden" name="Fruits[2].Value" value="C"/>
        <label for="C" >C</label>
      </div>
    
      <input type="submit" value="Submit" />
      
    </form>
    
    
    
    
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
        About this SO question:
        <a href='http://stackoverflow.com/q/37778489/1366033'>
            How to make Check Box List in ASP.Net MVC
        </a>
    </div>
  • 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>