UnderCo(n)struction.eu

I’m trying mootools. It’s a javascript framework really good. I think the documentation is better than prototype.js one.
This is not a training tutorial on Ajax, but a mootools tutorial so let’s assume you know what is Ajax.
Read more…

Having a fade effect on div it’s simple or something like that.
Just see the functions and the method.

var myevent;
 
function setOpacity(i) { 
obj = document.getElementById("pro");
obj.style.filter = "alpha(opacity="+i+")"; 
 
obj.style.KHTMLOpacity = i/100; 
 
obj.style.MozOpacity = i/100; 
 
obj.style.opacity = i/100;
 
i = i-1;
 
if(i>20&&mioevento==0) setTimeout('setOpacity('+i+')',20);
 
return false;
 
} 
 
function ripOpacity(i) { 
 
obj = document.getElementById("pro");
 
obj.style.filter = "alpha(opacity="+i+")"; 
 
obj.style.KHTMLOpacity = i/100; 
 
obj.style.MozOpacity = i/100; 
 
obj.style.opacity = i/100;
 
i = i+1;
 
if(i<100&&mioevento==1) setTimeout('ripOpacity('+i+')',20);
 
return false; 
}

So, this is just a draft ( e.g.: there isn’t the browser identification), but let’s explain the attributes:

1. filter = “alpha(opacity=”+i+”)”; – it’s for IE/Win, note that opacity has a range like (1-100)
2. KHTMLOpacity = i/100; – it’s for Konqueror, range ( .01 – 1)
3. MozOpacity = i/100; – old mozilla browsers
4. opacity = i/100; – new firefox, CSS3

Now let’s see the on-field-code:

<style type="text/css">
#pro {
 border: 1px solid #000;
 background-color: #000;
 color: #FFF;
}
</style>
<div onMouseOver="myevent=0; setOpacity(100);" onMouseOut="myevent=1; ripOpacity(20);" id="pro">
This<br/>
is<br/>
an example
</div>

var myevent; it’s a mutex; it means myevent can block one of the two functions. This is due to the effect timing, it is not so fast, so someone could activate the onMouseOut event before the onMouseOver event is finished.

I’ve discover some useful attributes, these are scrollHeight, scrollTop, offsetHeight.

I’ll tell you why I have discovered this attributes, I don’t know if it could be useful to you: in a page I have some buttons, these buttons have an onClick event. The function applied in these events expands a div inserting in it.innerHTML some infos; the problem I have it’s that these infos are very “long” so, when div expands itself adding the information, it becomes longer than the browser window. Something like this: click me.

Check out the onClick function:

function expand(){
var somediv = document.getElementById('somediv');
var dis = document.getElementById('otherdiv');
dis.innerHTML = "a lot of bullshit";
scroller();
return false;
}

Very simple, first of all expand the div, then reach the bottom of the page.

Check out the html:

<div id="somediv" style="overflow: auto; height: 100%">
<div id="otherdiv">
<h1>DierReLabS.org</h1>
Type 'help' for assistance.
</div>
<div>
blablablabla
</div>
</div>

and here the scroller() function, really simple, it’s recursive. It go down on the bottom 20pixel per call till end.

// use effect or not
var effect = true;
function scroller(){
if(effect){
differential = (somediv.scrollTop + somediv.offsetHeight);
if((somediv.scrollHeight - differential) > 20){
somediv.scrollTop += 20;
setTimeout('scroller();', 10);
}else{
somediv.scrollTop = somediv.scrollHeight - somediv.offsetHeight;
}
}else {
// reach the bottom without effects
somediv.scrollTop = somediv.scrollHeight;
}