iScroll 4 on mobile devices

iScroll is used to scroll contents inside a fixed width/height element.

Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile. Doesn’t work on IE!

Features:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

How to include iScroll in your project:

Step 1. Download the JS file on iScroll 4 page.

Step 2. The HTML markup

You can add how many iScrolls you want in a page, but remember to initialize every one of them. Try to keep the DOM structure as simple as possible.

<div id="wrapper">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

In this example, the wrapper is static, and the ul is the scrolling element. If you want to have multiple scrolling elements, you need to nest them in a single element, because only the first child of the wrapper element is scrolled. For that you have the following example:

<div id="wrapper">
  <div class="scroller">
    <ul>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Step 3. The initialization

Even if the demos you download on iScroll 4 have a different initialization, use the following (because on mobile devices, the header will be fixed with the initialization in the demos):

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
  var myScroll;
  function loaded() {
    myScroll = new iScroll('wrapper');
  }
  document.addEventListener('DOMContentLoaded', loaded, false);
</script>

You can find a series of examples and the documentation of iScroll on their official page.

Some User Friendly Captchas

Captcha is some test that we must pass to ensure that the answer wasn’t generated by a computer, only by a human. Usualy, the captchas represent some random text that you must reproduce, but I’ve prepared a collection of other type of captchas, more user-friendly ones.

1. jQuery fancy Draggable Captcha

In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 or the letters from A to F into order.

Documentation & Download

2. AJAX fancy Captcha – jQuery Plugin

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. In order to “verify humanity” you are asked to drag and drop specified item into a circle. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.

Documentation & Download

3. buttonCaptcha

jQuery.buttonCaptcha – is a plugin, that protects your site from robots using jQuery. Hint for the demo: the name of the site is gobwas.com

Documentation & Download

4. QapTcha

QapTcha is a draggable jQuery captcha system with jQuery UI ! A draggable jQuery captcha system. As the user – we will only need to move the slider to confirm that we are human.

Documentation & Download

Elastic Textarea jQuery plugin

Elastic makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook.

Attention! The css property ‘max-height’ will affect Elastic. Scrollbars will appear when the content is bigger than the set max height.

The usage of Elastic is very straight forward. All you have to do is to include Jquery and the javascript file containing the plugin and use the elastic function.

1. The HTML

<textarea id="description">This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.</textarea>

2. The CSS

textarea {
  padding: 10px;
  width: 300px;
  font-family: Arial, 'sans-serif';
}

3. The JS

$('#description').elastic();

Demo & Documentation

Hide label when focus on input

Here is a way to hide a label when you focus on an input. There are many ways to do that, but I’ve used a label positioned absolute over the input, and some jQuery to hide and show it.

Demo

1. The HTML

<form>
  <div class="form-row">
    <label for="click_here" class="label-hide">Click here</label>
    <input type="text" id="click_here" class="label-over"/>
  </div>
</form>

2. The CSS

.form-row { position: relative; }
.label-hide {
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: Arial;
}
input {
  height: 15px;
  line-height: 15px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #cecece;
}

3. The jQuery

$(function() {
  $('.label-over').focus(function() {
    $('label.label-hide[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label.label-hide[for="' + $(this)[0].id + '"]').show();
    }
  });
});