JSFiddle

  • Virtual Keyboard Playground

    https://github.com/Mottie/Keyboard

    var simulateTyping = "Hello World!!1\b";
    
    $('#keyboard').keyboard({
        // *** choose layout & positioning ***
        // choose from 'qwerty', 'alpha', 'international', 'dvorak', 'num' or
        // 'custom' (to use the customLayout below)
        layout: 'qwerty',
        customLayout: {
            'default': [
                'd e f a u l t',
                '{meta1} {meta2} {accept} {cancel}'
                ],
            'meta1': [
                'm y m e t a 1',
                '{meta1} {meta2} {accept} {cancel}'
                ],
            'meta2': [
                'M Y M E T A 2',
                '{meta1} {meta2} {accept} {cancel}'
                ]
        },
        // Used by jQuery UI position utility
        position: {
            of: null, // null = attach to input/textarea; use $(sel) to attach elsewhere
            my: 'center top',
            at: 'center ...
  • Tablesorter demo

    All options included, as well as the uitheme widget

    $('table').tablesorter({
    
        // *** APPEARANCE ***
        // Add a theme - try 'blackice', 'blue', 'dark', 'default'
        //  'dropbox', 'green', 'grey' or 'ice'
        // to use 'bootstrap' or ...
  • AnythingSlider playground

    Add, remove, adjust any or all options so you can see how it works.

    $('#slider').anythingSlider({
    
        // *********** Appearance ***********
        // Theme name; choose from: minimalist-round, minimalist-square, metallic, construction, cs-portfolio
        theme: 'minimalist-round',
        // If true, the entire slider will ...
  • AnythingZoomer 2.0 playground

    Add, remove, adjust any or all options so you can see how it works.

    $("#zoom1").anythingZoomer({
        
        // ***************** content areas *****************
        // class of small content area; the element with this class
        // name must be inside of the ...
  • Fullscreen Background HTML5 Video #1 is the latest revision

    Made easy!

    $(function(){
        $(window).load(function(){
            // Helper function to Fill and Center the HTML5 Video
            $('video, object').maximage('maxcover');
        });
    });
  • Maximage: Randomize Slides

    jQuery 1.7, HTML, CSS, JavaScript

    $(function() {
        var imgs = $('#maximage img');
        imgs.sort(function() { return 0.5 - Math.random() });
        $('#maximage').html( imgs );
        
        $('#maximage').maximage({
            cycleOptions: {
                speed ...
  • Visual Nav Demo

    External Links in the menu

    $('#sidemenu').visualNav({
        // target the .menu class in the menu
        link : 'a.menu'
    });
  • 3#.Address book - Design it & Code it

    jQuery 1.7.1, HTML, CSS, JavaScript

    /* 
     * 3#. Adress book - "Design it & Code it"
     * Author: Idered <http://idered.pl>, IderedPL[at]gmail[dot]com
     *
     * Please don't repost source of this on websites, instead give a link.
     * Thanks for Nijikokun <http://forr.st/-Nijikokun>, added 'provider function'
     * try this in input: provider:gmail 
     */
    (function($) {
    
      // Search function for search input
      $.fn.liveSearch = function(list, exclude) {
        var input = $(this),
          regexp = {
            provider: /provider:([a-zA-Z0-9\.\-\_]+)/i,
            email: /\@([a-zA-z0-9\-\_\.]+)/i
          },
          elements = list.children().not(exclude),
          filter = function() {
            var term = input.val().toLowerCase();
    
            elements.show().filter(function() {
              var text = $(this).text().toLowerCase(),
                open = term.replace(regexp.provider, '').trim ...
  • 1#. User panel - Design it & Code it

    jQuery 1.7.1, HTML, CSS, JavaScript

    /* 
     * #1. User panel - "Design it & Code it"
     * Author: Idered <http://idered.pl>, IderedPL[at]gmail[dot]com
     *
     * Please don't repost source of this on websites, instead give a link.
    */
    
    $("form input[type=submit]").click(function(event){
        event.preventDefault();
    });
    
  • Some Responsive Designs

    Note the folders are denoted with an illusion of multiple images. When the width of the screen is expanded or contracted the design alters.

    <div class="pictures">
        <div class="pic">
            <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/SmithTower_Seattle_WA_USA.jpg/800px-SmithTower_Seattle_WA_USA.jpg">
            </b><h3>Slinging Beer</h3>
            <p>Six Arms, Pine St, Seattle</p>
        </div>
        <div class="pic pics">
            <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_Navy_050803-N-0975R-007_The_guided_missile_frigate_USS_Crommelin_%28FFG_37%29%2C_rounds_the_bend_as_part_of_the_55th_Annual_Seafair_Parade_of_Ships.jpg/800px-US_Navy_050803-N-0975R-007_The_guided_missile_frigate_USS_Crommelin_%28FFG_37%29%2C_rounds_the_bend_as_part_of_the_55th_Annual_Seafair_Parade_of_Ships.jpg">
            </b><h3>Us after a night out</h3>
            <p>IHOP, Madison St, Seattle</p>
        </div>
        <div class="pic">
            <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Smith_Tower_mailbox_01.jpg/800px-Smith_Tower_mailbox_01.jpg">
            </b><h3>My Cat is Meeowing ...</h3></div></div>