JSFiddle

  • Diamond

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

    <div id="diamond">
  • Diamond

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

    <div id="diamond">
  • Diamond #1 is the latest revision

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

    <div id="diamond">
  • Multi-direction hover

    Mootools 1.4.2, HTML, CSS, JavaScript

    // Created by http://twitter.com/#!/kizmarh
  • Marker Size in gMaps

    jQuery 1.6.2, HTML, CSS, JavaScript

    var $message_area = jQuery('#results');
    
    
    jQuery(document).ready(function() {
        $message_area.html('<i>Locating you...</i>  ');
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
            // Find location ...
  • Canvas Test

    Mootools 1.4.2, HTML, CSS, JavaScript

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,200,100);
    
    var ...
  • Canvas Test

    Mootools 1.4.2, HTML, CSS, JavaScript

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,200,100);
    
    var ...
  • Canvas Test #11 is the latest revision

    Mootools 1.4.2, HTML, CSS, JavaScript

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,200,100);
    
    var ...
  • Percent Bar #37 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div class="barcontainer"> 
        <div class="bar darkpink left"style="width:8.3%"> 
            <div class="bar info over">8.3% <br/>Dark Pink</div>
        </div>
        <div class="bar pink"style="width:8.3%"> 
            <div class="bar info under">8.3% <br/>Pink</div>
        </div>
        <div class="bar blue"style="width:8.3%"> 
            <div class="bar info over">8.3% <br/>Blue</div>
        </div>
        <div class="bar lightblue"style="width:8.3%"> 
            <div class="bar info under">8.3% <br/>Light Blue</div>
        </div>   
        <div class="bar turquoise"style="width:8.3%"> 
            <div class="bar info over">8.3% <br/>Turquoise</div>
        </div>
        <div class="bar purple"style="width:8.3%"> 
            <div class="bar info under">8.3% <br/>Purple ...</br/></div></div></div>
  • Canvas Plasma effect #8 is the latest revision

    Canvas Plasma effect

    ig = document.getElementById("c");
    ig.width = 320;
    ig.height = 240;
    
    // dammit opera...
    if (!("createImageData" in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.createImageData ...
  • Percent Bar #237 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div class="barcontainer">
        <div class="bar orange left"style="width:25%">
            <div class="bar info over">25% <br/>HTML & CSS</div>
        </div>
        <div class="bar green"style="width:5%">
            <div class="bar info under">5%<br/>Javascript</div>
        </div>
        <div class="bar blue"style="width:40%">
            <div class="bar info over">40%<br/>Thinking</div>
        </div>
        <div class="bar pink"style="width:10%;">
            <div class="bar info under">10%<br/>Dreaming</div>
        </div>        
    </div>
    <div class="barcontainer">
        <div class="bar orange left"style="width:2%">
            <div class="bar info over">2% <br/>Coming up with idea</div>
        </div>
        <div class="bar green"style="width:98%">
            <div class="bar info under">98%<br/>Spray-painting 5000 booklets</div>
        </div>       
    </div>