JSFiddle

  • Tumblr placeholder for video with autoplay

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

    {block:VideoThumbnail}
                <div style="cursor:pointer;width:100%;height:7px;padding-bottom:56.25%;display:block;background:url({JSVideoThumbnailURL});background-repeat: no-repeat;background-size:cover;background-position: center center;" onclick="p=new DOMParser();d=p.parseFromString({JSVideo-700}, 'text/html');c=d.getElementsByTagName('iframe')[0];c.src=c.src+'&autoplay=1';this.outerHTML=c.outerHTML"/><div class="playicon"></div></div>
                {/block:VideoThumbnail}
  • Disabled button on save and cursor indicate progress

    jQuery 2.1.0, HTML, CSS, JavaScript

    <a class="button" onclick="$('body').addClass('loading'); $(this).addClass('disabled');">Save</a>
  • Aspect ratio responsive Image #14 is the latest revision

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

    <div class="test-div">
        <div class="test-div-inner">
            <img class="test-image" src="http://i.imgur.com/v7uAZid.jpg"/>
        </div>
    </div>
  • Image side by side inside a padding box #19 is the latest revision

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

    <div class="paper">
        <div class="title">Breaking the padding</div>
        <img src="http://microbians.com/files/cache/salariman2.768x432_1.jpg"/>
        <div class="caption">Image side by side inside a padding box</div>
    </div>
  • Cut long links

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

    <div style="width:300px"><p><a href="/es/kukka-ilvesniemi" title="Kukka Ilvesniemi">@kukka-ilvesniemi</a> ¿sigues teniendo problemas? Veo que ya estás haciendo el curso de <a href="/es/stereoplastika" title="Stereoplastika">@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>. Gracias por comentar esto en el foro ...</p></div>
  • Single button uploader (stylized input)

    jQuery 1.4.4, HTML, CSS, JavaScript

    $("#file").live("change",function(){
        var count = 0;
        for ( i = 0; i < this.files.length; i++ ) {
            var tmpObj = this.files[i ...
  • Mail OS X / Avoid address autodetection link

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

    Just intercalate before spaces<br/>
    <textarea style="width:100%"><span style="opacity:0">&amp;zwj;</span></textarea>
    <br/>
    555<span style="opacity:0">&zwj;</span> 55nd<span style="opacity:0">&zwj;</span> St,<span style="opacity:0">&zwj;</span> San<span style="opacity:0">&zwj;</span> City,<span style="opacity:0">&zwj;</span> XX
  • Custom photoset size (bigger than 700) for Tumblr

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

    <script type="text/javascript" charset="utf-8">
    //<!--
                    fotoLayoutIn={JSPhotosetLayout};
                    fotoLayout=[];
                    fotoCount=0;
                    for (i=0;i<fotoLayoutIn.length;i++){
                        num=fotoLayoutIn[i];
                        for (j=0;j<num;j++){
                            fotoLayout.push(parseInt(num));
                        }
                    }
                    str='';
    {block:Photos}
                    var divisor=fotoLayout[fotoCount];
                    var maxWidth=768;
                    var w=Math.round(maxWidth/divisor);
                    var h=Math.round((maxWidth/divisor)*{PhotoHeight-500}/{PhotoWidth-500});
    
    {block:LinkURL}
                    str+='<a href="'+{JSLinkURL}+'">';
    {block:LinkURL}
    
                    str += '<img src="'+{JSPhotoURL-1280}+'" width="'+w+'" height="'+h+'" alt=""/>';
                    var photoURL = {JSPhotoURL-1280};
    {block:LinkURL}
                    str+='</a>';
    {block:LinkURL}
                    fotoCount++;
    {/block:Photos}
                    document.write(str);
    //-->
    </script>
    
  • microbians custom scroll

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

    <p>
        This is an scroll I was using at http://microbians.com
        for a long time.<br/>
        This is an scroll I ...</br/></p>
  • Fake ellipsis #1 is the latest revision

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

    // We change the content of the :after generated element to use an actual ellipsis and apply a transparent-to-white gradient background ...