TechTrouts.com » mootools http://techtrouts.com Doin' the dev dance o/ Thu, 23 Jul 2009 10:42:09 +0000 en hourly 1 http://wordpress.org/?v=3.0 JS_Growl: Mootools based Javascript Growl-like notifications http://techtrouts.com/js_growl-mootools-based-javascript-growl-like-notifications/ http://techtrouts.com/js_growl-mootools-based-javascript-growl-like-notifications/#comments Thu, 24 Jul 2008 17:53:49 +0000 Carlos Ouro http://techtrouts.com/js_growl-mootools-based-javascript-growl-like-notifications/ Hello,

For our current project we required some neat instant user notifications, therefore we created a simple Growl-inspired notification system using Mootools.

Now updated for IE6 compatibility!

Download it here!

The package contains a sample.html very self-explanatory for most users;

Just include the js_growl.js and the js_growl.css files in your page’s header and send a user notification whenever you need using:

JS_Growl.notify('Your text or content html goes here.');

Any bugs/features just give me a comment, i’ll check it out ;)

]]> http://techtrouts.com/js_growl-mootools-based-javascript-growl-like-notifications/feed/ 5 mootools: how to drag through icon (two items simultaneously) http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/ http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/#comments Fri, 11 Jul 2008 15:44:16 +0000 Carlos Ouro http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/ If you have a box (div) and a dragging icon (a anchor) on it, and you want to drag the box by clicking on the icon you just have to make the box draggable and set the handle of the drag to the icon.

Here it is, for:

1
2
3

<div id="example">
	<a id="drag_button" style="cursor:pointer;cursor:hand;">Drag</a>
</div>

Just use:

$('example').makeDraggable({handle:$('drag_button')});

Notes on IE:
The drag button element “<a>” can’t take href=”#” and can’t contain an image, as it will make it draggable by windows and will not work as supposed.
If you require to insert an image into it then use it as a background image for the drag button element, and set the element’s height and width according to the image for proper appearance:

1
2
3
4
5

<p id="example">
<div id="example">
	<div id="drag_button" style="background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;">
	</div>
</div>
]]> http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/feed/ 0 Mootools: nice portfolio by 9tree using kwicks (Fx.Elements) and slides http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/ http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/#comments Tue, 24 Jun 2008 16:05:26 +0000 Carlos Ouro http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/ Hello,

I’m just finishing our new website and i’ve been posting here the effects i’ve created for it.
This one is a little more “show off”;
It’s the way we’ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images.
You can check how it works here.

Using this html:

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

<div>	
	<div id="kwicks_pics">
		<a href="http://4hsa.pt" class="kwicks_pic">
		    <img src="images/portfolio/4hsa_big.png"/>
		  </a>
			<a href="http://techtrouts.com" class="kwicks_pic">
		    <img src="images/portfolio/techtrouts_big.png"/>
		  </a>
			<a href="http://webandcookies.com" class="kwicks_pic">
		    <img src="images/portfolio/wac_big.png"/>
		  </a>
	</div>
	<div id="kwicks">
	  <a href="http://4hsa.pt" rel="image" class="kwick">
	    <img src="images/portfolio/4hsa1.png" title="4HSA - Qualidade e Seguran&ccedil;a Alimentar" alt="4HSA - Qualidade e Seguran&ccedil;a Alimentar"/>
	  </a>
		<a href="http://techtrouts.com" class="kwick">
	    <img src="images/portfolio/techtrouts1.png"/>
	  </a>
		<a href="http://webandcookies.com" class="kwick">
	    <img src="images/portfolio/webandcookies1.png"/>
	  </a>
	</div>
</div>

This css:

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

#kwicks_pics {
	visibility:hidden;
	clear:both;
	width:880px;
	height:300px;
	text-align:center;
}
#kwicks_pics .kwicks_pic {
	display: block;
	background:none;
	border:none;
}
#kwicks {
	clear:both;
	width:auto;
	height:180px;
}
#kwicks .kwick {
	float:left;
	/*width should be the same as javascript's var szNormal*/
	width: 55px;
	background:none;
	border:none;
}

And this Javascript:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

window.addEvent('domready', function(){
 
	var sequential = false; //changed to true requires to pass every intermediate image on slide
	var szNormal = 55; //should be the same as css #kwicks .kwick{width}
	var szSmall  = 50, szFull = 250, selected=0;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 350, transition: Fx.Transitions.Back.easeOut});
	var kwickspics=$$("#kwicks_pics .kwicks_pic");
 
	var kwickspics_obj={
		movingTo:(kwickspics.length-1),
		selected:(kwickspics.length-1),
		next_i:false,
		checking:false,
		on_move:false,
		wait_delay_move:false,
		the_fxs:[],
		init:function(){
			kwickspics.each(function(kwickspic, i){
				kwickspics_obj.the_fxs[i]=new Fx.Slide(kwickspic, {
					duration: 200,
					//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/
					onComplete:function(){
					if(kwickspics_obj.wait_delay_move){
						kwickspics_obj.wait_delay_move=false;
						setTimeout(kwickspics_obj.checkStep,100);
						return;
					}
					if(kwickspics_obj.next_i!==false){
						kwickspics_obj.wait_delay_move=true;
						kwickspics_obj.the_fxs[kwickspics_obj.next_i].slideIn();
						kwickspics_obj.selected=kwickspics_obj.next_i;
						kwickspics_obj.on_move=false;
					}
				}});
				kwickspics_obj.the_fxs[i].hide();
			});
			$('kwicks_pics').style.visibility='visible';
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideIn();
		},
		moveTo:function(i){
			kwickspics_obj.movingTo=i;
			if(!kwickspics_obj.checking) kwickspics_obj.checkStep();
		},
		checkStep:function(){
			if(kwickspics_obj.on_move || kwickspics_obj.movingTo==kwickspics_obj.selected) {
				kwickspics_obj.checking=false;
				return;
			}
			kwickspics_obj.checking=true;
			kwickspics_obj.on_move=true;
 
			if(sequential){
				//requires to pass every image
				kwickspics_obj.next_i = kwickspics_obj.selected&gt;kwickspics_obj.movingTo ?  kwickspics_obj.selected-1 : kwickspics_obj.selected+1;
				//go directly to final image
			} else kwickspics_obj.next_i=kwickspics_obj.movingTo;
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideOut();
			return;
		}
 
	}
	kwickspics_obj.init();	
 
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
			kwickspics_obj.moveTo(i);
		});
	});
 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	});
});

