How to make a great intro in javascript using MooTools

FIRST OF ALL THE DEMO :)

http://www.moonkiki.com/kiki/

See a related video here:

"link to ictv"

Download the code from here:

"link to zip package"

And now a little explanation 

(the following text is a translation from the tab "trascrizione" at this page: "link to ictv" Seeing video and downloading code "link to zip package" can help you if you don't understand somenthing.  (Contact me for any question: tempozero at gmail.com )

We include two javascript framework used to manage the animations. We have chosen to include MooTools and moord. 

Subsequently we have in other sections that identify each area of our scene. In our case we will create a div container and place it into the sky, the sea, the sun and the moon. These distinct areas also add a div called msg that include the message that we propose in our animated intro. 


<div Id="sky"> 
<div id="msg"> <br> <br> <br> <br> <br> One slogan effect ...</ div> 
</ Div> 
<div Id="moon"> 

</ Div> 
<div Id="sun"> 

</ Div> 
<div Id="sea"> 
<br> <br> <br> <br> <br> <br> 
<a Href="#" style="color:white"> Skip </ a> 
</ Div> 
</ Div> 

An intro lasts several seconds, but not necessarily a user must be linked to vision. That is why we put a tag in the ocean-type link that contains a link to that then it will be the first page of our website. In this way we will create the typical effect of Skip to the intro. 

<a href="#" style="color:white"> Skip </ a> 

Using a wise and intuitive use of this information places the style elements of our animation at the point that we prefer. Heaven, earth, sun and moon can stack and deploy in a simple way by using size and margin attributes. 

body ( 
Background: # 000000; 
) 

# (Sea 
background: transparent url (img / sea.gif) no-repeat; 
Position: absolute; 
Width: 800px; 
Height: 304px; 
Text-align: right; 
Z-index: 100; 
Margin-top: 400px; 
Font-size: 18px; 

Color: gray; 
) 

# (Sun 
background: transparent url (img / sun.png) top no-repeat; 
Width: 188px; 
Height: 182px; 
Z-index: 50; 
Position: absolute; 
Margin-top: 340px; 

) 

# (Moon 
background: transparent url (img / moon.png) top no-repeat; 
Width: 188px; 
Height: 182px; 
Z-index: 50; 
Position: absolute; 
Margin-top: 40px; 
Margin-left: 400px; 
Display: none; 
) 

# Sky ( 
background: transparent url (img / starnight.png) no-repeat; 
Width: 800px; 
Height: 400px; 
Position: absolute; 
) 

# Container ( 

Font-style: Verdana Helvetica; 
Font-size: 12px; 
Width: 800px; 
Margin: 0px auto; 

) 

# Msg ( 

Font-style: Verdana Helvetica; 
Font-size: 22px; 
Text-align: center; 
Color: gray; 
) 

The stylesheet can pay particular attention all'attributo position that we put equal to absolute. In this way, the div with id equal to the one described in the CSS on the page are placed in absolute position, exploiting the information margin, widtht and height. The container is placed exactly in the middle of the page because 'we used the same margin to auto. This directive instructs the browser to automatically place an item in the center of the div that contains the item in question. The opposite of absolute positioning is relative, that the browser places the item in relation to others, adding to margin attributes to those that are proceeding. Usually it is better to use relative positions and sizes as a percentage, in this way on any monitor and with any resolution, our site will distribute better. In this case we need 'that every element was in exactly the position where he was wanted in an absolute manner. 
In using some javascript effects made available by the plugin moord and a couple of instructions that are provided by MooTools framework. In particular we will see the object in MooTools Chain. This object allows us to connect several functions in succession, or the scenes of our animation. Get the messages, the sun rise, then the sun and the moon. 

var myChain = new Chain (); 

To unleash a succession of scenes and call chain, use setInterval instead Education. This function receives two arguments: the first and 'a string containing the instruction to perform more de' times consecutively, the second represents the milliseconds to wait between execution and the next. In our case, for instance, the images follow one another every two seconds launches a call callChain. 

var callCh = window.setInterval ( "myChain.callChain ()", 2000); 

Moord to use its influence Gradient to brighten the sky darkened at dawn and dusk, and the effect that Move through simple x and y coordinates moves smoothly a div or other element from the position in which it is expressed as to argument of the function move. 

var = new Fx.Gradient sky ( 'sky', (duration: 1000)); 

var rising = function () (sky.start ([ '# 000000', '# 44CCCC', '# 66FFFF'])}; 
var risingout = function () (sky.start ([ '# 66BDBDB', '# 88AAAA', '# CC6666', '# 000000'])); 


var moveW = new Fx.Move ( 'sun', (duration: 4000, link: 'chain')); 

Create animations for the intro is just one of the features that we offer these javascript. With images with transparent background and a 'can do fancy flying airplanes, poetry and scroll through the planets move without limits to our possibilities.

And again:

DEMO :)

http://www.moonkiki.com/kiki/

video:

"link to ictv"

Download:

"link to zip package"

Nunzio Fiore

KNOB IN MOOGENDA

I'm introducing knob in moogenda to set a range of hours in the ADD EVENT function.

I wanna say a public "THANK YOU" to Nik of this blog

http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/comment-page-1/#comment-929

Who helped me a lot.

Nunzio

MooGenda's google group made the first good action

More than MooGenda's GGroup, it was one of the MooGenda's user that help us to fix a little bug

