DailyJS

DailyJS

The JavaScript blog.


Tagtextarea
Featured

ui mobile textarea shims

Object.observe Shim, Behave, Snap.js

Posted on .

Object.observe Shim

It's encouraging to see Harmony taking on board influences from databinding frameworks, given how important they're proving to be to front-end development. The proposed Object.observer API aims to improve the way respond to changes in objects:

Today, JavaScript framework which provide databinding typically create objects wrapping the real data, or require objects being databound to be modified to buy in to databinding. The first case leads to increased working set and more complex user model, and the second leads to siloing of databinding frameworks. A solution to this is to provide a runtime capability to observe changes to an object

Fran├žois de Campredon sent in KapIT's Object.observe shim (GitHub: KapIT / observe-shim, License: Apache), which implements the algorithm described by the proposal. It's compatible with ECMAScript 5 browsers, and depends on a method called ObserveUtils.defineObservableProperties for setting up the properties you're interested in observing. The readme has more documentation and build instructions.

Behave.js

Behave.js (GitHub: jakiestfu / Behave.js, License: MIT) by Jacob Kelley is library for adding IDE-like behaviour to a textarea. It doesn't have any dependencies, and has impressive browser support. Key features include hard and soft tabs, bracket insertion, and automatic and multiline indentation.

Basic usage is simply:

var editor = new Behave({  
  textarea: document.getElementById('myTextarea')
});

There is also a function for binding events to Behave -- the events are all documented in the readme, and include things like key presses and lifecycle events.

Snap.js

Snap.js (GitHub: jakiestfu / Snap.js, License: MIT) also by Jacob is another dependency-free UI component. This one is for creating mobile-style navigation menus that appear when clicking a button or dragging the entire view. It uses CSS3 transitions, and has an event-based API so it's easy to hook it into existing interfaces.

The drag events use 'slide intent', which allows an integer to be specified (slideIntent) to control the angle at which a gesture is considered horizontal. Jacob has included helpful documentation on how to structure and style a suitable layout for the plugin:

Two absolute elements, one to represent all the content, and another to represent all the drawers. The content has a higher z-index than the drawers. Within the drawers element, it's direct children should represent the containers for the drawers, these should be fixed or absolute.

He has lots of other useful client-side projects on GitHub/jakiestfu.

Featured

jquery plugins images touchscreen zoom textarea

jQuery Roundup: 1.9, Touch-box, Elevate Zoom, textareaHelper

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.9

jQuery 1.9 has been released. This version retains legacy browser support, but "slims down" the API somewhat. jQuery 2.0 meanwhile will not support Internet Explorer 6-8, but it will have the same API.

jQuery Migrate can be used to migrate to 1.9 or 2.0.

Touch-box

Dannie Hansen sent in Touch-box (GitHub: danniehansen / Touch-box, License: GPL), a plugin for resizing and dragging elements on touchscreen devices. Although the documentation mentions iPad, I tested it on Android Chrome and both seemed to work well.

Dannie suggested an interesting idea for a gallery, where the resize event could automatically cause higher resolution images to be fetched through a callback:

$('.box').TouchBox({
  resize: true,
  drag: true,
  callback_touches: function(touches) {
  },
  callback_change: function() {
  }
});

Elevate Zoom

Elevate Zoom's tint feature.

Elevate Zoom (GitHub: elevateweb / elevatezoom, License: MIT/GPL) by Andy Eades is an image zoom plugin that has FancyBox support. It has some cool features like "tinting", where the unzoomed portion of the image is tinted -- demos are available for each of the main features.

textareaHelper

textareaHelper by Amjad Masad and Codecademy transparently copies a textarea's contents into a div, so it can be manipulated in ways not supported by textarea. It will try to copy the styles from the textarea as well, and can fetch the caret's position.

Mocha tests have been included, which includes a setSelectionRange implementation to test the caret handling.