AJAXRAIN WIDGET

Get this widget!

Something Funny

jQuery vs MooTools: Choosing Between Two Great JavaScript Frameworks

jQuery vs MooTools: Choosing Between Two Great JavaScript Frameworks

Posted using ShareThis

SHARE MOONKIKI IGOOGLE THEME

I f you want to use moonkiki iGoogle theme, try this link:

link to Moonkiki iGoogle Theme

dropbox

For my italian readers:

I found this fascinating quote today, is in italian:

Dropbox ha un’interfaccia web molto intuitiva tramite la quale potete accedere ai vostri dati in sicurezza da qualunque parte del mondo vi troviate con una connessione ad internet ed un browser web a disposizione. Potete anche installare l’apposita applicazione sul vostro computer Windows, Mac o Linux per accedere ai dati tramite una semplice cartella da posizionare dove preferite: potete installarla su tutte le macchine che volete e i dati saranno sempre sincronizzati bidirezionalmente in automatico (and of course: anche da e verso il web ovviamente).njvitto, May 2009

You should read the whole article.

RETRIEVE GIVEN PROPERTY FROM A JSON

Often some user ask me how to retrieve in an elegant way and without using
the function eval, a property from a json, if that property is in a string.
So not to write that:

var param = 'pippo';

var res = eval('json.'+param); //per fare json.pippo

Here my response. Use an utility js where do you put that function
and use it as I display below.

getProps = function(obj, prop) {
for (var i in obj) {
if (i==prop) { alert(obj[i]); return; }

if (typeof obj[i] == "object") {
 dumpProps(obj[i], i);
}
}
}

var json = {"pippo":"ciao","pluto":"bao"}
var searchedProps ="pluto"

getProps(json,searchedProps);


In these example I shown an alert for the searched property, but you need to return itn
in that way:


if (i==prop) {  return obj[i] }


So you can notice something that not all newbies know. You can reach a
value by name in the json properties name/value collection.
Because variable "i" is the name of property
given from the for with the keyworld "in".


Do you want something simpler than previous function?
Ok.

Look here:

if (json[searchedProps])
 alert(json[searchedProps])

;)

Moonkiki

How to realize a calendar with Mootools (STEP I)

Hi all, and welcome to Mootools calendar course.

First of all, as usual, the demo:

HERE A LINK TO MY MOOTOOLS CALENDAR

And now some explanation:

In your html code add a layer like this:

<div id="cal"></div>

The attribute "id" is important beacause you'll use it for istance of your javascript calendar.

And now let's go with the first rows of our js.

In this lesson we introduce the method initialize and the main options of our class.

Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(), 0, 1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()) / 7);
}


var Calendar = new Class({
Implements: [Events, Options],
options: {
id: '',
dateObject: new Date(),
where: ''
},
initialize: function(options) {
this.setOptions(options);
this.id = this.options.id;
this.dateObject = this.options.dateObject;
this.where = $(this.options.where);
this.where.set('html', '');
this.cal = null;
this.wait = new Element('img', {
'src': 'images/wait.gif'
});
this.wait.setStyle('margin-left', '38%');
this.wait.setStyle('margin-top', '18%');

this.body = $(document.body);
this.buildBody();
this.header = this.options.header;
this.length = this.getLength;
this.month = this.dateObject.getMonth();
this.date = this.dateObject.getDate();
this.day = this.dateObject.getDay(); //console.log("week "+this.week);
this.year = this.dateObject.getFullYear();
this.getFormattedDate = this.getFormattedDate;
this.dateObject.setDate(1);
this.firstDay = this.dateObject.getDay();
this.dateObject.setDate(this.date);
this.days = null;
this.months = null;
this.marginLeftDay = 0;

this.days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var set_sipario = function() {
$('sipario').setStyle('display', 'block');
};
},


First of all we gave a new extension to the base prototype of javascript Date object. In this way we have a new method called getWeek that return the week number in the year.
After that we started declaring our Calendar class as usual in Mootools. To use fireEvent method and Options, we implemented this main object of MooTools Core. After that we just started with the initialize method (our costructor, for OOP developer), and here we just implemented options and wrote all the variables we need into the others method that we'll see next time. All declaration, as AGILE developing teach to us, are self explanated. If it's not, write your question on comment and I'll answer you.
I just want to stop your attention on the last steps of this first lesson about js/mootools/calendar:


this.days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var set_sipario = function() {
$('sipario').setStyle('display', 'block');
};

The first and the second objects are useful to write the header of our calendar, the last function (set_sipario) is called to put a layer over our page. In this way we can make all our works behind the SIPARIO layer, and create our table object and function, when we'll finish it, we'll make disappear tha SIPARIO and we'll find our calendar ready to go.

Follow next lesson for other particulars.
Nunzio Fiore

(You can find a special implementation of Calendar in this web application: http://www.moonkiki.com/moonkiki/moogenda/ )