Hope you’ll put it to good work ;)

]]> http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/feed/ 2 Mootools: smooth font resize onmouseover (mouseenter) “bump” http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/ http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/#comments Tue, 24 Jun 2008 15:36:04 +0000 Carlos Ouro http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/ Hello,

this is the smooth font resize for css class “.bump” effect.
Just put class=”bump” on the items you want and use the following javascript somewhere on your page.

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

window.addEvent('domready',function() { 
 
	//scaling values
	var scale_px=6;
	var scale_em=0.3;
 
	var bumps=$$('.bump');
	bumps.each(function(bump, i){
		var init_size=bump.getStyle('font-size');
 
		var units=init_size.match(/em/)!=null ? 'em' : init_size.match(/px/)!=null ? 'px' : false;
		if(units===false) return false;
 
		var size_up=(init_size.toFloat()+(units=='em' ? scale_em : scale_px))+units;
		var fx=new Fx.Morph(bump, {duration:90, wait:false, transition:Fx.Transitions.Back.easeOut});
 
		bump.addEvent("mouseenter", function(event) {
			fx.start({
				'font-size':size_up
			});
		});
		bump.addEvent("mouseleave", function(event) {
			fx.start({
				'font-size':init_size
			});
		});
	});
});

Note: In order for this to work on IE7 you need to have some font-size defined in your css for every “.bump” on your page. Otherwise font-size will return “100%”, and it get’s impossible to know how to resize – i’ve tried it – damn IE :/

You can check it working here, on the links under “We Provide:”.
Tanks :)

]]> http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/feed/ 0 MooTools: smoothscroll highlight element id and highlight anchor onload http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/ http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/#comments Mon, 23 Jun 2008 23:25:04 +0000 Carlos Ouro http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/ 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') &amp;&amp; $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') &amp;&amp; $(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') &amp;&amp; $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') &amp;&amp; $(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 ;)

]]> http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/feed/ 0 What about backward compatibility modules? http://techtrouts.com/what-about-backward-compatibility-modules/ http://techtrouts.com/what-about-backward-compatibility-modules/#comments Sat, 21 Jun 2008 18:32:53 +0000 Carlos Ouro http://techtrouts.com/what-about-backward-compatibility-modules/ Hi again,

being working a lot with mootools, dojo, wordpress and some other frameworks and toolkits lately, my question today is this:
Why, most of the times, don’t frameworks and toolkits developers launch any backward compatibility modules at all?

It might seem pretty complicated getting old deprecated funcionalities working  on newer, better versions, but, apart from some real specific embembed funcionalities, it really shouldn’t be that hard.

For the following example i’ll use Mootools as an explanatory example:

All you need is a nicely designed dynamic version transitioning system.
One that allows you to, anytime on the execution, define which version will the following code run on.

Imagine you design a backward compatibility plugin from version B to version A.
On version C you’ll design a backward compatibility plugin to version B.

So now, on a page running “mootools-C.js” you should include the backward compatibility modules “mootools-back-C-B.js” and “mootools-back-B-A.js”, or a compiled version (having just a copy paste of both previous files content) “mootools-back-C-to-A.js”.

So if you run something like “Mootools.use_version(‘A’);” the dynamic version transitioning system would automatically look for it’s previous version compatilities execution for version B at, let’s suppose, “MootoolsBack_C_B();” and then rerun the same command (“Mootools.use_version(‘A’);”) while already running on version B to travel back to version A (the dynamic version transitioning system, already on version B would run something like “MootoolsBack_B_A();”).

This method would, in theory, work for multiple version transitions without having to design a specific plugin for each version to version compatibility. It would save developers hours in trying to put two different tools, based on two different framework/toolkit versions, together on the same execution – like using both MOOdalbox 1.3 beta 2 and mooflow v0.2 in the same page.

The system would work both ways, as you could “Mootools.version_reset();” or “Mootools.use_version(‘C’);” to travel back to version C on the rest of the execution, the system would run the consecutive version travel functions eg. “MootoolsBack_A_B();” and “MootoolsBack_B_C();” and the rest of the code would be running on Mootools version C.

This “dynamic version transitioning system” will be used for every release transition on NaturePhp.
It might not work perfectly at first, but it will certainly relieve many developers’ headaches.

I hope in the future more and more projects start using a system like this.

]]> http://techtrouts.com/what-about-backward-compatibility-modules/feed/ 0