AnythingZoomer playground

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

by Mottie

HTML

<link rel="stylesheet" href="//css-tricks.github.io/AnythingZoomer/css/anythingzoomer.css">
<script src="//css-tricks.github.io/AnythingZoomer/js/jquery.anythingzoomer.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard-basic.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<div class="ui-content">
  <div class="zoom">
    <div class="small">
      <input class="ssid" type="text" placeholder="Network Name" value="This is a test" />
    </div>
  </div>
</div>

CSS

/* Text Demo */

.large {
  width: 800px;
}

.large * {
  font-size: 32px;
}

.small {
  width: 300px;
  font-size: 8px;
}

.az-zoom {
  width: 250px;
  height: 250px;
  border-radius: 125px;
}


/* fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
 */

.large {
  background: #fff;
}

.zoom {
  display: block;
  margin: 0 auto;
}

body {
  margin: 200px;
}

JavaScript

$(function() {
  var useOnce = false;
  $('.zoom')
    .on('zoom', function() {
      // update large input value when zoom window opens
      $('.large input').val($('.ssid').val());
      useOnce = false;
    })
    .on('focus', '.large input', function() {
      if (!useOnce) {
        var $this = $(this);
        setTimeout(function() {
          var keyboard = $('.ssid').data('keyboard'),
            pos = $.keyboard.caret($this);
          keyboard.reveal();
          $(".zoom").anythingZoomer('disable');
          $.keyboard.caret(keyboard.$el, pos.start, pos.end);
        }, 100);
        useOnce = true;
      }
    });

  $('.ssid').keyboard({
    usePreview: false,
    layout: 'custom',
    initialFocus: true,
    keyBinding: 'mousedown touchstart',
    appendTo: $('.ui-content'),
    autoAccept: true,
    stickyShift: false,
    css: {
      container: 'ui-widget-content ui-widget ui-helper-clearfix'
    },
    display: {
      bksp: '\u2190',
      accept: 'done',
      'default': 'ABC',
      meta1: '.?123',
      meta2: '#+='
    },
    customLayout: {
      'default': [
        'q w e r t y u i o p {bksp}',
        'a s d f g h j k l {enter}',
        '{s} z x c v b n m , . {s}',
        '{meta1} {space} {meta1} {accept}'
      ],
      shift: [
        'Q W E R T Y U I O P {bksp}',
        'A S D F G H J K L {enter}',
        '{s} Z X C V B N M ! ? {s}',
        '{meta1} {space} {meta1} {accept}'
      ],
      meta1: [
        '1 2 3 4 5 6 7 8 9 0 {bksp}',
        '- / : ; ( ) \u20ac & @ {enter}',
        '{meta2} . , ? ! \' " {meta2}',
        '{default} {space} {default} {accept}'
      ],
      meta2: [
        '[ ] { } # % ^ * + = {bksp}',
        '_ \ | ~ < > $ \u00a3 \u00a5 {enter}',
        '{meta1} . , ? ! \' " {meta1}',
        '{default} {space} {default} {accept}'
      ]
    },
    hidden: function() {
      $(".zoom").anythingZoomer('enable');
      $(".zoom").data("zoomer").hideZoom();
    }
  });
});

$(".zoom").anythingZoomer({
 ...