Quick Demo

As web information overload is becoming more and more present in everyday navigation, we have to deal with complex-architecture in which external elements – such as advertising – can seriously decrease user attention on a single lecture.

For this reason i created Content Impress as a class for MooTools: it’s based on the simple concept of hiding what is not strictly necessary to user’s view.

In practice it gets a DOM element and surrounds it with a customizable overlay in color and opacity.

The main situations i imagined are two:

• Highligh a single element per time on mouse hover;
• Highligh with a simple button;

In both case the syntax is really simple.

First case: direct use

MooTools JS

var el = document.id('toImpress');
el.impress();

Or you can use it by toggling a button:

var impress = new Impress({
			opacity: .9,
			color: '#333',
			onClose: function()
			{
				activeButton.setStyle('backgroundColor', '#eee'); //restore state
			}
		});

Note that at this point you’ve created a template for frames that will be created around content to highlight.

Next step is to add a listener on a button and calling the toggle(element) method to Impress the content.

Assuming you have a button just inside the DOM element to highlight:

myExampleButton.addEvent('click', function()
{
      impress.toggle(this.getParent()); //highlight the div that contains the button
});

That is!

The version is a launching beta, tested on IE7+ and others modern browsers.

DocumentationDemo: ButtonDownload