you see the explanation here:

http://groups.google.com/group/moogenda/browse_thread/thread/1780ad3a6889eed9/a7f4279535eb18ee?hl=en#a7f4279535eb18ee

Now you can download the fixed version from MooGenda's link.

Thank you Frens 4 your help
Nunzio

NEW RELEASE FOR AJAXRAIN

Since today you can follow a new release of AJAXRAIN .

Try it soon.. It's really faster 'n better.

Nunzio

added some feature in moogenda for a great customization

Now MooGenda has

• a general object: this.cal that contains the json events data retrieved from getEventUrl
• an onShowWeek and onShowDay events
• an onWrite

In this way you can make something like that


var MYCustomMooGenda = new Class({

Extends: MooGenda,


initialize: function(options){
this.parent(options);

some istruction


this.addEvent('onShowWeek',function(){
some istruction

}.bind(this));

this.addEvent('onShowDay',function(){
some istruction
});

},


eventDetail: function(ev) {

var id = ev.retrieve('event_id')
var title = ev.retrieve('event_title')
var desc = ev.retrieve('event_desc')
var timeLong = ev.retrieve('event_h')
var timeStart = ev.retrieve('event_start')
var dayNum = ev.retrieve('displayNum')+"";
if (dayNum.substr(0,1)=="0")
dayNum=dayNum.substr(1);
var type= $('monthEl'+dayNum+ id).retrieve('type');
var cnt = new Element('div');
cnt.set('html', "" + title + "

" + desc+
"
START AT:"+timeStart+
"
TIME LONG:"+timeLong+
"
DAY:"+dayNum+
"


"
);


cnt.setStyle('padding', '10px');
cnt.setStyle('border', '1px solid #1d1d1d');
cnt.setStyle('width', '400px');
cnt.setStyle('text-align', 'justify');
cnt.setStyle('font-family', 'Trebuchet MS,geneva,arial,sans-serif');
cnt.setStyle('font-size', '14px');

cnt.addClass(type);
this.getTypeIco(type).inject(cnt,'top');

var crudBlock = new CrudBlock({'id':ev.id+'CrudBlock'});
cnt.grab(crudBlock.getABlock());

var close=new Element('input',{
type:'button',
value:"close",
id:'close'+id
})
cnt.grab(close);

var elem = new StickyWin({
content: cnt,
relativeTo: ev.id,
position: 'upperRight'
});
var obj=this;
cnt.addEvent('click',function(){
if($(this.id))
$(this.id).setStyle('z-index',obj.z++);
}.bind(elem));

close.addEvent('click',function(){
this.destroy();
}.bind(elem)
);
},
addEventCal: function(cell) {
var dayNum = cell.retrieve('displayNum')+"";
if (dayNum.substr(0,1)=="0")
dayNum=dayNum.substr(1);

this.addEventCalDayNum(dayNum);
},

addEventCalDayNum: function(dayNum) {


var cnt = new Element('div');
cnt.set('html', " title

desc"+
"
START AT: timeStart"+
"
TIME LONG: timeLong"+
"
DAY: "+dayNum+
"


"
);

cnt.addClass('riunione');
cnt.setStyle('padding', '10px');
cnt.setStyle('border', '1px solid #1d1d1d');
cnt.setStyle('width', '400px');
cnt.setStyle('text-align', 'justify');
cnt.setStyle('font-family', 'Trebuchet MS,geneva,arial,sans-serif');
cnt.setStyle('font-size', '14px');


var close=new Element('input',{
type:'button',
value:"close",
id:'close'+dayNum
})
cnt.grab(close);

var elem = new StickyWin({
content: cnt,
relativeTo: $(document.body),
position: 'center'
});
var obj=this;
cnt.addEvent('click',function(){
if($(this.id))
$(this.id).setStyle('z-index',obj.z++);
}.bind(elem));

close.addEvent('click',function(){
this.destroy();
}.bind(elem)
);

}

});

Two very nice segnalation for MooGenda

the first:

twittering mootools: http://www.twitter.com/mootools

the second:

webresourcedepots: http://www.webresourcesdepot.com/mootools-json-event-calendar-moogenda/

IT'S MOOGENDA TIME

Hi all, I'm glad to present the new MoonKiKi/Cosmobile/NetComm web application: MooGenda.

MooGenda is:

• A web calendar JSON event, based on MooTools.
• Double click on event to see the deafult event view.
• Double click on month's day to see the default event to add memo to calendar.
• Drag and drop event in month view.
• Drag and drop and resize event in diary view.

See it here: MooGenda Documentation and Demo Page

iMoogle store active columns updated

UPDATE:

Now the project iMoogle can read json with columns that say a number major than the real number of columns, and our software can adjust the db data in two simple steps:

1) it put the portlet in the nearest columns to the column disappeared
2) it store the new order, to prevent data corruption in db.

the core code of that is in a simple and elegant recursive function named getIdx :

 getIdx: function(id){
   if ($('portal_container' + id))
  return id;
 else return this.getIdx(id.toInt()-1); 
  },

 buildPage : function(respJson) {
   var obj=this;
      ...
     
      respJson.portlets.each(function(p, index) {
  var idx = obj.getIdx(p.col);

....

You will find this feature and others on EPlan by Cosmobile (see here some italian news about it) .

Nunzio Fiore