Just think of having an element in a scrollable parent (the CSS property overflow is set to scroll) and you want to test whether the element is visible or not.

Using this little function you can do the trick:

function isInView(node){
            var offsetParent = node.offsetParent;
            var top = offsetParent.scrollTop;
            var height = offsetParent.offsetHeight;
            var y = node.offsetTop;
            return y >= top && y <= (top + height);
}

And here’s a small use case – this one scrolls the element into the visible region, if it is not already in the view:

if(!isInView(element)) {
            element.scrollIntoView();
}

After having used the shiny new YUI3 library for a project, it’s about time to share my YUI3 experiences with you.
For the project I built an item selector: A modal dialog is openend and the user has to select an item. After selection the dialog is closed and the selected item is passed to a callback function.

Here you can find the full source for the item selector. An example to use the selector can be as simple as this:

ms.ItemSelector.selectItem(['Bart', 'Lisa', 'Homer', 'Marge', 'Maggie', 'Ned', 'Barney', 'Bob'], function(item){
  alert(item + ' is your favorite character.');
});

Just click on the following button, to start the example. Enjoy and let me know your comments.

Just in case you don’t already know it: Quince – calls itself an UX Patterns Explorer and that’s just what it is.

You want to improve the user experience of your applications? Just take a look at this marble. It contains a large number of design patterns for creating great user interfaces.

Even the exploration part of this tool is innovative: The patterns are not only ordered alphabetically by name but can be found by the tasks the user wants to accomplish.

For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.
The following example shows what I mean:

The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:

var itemDeleter = new Extensive.grid.ItemDeleter();
 
var grid = new Ext.grid.GridPanel({
        store: people,
        cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
            header: 'First name',
            width: 100,
            dataIndex: 'firstName'
        }, {
            header: 'Last name',
            width: 150,
            dataIndex: 'lastName'
        }, itemDeleter]),
        selModel: itemDeleter,
        autoHeight: true
});

Note that the itemDeleter instance must be added to the ColumnModel and set as selModel to work properly.

If you’re interested in learning ExtJS and by accident know some German, I can recommend you read an article I wrote together with my colleague Stefan Botzenhart. The article is called ‘Kombiniert: Ruby on Rails und Ext JS‘ and is published in the famous German IT magazine iX in their actual special edition called Web on Rails.

In the article we explain the implementation of meinkabinett, a web application where people can vote celebrities for the European government. The implementation uses a rich front-end written in ExtJS and is driven by a Ruby on Rails back-end.