Code
Mootools
Focus panel

CONIVA is an application to save you time in creating and managing quotes and invoices. It provides functions to control payments and to automatically notify clients in case they miss a payment. The application is ideally suited for small companies. English, German and Spanish are currently supported. CONIVA costs 60€ per year. Read more about it here.

Resources

Script CSynFocusPanel
Create mootools library

Mootools Plugins

Following you find some of the mootools plugins published under http:// mootools.net/forge/browse.

Number3D

The smallest part of an 3D engine. ;o) ...

InlineEditor

InlineEditor allows any text element to be made editable. The user clicks on it, and it turns into a textbox with a save and cancel button. On save ...

mootools-trackinstances

Creates an instances array property for a class, to contain all of its instances. The array can be used to alter all instances at once, for example ...

MooStorage

This Class supplies an interface for a cross-browser local storage. For browsers that support this feature (FF2+, IE5+, Safari 4+) it will use the ...

autosave

This Class supplies the basic interface for creating a form autosaver. Whem attached, the class will priodicaly save the field's data. Also, when i ...

Event.Mock

This little wrapper creates a Mock Event object to be used with fire event. ...

Description

This class is intended to call a visitors attention to one element (e.g. a header graphic). After having captured the visitors attention the element reduces its appearance to further conduct the readers interest to other site contents.

For the visitors convenience the header state is stored in a cookie. The element is just focused to in case the cookie is absent. For testing purpos the elements cookie might be erased by pressing the shift key while clicking on to the control element.

Through the CSS styles focuspanel, focuspanel-small and focuspanel-big the control elements visual aspect might be adjusted.

Usage

Create a mootools library containing the following modules: Core, Browser, Array, Function, Hash, String, Number, Event, Class, Class.Extras, Element, Element.Event, Element.Style, Cookie, Fx, Fx.CSS, Fx.Tween
Add the script from this class to your site
Create a focus panel for the element

Source code

The resulting source code from your page might look like this:

<script type="text/javascript" src="../mootools_v1.2.1.js"></script>
<script type="text/javascript" src="../CSynFocusPanel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
<!--
window.addEvent('domready',function(){
  var HeaderPanel = new CSynFocusPanel('header',{
    property: 'height',
    bigValue: 400,
    smallValue: 120,
    delay: 3000,
    duration: 1000,
    cookieLifeTime: 1,
    aAuxId: ['nav','mainwrap','footer']
  });
});
// -->
/*]]>*/
</script>

Options

Name	Description
property	The style property to be used for focusing the element
bigValue	The value assigned to the property when the element is focused
smallValue	The value assigned to the property when the element isn't focused
delay (ms)	During this time the element is shown focused (bigValue assigned to property)
duration (ms)	The effect speed
cookieLifeTime (day)	Time for the cookie to be active
aAuxId	An array holding the elements beeing hidden during the first time focusing

Focus Panel