AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

Monitor the scroll with e24ScrollEvents for mootools

Introduction
David Walsh released his ScrollSpy plug-in some days ago. It have almost the same objectives as e24ScrollEvents. By then i had e24ScrollEvents almost finished for one of my projects. I didn’t stop working on it since it have some added values that makes it very easy to use. So, you are free to compare both plug-ins and use the one that best fits your needs.

e24ScrollEvents is a plug-in for Mootools that lets detect which elements are visible inside an scrolling area. To accomplish this it adds two new events to the Element core class. Theses events get fired when the elements are visible or hidden.

Demos
Demo1: Ajax Photo Gallery
Demo2: Basic Demo

Usage
Include Mootools 1.2.2 Core inside the HTML header. Remember that you can generate an optimum version of the mootools library selecting only the required components at Mootools Core Builder. The required components are DOMReady, Element.Dimensions, Element.Style, Element.Events, Class.Extras and all its dependencies. Also include e24ScrollEvents library:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24scrollevents-1.0.js" type="text/javascript"></script>

Now write the necessary HTML code to begin to listen the scroll position. First we have to add the “visible” and “hidden” event handlers. Lets say that we have two elements “el1″ and “el2″ that we want to get notified whenever appear or disappear in the scrolling area.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var el1 = $('el1');
el1.addEvents({
	'visible': function() {
		el1.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el1.setStyle('border', 'none');
	}
});	
 
var el2 = $('el2');
el2.addEvents({
	'visible': function() {
		el2.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el2.setStyle('border', 'none');
	}
});

After that we have to create an e24ScrollEvents instance passing an options object as param. The options are: the container element (if we want to monitor the whole page the use “window”), the mode (vertical or horizontal) and an array with elements that we want to subscribe to the “visible” and “hidden” events.

1
2
3
4
5

new e24ScrollEvents({
	container: window,
	mode: 'vertical',
	elements: ['el1', 'el2']
});

Options

• container: The id of the scrolling area. If we want to monitor the page scroll, then we have to set it as window.
• mode: The scroll bar that we want to monitor: vertical or horizontal.
• elements: An array with the elements that we want to subscribe to the visible y hidden events. The mootools selectors can help you a lot with this task. ie. $$(’.myelements’).

Methos

• listenScroll: Fires the “visible” and “hidden” events depending of the elements visibility inside the scrolling area. This method is useful only if we want to check the elements visibility before you begin to move the scroll, for example, just after you add the new event handlers.

New Element Events

• visible: Fires when the element appear inside the visible area. Gets as params the element itself and the scroll position.
• hidden: Fires when the element disappear from the visible area. Gets as params the element itself and the scroll position.

Known Issues

• Monitor the horizontal scroll and the vertical scroll at the same time. I didn’t need that for my project, but i can be useful.

License
Distributed under MIT License

Download
e24ScrollEvents 1.0 (38.8 KB, includes the demos)

If you want to check what I am working on now, then follow me at twitter @aartiles24

Copyright 2009. AJAX24. Powered by equipo24

• Inicio
• Ajaxigg
• About
• Contact