JSFiddle

  • Stack Fixed Bottom #11 is the latest revision

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

    <div class="bottom-ish">Bottom-Ish</div>
    <div class="bottom-est">Bottom-Est</div>
  • 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 #3 is the latest revision

    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 ...