JSFiddle

  • Fun with CSS

    A bit of fun with a design I made entitled "Fun with CSS". The design personified the CSS states of an anchor, and thus I thought why not show it in action.

    <body>
        <div class="center">
            <a href="#" alt="Fun with CSS" class="fun">Fun with CSS</a>
        </div>
    </body>
  • Download Button Sprite #1 is the latest revision

    A Download Button that I designed and implemented using a CSS Sprite that has a different default, hover, and active design for each state.

    <body>
        <div class="center">
            <a href="#" alt="Download" class="button">Download</a>
        </div>
    </body>
  • Gradient Text Stroke

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

    // Gradient Text Stroke
    
    
    // CSS: Only WebKit, has to be a known solid background.
    
    // SVG: Cross-Browser, can have any background
    
  • Inline Image Sprite

    An inline image sprite with a single img tag.

    <p>This is an inline image<br>
        which <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==" width="30" height="30" style="border: #666 solid 1px; background: -88px -223px url('http://ssl.gstatic.com/gb/images/j_f11bbae9.png');"> is made from an image sprite. Very cool huh?</p>
    
    <p>For IE &lt; 8 the image ...</p>
  • Local storage Backbone #1 is the latest revision

    Di coba

    var init = new Backbone.Collection([
        {
            "title":"test",
            "completed":false,
            "order":1,
            "id":"1244f588-be3d-c493-5c86-b2abb997af82"
        },
        {
            "title":"test2",
            "completed":false,
            "order":2,
            "id ...
  • XSockets (Azure) & Wijmo

    Took @bannon ´s demo from aspconf and added XSockets.

    //XSockets API-Key Example
    var xsLiveAccount = {
        apikey: '73ddd261-2e21-455d-9b94-89d6bdc8ad1c'
    };
    var ws = null;
    
    // when document loads, create ViewModel, and apply bindings
    //Person class ...
  • To-Do List

    jQuery 1.5.2, HTML, CSS, JavaScript

    // Make sure that the error state element is hidden.
    $(".ui-state-error").hide();
    
    // Call the button widget method on the login button ...
  • To-Do List

    jQuery 1.5.2, HTML, CSS, JavaScript

    // Setup our tabs and cache the jQuery Object to be reused.
    var $tabs = $("#tabs").tabs({
    
        // tabTemplate: HTML template from which ...
  • jQuery.boxFx test case : Stream Twitter w/ JSONP #1 is the latest revision

    More infos : https://github.com/molokoloco/jQuery.boxFx

    $(document).ready(function(){ // PAGE DOM READY, CUSTOM SCRIPT EXAMPLE
        
        ///////////////////////////////////////////////////////////////////////////////
        // Data for filling the template is provided by a function with ...
  • Multiple form entries

    Experimental UX for entering multiple entries of the same object. Uses Backbone and localStorage to persist data. Won't work in IE9-

    $(function() {
        // Pet model
        var Pet = Backbone.Model.extend({
            name: '',
            breed: '',
            type: ''
        });
    
        // Pets collection
        // This collection is persisted via localStorage
        var ...