JSFiddle

  • Spectrum From Master

    A working demo of the latest version of spectrum colorpicker

    $("#full").spectrum({
        color: "#ECC",
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum ...
  • expandingTextarea in Table

    jQuery 2.0.2, HTML, CSS, JavaScript

    <textarea class="expanding" rows="1">Foo</textarea>
  • Spectrum From Master #2 is the latest revision

    A working demo of the latest version of spectrum colorpicker

       $("#css_1").spectrum({
                        preferredFormat: "rgb"
                        ,showAlpha: true
                        ,showPalette: true
                        ,togglePaletteOnly: true
                     //   ,color: $(this).val() // spectrum tries to find the value, no ...
  • Gradients

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

    <h1>Some different types of gradients</h1>
    
    <div>
    <div class="grad">
        basic:<br />
        linear-gradient(to right, red 0%, yellow 100%);
    </div>
    <div class="grad">
        pixel stops:<br />
        linear-gradient(to right, red 10px ...</div></div>
  • Spectrum From Master

    A working demo of the latest version of spectrum colorpicker

    
    $("#full").spectrum({
        color: "#000000",
        preferredFormat: "hex",
        showAlpha:true,
        move: function(color) {
            var rgba = color;
            console.log('rgba: '+rgba+', alpha: '+color ...
  • Pseudo element testing

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

    var nextStyle = "";
    document.querySelector("button").addEventListener("click", function() {
        var style = document.querySelector("style");
        var f = style.innerHTML;
        style.innerHTML = nextStyle ...
  • HTML5 SVG Logo #1 is the latest revision

    jQuery 1.5, HTML, CSS, JavaScript

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <title>HTML5 Logo</title>
      
      <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512             "/>
      <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894             "/>
      <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
      <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
      <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
      <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
      <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
      <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
      <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
      <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
    <svg>
  • icon and text

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

    <div class="my-fancy-container">
        <span class='icon icon-file-text my-icon'></span>
        <span class="my-text">Hello World</span>
    </div>
    
  • Spectrum From Master

    A working demo of the latest version of spectrum colorpicker

    $(".basic").spectrum({
        color: "#f00",
        clickoutFiresChange: true,
        change: function(color) {
            $("#basic-log").text("change called: " + color.toHexString());
        }
    });
    
    
    $(document).on("click.spectrum", function ...
  • expandingTextarea in Table #4 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    $("textarea").expanding()