AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

Mootools Idle Spy - Detecting the idle status

Our mission as programmers is to take care of our users and our server resources. Ajax applications tend to make constant requests to the server, and even if you change to another window or tab often the apps continue to run wasting CPU, bandwidth and other server resources.

Imagine an application like Gmail, that is constantly checking if there are new mails on the server for display, plus updating every minute the dates in time ago format to show the elapsed time since the receipt of mail. If we change to other tab, many of these actions should stop until you get back. If like me you use to open dozens of tabs at once and in a browser such as Firefox(memory greedy), be sure that the apps that do not optimize their resources will eventually saturate the browser.

Today I bring IdleSpy a Mootools class that monitors mouse and keyboard events to determine whether the user is interacting with the page and establish a state of idle to stop certain actions or send a message and alert the user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

  var IdleSpy = new Class({
    Implements: [Options, Events],
 
    options: {
      idleTime: 60000 //1 min
    },
 
    initialize: function(options) {
      this.setOptions(options);
      this.idle = false;
 
      document.id(document.body).addEvents({
        'mousemove': this.doBack.bind(this),
        'mousewheel': this.doBack.bind(this),
        'keydown': this.doBack.bind(this)
      });
    },
 
    start: function() {
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    },
 
    doBack: function() {
      if (this.idleTimer) {
        $clear(this.idleTimer);
      }
      if (this.idle) {
        this.idle = false;
        this.fireEvent('back');
      }
      this.start();
    },
 
    doIdle: function() {
      this.idle = true;
      this.fireEvent('idle');
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    }
  });

The class is simple to use, create an instance by passing as parameter the time in milliseconds to consider the state of idle and we can hear the events back and idle or be notified when the user returns to interact with the page.

1
2
3
4
5
6
7
8
9
10

 var idleSpy = new IdleSpy({
   idleTime: 300000
 });
 
 idleSpy.addEvents({
   'idle': function() { /* on user idle code here */ },
   'back': function() { /* on user back code here */ }
 });
 
 idleSpy.start();

For other AJAX frameworks:

• YUI: Detecting if the user is idle with JavaScript and YUI 3
• jQuery: jQuery idleTimer plugin
• Prototype: Simple JavaScript Idle State using Prototype

I haven’t tested it enough yet, so I wait for your comments

Update 1: Added mousewheel event to the spy
Update 2: Fixed bug pointed by eneko, added this.start() to the onBack
If you want to check what I am working on now, then follow me at twitter @aartiles24

PNG Fix for IE6 with Mootools - e24PNGFix

I use to lost about 2-3 hours a day fixing bugs at Internet Explorer 6. IE6 puts us in the disyuntiva of limit our creativity or lost the IE6 users quote.

One of the main problems of IE6 is its incompatibility with transparent PNGs. This is solved by one of its filters, so far I had used FixPNG of ClientCide, but I found a limitation when applying an opacity transition effect to a transparent PNG in IE6 or IE7, either with or Tween Morph.

FixPNG fixes the PNG transparency problem adding this css filter:

1
2
3
4
5
6
7
8
9
10
11
12
13

var replacement = new Element('span', {
	id:(el.id)?el.id:'',
	'class':(el.className)?el.className:'',
	title:(el.title)?el.title:(el.alt)?el.alt:'',
	styles: {
		display: vis?'inline-block':'none',
		width: dim.x,
		height: dim.y,
		filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" 
			+ el.src + "', sizingMethod='scale');"
	},
	src: el.src
});

That is OK, but the problem is that when we change the opacity of an element in Internet Explorer with Mootools, this making it through the same filter CSS property.

1

if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';

I have developed my own FixPNG to solve some of my animations while Mootools as ClientCide fixes the yours.

To use e24PNGFix, the images should be placed as a background using css, ie:

1

<div id="myimg"  style="background: url(img/myimg.png) no-repeat"></div>

And then we can fix the PNG adding the following javascript sentence:

1

Browser.fixPNG('myimg');

The script at least meets my needs, you are free to use it or not, here I leave with you the e24FixPNG source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*
 e24PNGFix
	- MooTools version required: 1.2.2
	Changelog:
		- 1.0: First release
*/
 
/*Based on the fixPNG module from MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006-2007 Valerio Proietti, <http://mad4milk.net>, MIT Style License.||Clientcide Copyright (c) 2006-2008, http://www.clientcide.com/wiki/cnet-libraries#license*/
/* Copyright: equipo24 S.L.N.E <http://equipo24.com/> - Distributed under MIT License - Keep this message! */
 
