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.

PictureSlider

PictureSlider allows you to create an unobtrusive and easy-to-control picture preview box, controlled by two arrows on the sides, or by keyboard. O ...

Router

Router provides methods for routing client-side pages, and connecting them to actions and events based on hashchange event, written in MooTools. ...

Accessible Sortable List

...

data-mootools

// eg markup: <a href='#' data-title='hi there' data-tip-position='left'>link</a> // make data attributes in all links available to ele ...

Twipsy

This is a port of Twitters twipsy for Bootstrag to mootools. It includes all features of the original, including a Twipsy object for custom integra ...

InlineSuggest

Add auto-suggest functionality to any input or textarea.Suggestions are made inline as selected text which can be accepted by hitting tab or enter, ...

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