JSFiddle

  • Element.closestById #5 is the latest revision

    jQuery 1.6.4, HTML, CSS, JavaScript

    var startJQ = $( '#start' ),
        startDOM = $( '#start' )[0];
    
    Element.prototype.closestById = function( id )
    {
       
        if( this.parentNode.nodeType == Node.ELEMENT_NODE )
        {        
            
            return this.getAttribute ...
  • CSS3 circular div with hover expand #701 is the latest revision

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

    <div></div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23915674-6']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript ...</script>
  • OS X reflection

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

    <img id="image" src="http://media.tumblr.com/themes/wide/zZDKXHHEkH4oMFpi.png" /><br />
    <div>
    <img id="reflection" src="http://media.tumblr.com/themes/wide/zZDKXHHEkH4oMFpi.png" />
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23915674-6']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript ...</script>
  • simpleGeo

    jQuery 1.6.3, HTML, CSS, JavaScript

    var context = new simplegeo.ContextClient('zczcnr2WbFbUMXCUCJXPujZ2AuVp55wz');
    
    function displayData(err, data) {
    
        if (err) { 
            $("#debug").html( err );
        } else {
            $("#debug").html(JSON.stringify ...
  • geolocation #134 is the latest revision

    jQuery 1.6.3, HTML, CSS, JavaScript

    function doGeo( position ) 
    {
        
        $( "#lat" ).html("lat: " + position.coords.latitude );
        $( "#lon" ).html("lon: " + position.coords.longitude );
        $( "#acc" ).html("acc: " + position.coords ...
  • HTML5 <canvas> grid #1433 is the latest revision

    jQuery 1.7, HTML, CSS, JavaScript

    var c_canvas = document.getElementById("c");
    var context = c_canvas.getContext("2d");
    
    for (var x = 0.5; x < 501; x += 10) {
      context ...
  • Centered Div #603 is the latest revision

    Exactly screen-centered div, pure CSS. Requires no knowledge of div size or setting any CSS attributes outside of the centering frame. Requires only five attributes. Works in all major browsers.

    <div class="center"><div>This is a centered div.</div></div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23915674-6']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement ...</script>
  • circular div #365 is the latest revision

    jQuery 1.7, HTML, CSS, JavaScript

    <div id="circle"><div>This is a circular div</div></div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23915674-6']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement ...</script>
  • Circular Divs with hover and expand #127 is the latest revision

    Handles clicking/hovering outside the circle. Finds optimal interior space for text using some trig.

    //help from: http://stackoverflow.com/users/684890/james-khoury
    
    //setup
    $( ".circle" ).each( function() {
     
        var radius = $( this ).outerWidth() / 2,
            left = $( this ).offset ...