$extend(Browser, {
	fixPNG: function(el) {
		if (Browser.Engine.trident){
			el = document.id(el);
			var w = el.getStyle('width');
			var h = el.getStyle('height');
			var imgURL = el.getStyle('background');
			if (imgURL.test(/\((.+)\)/)){
				el.setStyle('background', '');
 
				var subEl = new Element('div', {
					'style': 'width: ' + w + ';' +
					'height: ' + h + ';' +
					"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.match(/\((.+)\)/)[1] + "');"							
				});	
				el.grab(subEl);							
			};
		}
	}
});

In the next post going to introduce e24WalkerFx effect, which uses e24PNGFix to fix transparent PNGs on Internet Explorer.

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

Mootools 1.2.3 and Clientcide 2.1.0 Released Today

Today have been released mootools 1.2.3, the last step before release the 2.0 version. It is mainly a set of bug fixes, but have a new great feature for frameworks compatibility.

Although it is not recommended to use different frameworks at the same page, it is true that there are cases that we can’t control that, like plug-in developers that don’t use to know where their plug-ins will be used. The solution is very simple, just change the $ by document.id().

Before:

1

var el = $('myid');

And now can be:

1

var el = document.id('myid');

Today have been also release Clientcide 2.1.0, which main change is the deprecation of $ for compatibility with other frameworks.

So, now i will need 15 minutes to upgrade all my plug-ins.

Source: mootools blog

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

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

Attract the user’s attention using e24SpotLight for mootools

Introduction
e24SpotLight is a plug-in for Mootools that lets attract the user’s attention over a region. The effect simulates a lights off letting only the desired region illuminated.

Demos
Demo1: Selecting an object
Demo2: Selecting a region
Demo3: e24Presenter + e24SpotLight

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, Fx.Transitions, Fx.Morph and all its dependencies. Also include e24SpotLight library:

1
2

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

Now write the necessary HTML code to init the spotlight. We need to pass an options object. We will see the rest of the options in detail below.

1
2
3
4
5
6
7
8
9

	var spotLight = new e24SpotLight({
		transition: 'quad:in',
		duration: 200,
		zindex: 5,
		bgcolor: '#000000',
		opacity: 0.7,
		margin: 8,
		delay: 2000
	});

If we want to activate a DOM element given its Id or object reference then use this code:

1

  spotLight.lightOn('mydiv');

If we want to activate a region given its coordinates and dimensions then use this code:

1

  spotLight.lightOn({left: 100, top: 150, width: 300, height: 300});

Options

• transition: The effect transition name, like: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• duration: The duration in milliseconds of spotlight effect.
• zindex: The overlays layer’s z-index.
• bgcolor: The overlays layer’s color.
• opacity: The overlays layer’s opacity.
• margin: The ligth region desired margin.
• delay: The delay in milliseconds to hide the overlays layer. If the delay is zero the overlay layer never will be hidden, only will be hidden if you click the overlay.

Methods

• lightOn: Lights the region or DOM object. If we want to light a DOM object then we have to pass the element ID or the DOM object reference. If we want to illuminate a region then we have to pass the region coordinates and dimensions in this {left: 100, top: 150, width: 300, height: 300}.
• lightOff: Hides the overlay.

Known Issues
I can’t see nothing to improve for now, but i am open to hear your feedback.

License
Distributed under MIT License

Download
e24SpotLight 1.0 (27 KB, includes the demos)

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

e24BubbleFx - Photo bubble transition effect

Introduction
e24BubbleFx is a plugin for Mootools that makes a transition between two photos. The transition comes in form of a bubble that move around the back picture discovering it.
But better we see it in action with the following demos.

Demos
Demo1: Basic
Demo2: Advanced

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, Fx.Transitions, Fx.Tween and all its dependencies. Also include e24BubbleFx library:

1
2

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

Now write the necessary HTML code to define the effect container. We will need a container layer (“visor” in this case). This layer will have the image background that will appear while the animation executes. You must take into account that this background image will appear directly in case that javascript is disabled, so that this effect will degrade gracefully.

Then we have to add a very basic CSS rules for the container layer. We just have to define the dimensions and the background image.

1
2
3
4
5
6

#visor {
	position:relative;
	width:1000px;
	height:250px;
	background: url(img/back1.jpg) no-repeat;
}

Next we have to write the necessary javascript code. We need to pass an options object. The main option is the “container” that has to point to the container layer id, “visor” in this case. We will see the rest of the options in detail below.
Finally we have to call the start method with an array of coordinates that will describe the bubble steps.

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

	var bubbleFx = new e24BubbleFx({
		container: 'visor',
		width: 1000,
		height: 250,
		initStep: {x:0, w:100},
		img: 'img/back2.jpg',
		transition: 'quad:out',
		infinite: false
	});
 
	discoverFx.start([
		{x:200, w:520, d1:800, d2:1100},
		{x:350, w:270, d1:800, d2:800},
		{x:0, w:230, d1:800, d2:1100},
		{x:250, w:530, d1:800, d2:1100},
		{x:300, w:700, d1:800, d2:1100}
	]);

