Hi,

i’ve created a little script for highlighting an element onComplete of the Mootools’ SmoothScroll.
I’ve also added a line to highlight the selected anchor onload, in case the url already contains the anchor hash on page load.

Here it is:

Mootools 1.1 Version:

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
40
41
42
43
44
45

window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color' aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined'){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
		var fx = new Fx.Styles(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') && $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') && $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});

Mootools 1.2 version:

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
40
41
42
43
44
45
46
47
48

 
window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(item_id=='') return false;
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined' || $$(item_id)[0].id==''){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
 
		var fx = new Fx.Morph(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') && $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') && $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});

You can check it working here.
Hope it will get useful for someone ;)

[del.icio.us] [Digg] [Facebook] [Twitter]
Posted in development, how-tos, javascript, mootools | No Comments »

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.