JSFiddle

  • 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>
    
    
  • James Logo #2 is the latest revision

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

    <img src="http://i.imgur.com/etEUSCw.png" alt="">
    <svg width="312" height="242" xmlns="http://www.w3.org/2000/svg">
      
      <path d="M85 70 h 30"  stroke="#a6a17d" stroke-width="4"/>
      <path d="M75 85 h 30"  stroke="#5f6151" stroke-width="4"/>
      <path d="M85 100 h 30" stroke="#a6a17d" stroke-width="4"/>
      
      <path d="M227 70 h -30"  stroke="#a6a17d" stroke-width="4"/>
      <path d="M237 85 h -30"  stroke="#5f6151" stroke-width="4"/>
      <path d="M227 100 h -30" stroke="#a6a17d" stroke-width="4"/>
      
      <path d="M130 40 l -25 45 l 25 45" stroke-width="4"
            stroke="#5f6151" fill="transparent" />
      <path d="M182 40 l 25 45 l -25 45" stroke-width="4"
            stroke="#5f6151" fill="transparent" />
      
      <text x="50%" text-anchor="middle" 
            y="35%" alignment-baseline="middle"
            font-family="Verdana" font-size="45" fill="#5f6151">
            J
      </text>  
      <text x="50%" text-anchor="middle" 
            y="65%" alignment-baseline="middle"
            font-family="Tahoma" font-size="35" fill="#5f6151">
            James Productions
      </text>
      <text x="50%" text-anchor="middle"
            y="80%" alignment-baseline="middle"
            font-family="Segoe UI" font-size="20" fill="#b2ae90">
        From Concept to Creation
      </text>
    </svg>
  • Stylized Groups

    jQuery 2.2.4, HTML, CSS, JavaScript

    var $boxes = $(".box");
    
    $boxes.each(function(i, el) {
      // leave on first one
      if (i === 0) return;
      
      // get elements
      $prev = $($boxes ...
  • Drag and Drop to Inside a Form #9 is the latest revision

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

    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
      ev.preventDefault ...
  • jQuery Data Tables Broken #3 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    /* Create an array with the values of all the checkboxes in a column */
    $.fn.dataTable.ext.order['dom-checkbox'] = function(settings ...
  • anchor onclick preventdefault

    jQuery 3.1.1, HTML, CSS, JavaScript

    $("body").on("click", "a", function(e) { e.preventDefault() });
  • Open Action Result in New page

    jQuery 1.9.1, HTML, CSS, JavaScript

    $("#btn").click(function({
    	openInNewTab('SATIS/Reports/Client?id=7startDate=5');
      // get params from page with $.param()
      // create new Action GET ...
  • Grid Test #1 is the latest revision

    Working on dynamic resizing for http://kylemitofsky.com/united-shapes-of-america/index.html

    <img src="http://i.imgur.com/MwbgrPF.png" class="background">
    
    <a href="http://stackoverflow.com/">
      <img src="http://placehold.it/350x150" class="top-left" >
    </a>