Options

• container: The container layer id
• backImg: The background image, the same that you have to define with a css rule for the container layer
• frontImg: The front image
• width: The visor’s width
• height: The visor’s height
• transition: The effect transition name, like: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• stepDuration: The duration in milliseconds of each step. Note that you can overwrite that value at step level with the start method
• infinity: (true/false) If is true the animation will repeat infinitely.
• infiniteDelay: The delay in milliseconds to restart the animation in case that the infinity option be active
• initStep: {x:0, w:0} The initial setting for the effect, where x is the bubble position and w is the bubble width

Events

• onStep: function(index). This event fires at each animation step and gets the step index a the unique param. The first index is zero
• onComplete: function(). This event fires at the end of the animation. In case of infinity be set to true the event will fires at each cycle

Methods

• start: Begin the animation. Recives an array of coordinates a param. You should to take into account that this effect is about a bubble moving that lets discover the back image, then these coordinates define the position and width for the bubble at each step. Also you can define the steps duration for each bubble’s wall.
  • x: the bubble distance from the left side of the container layer
  • w: the bubble’s width
  • d1: the duration in milliseconds of the bubble’s left wall
  • d2: the duration in milliseconds of the bubble’s right wall
  ^?View Code JAVASCRIPT

  1 2 3 4 5 6 7

  discoverFx.start([ {x:200, w:520, d1:800, d2:1100}, {x:350, w:270, d1:800, d2:800}, {x:0, w:230, d1:800, d2:1100}, {x:250, w:530, d1:800, d2:1100}, {x:300, w:700, d1:800, d2:1100} ]);

• safeStart: Similar to start but begins the effect after all the required images are preloaded. NOTE: This method require to include mootools-1.2.2.1-more.js with the component Asset
• cancel: Cancels the effect

Known Issues

• Ability to make the transition between more than two images
• To make the effect vertical

License
Distributed under MIT License

Download
e24BubbleFx 1.0RC (218 KB, includes the demos)

Remember that the heart of this effect is the bubble’s step coordinates, so a creative combination of steps can result in a cool effect. I invite you to share your steps combination.

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

Monperla.es – Web totalmente Ajax desarrollada con prototype y scriptaculous

Since we began to post in this blog, we have been offering components and techniques to develop a site using Ajax. Today we are going to put everything together and we see how to get results that some time age was only possible using Flash.

The study case is Monperla, an online shop that sells pearl jewelry, now we only going to see the main corporate web since the new store is still under development.

If you have read this blog before you will note that the main aspect on this web is our e24Squares Ajax gallery component. This effect have been integrated in a way that each page is related to one image on the gallery and then when you load a new page the related image loads trough the e24Squares effect.

As you see each page loads asynchronically appearing with a fade effect. One important thing on this site is that we have take care of it to degrade gracefully when javascript is disable, then it going to be indexed by the search engines correctly. To accomplish that we have use the techniques explained in the post where we commented about the onDomReady event.

As we have remarked on previous posts, the ajax web sites use to have problems with the back button, then we have used the protoHistoryManager component released some days ago.

This site has other traditional Ajax effects like lighboxes, image rollovers, Font size increaser for accessibility, etc.

I hope this help to all of you that asked for practical examples of our components and tricks. Be free to notify me if you found any problem on the web site and let me know the browser version.

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

Ajaxigg - All the news about the AJAX’s world

equipo24 is glad to announce the release of  Ajaxigg. Ajaxigg is project similar to digg.com and meneame.es where the users can share news, components and resources about the Ajax’s world. On Ajaxigg the users decide which news are more relevant trough its vote system.

In this moment it is only available in Spanish but will be in English very soon.

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

Async ajax calls, the key for the web2.0 search engines

The Ajax’s main feature is the async call possibility, it lets serve results without interrupt the user experience on the page. This is the main key for today’s web2.0 search engines.
Here you have some good examples that make our life easy:

• Minube - Fly search engine
• Shopall
• AjaxLookup Domain Whois

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

AJAX History Manager, back button fix

One of the major issues on AJAX web applications is the accesibility and usability lacks. Many users have manies and don¡t undestands about AJAX, they only expects that if they click the back button then it must works as always and get them back to the previous screen.

Digitarald.de have developed a solution HistoryManager - The Ajax Back-Button (v1.0) for  Mootools   developers. You can test some samples there and also I have implementerd it on my company web www.equipo24.com

But I also use to develop using Prototype so I have rewritten that library using Prototype, the usage is very similar to the original library.

Download prototype.historyManager.js

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