JSFiddle

  • Draggable Content

    jQuery 2.1.0, HTML, CSS, JavaScript

    $('.draggable').draggable();
  • flip cards #8 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    var flashcards_data = [{
        word: "cat"
    }, {
        word: "dog"
    }, {
        word: "mouse"
    }, {
        word: "hen"
    }, {
        word: "bird"
    }, {
        word: "fish"
    }, {
        word: "squirrel"
    }, {
        word: "bat"
    }];
    
    var flashcards ...
  • Vertical Carousel Slider

    jQuery 1.8.3, HTML, CSS, JavaScript

    var counter = 0;
    var images = $('#slider .container > a').length;
    var nitems = images - 1;
    
    function doslider(){
        counter++;
    	var imgid = Math.abs ...
  • Carousel Slider #7 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    var counter = 0;
    var images = $('#slider .container > a').length;
    var nitems = images - 1;
    
    $('.container').width( $('#slider img:first-child').width() * images ...
  • Fade Slider #20 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    $("#slider a").hide();
    $("#slider a:first-child").show();
    
    var counter = 0;
    var images = $('#slider .container > a').length;
    var imgload = 0;
    
    function ...
  • Image to Base64 #9 is the latest revision

    Image requires CORS Allow permission if not from the same domain. Should be OK for Phonegap if the domain is whitelisted.

    var img = 'http://s3-ap-southeast-1.amazonaws.com/dino-devtest/necktie.jpg';
    
    var oReq = new XMLHttpRequest();
    oReq.open("GET", img, true);
    oReq.responseType ...
  • Javascript Screensaver #449 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    var mousetimeout;
    var screensaver_active = false;
    var idletime = 5;
    
    function show_screensaver(){
        $('#screensaver').fadeIn();
        screensaver_active = true;
        screensaver_animation();
    }
    
    function stop_screensaver(){
        $('#screensaver').fadeOut();
        screensaver_active ...
  • Parking Lot and Tooltip

    jQuery 1.8.3, HTML, CSS, JavaScript, jQuery UI 1.9.2

    var data = {
        'lot1': { 
            'desc':'Parking Boss',
            'lot':'Lot 1'
        },
        'lot2': { 'desc':'Parking Bini Boss', 'lot': 'Lot 2' },
        'lot3': { 'desc':'Yang ...
  • Collapsible 2-Tier Side Menu

    Suitable for table of content

        
        $('ul#toc li').each(function(){
            $(this).css( 'height', parseInt( $(this).find('a').css('height') ) + 2 +'px');
        });
    
    $('ul#toc ul').each ...
  • Swap Places

    jQuery 1.9.1, HTML, CSS, JavaScript

    var lleft = 0;
    var order = [1,2,3,4,5,6,7];
    $('li').each(function(){
        $(this).css('left',lleft+'px ...