Sergio Panagia Blog

Tag Archives: javascript

Introducing Slideup: An iOs-like panel built for iUI framework

Mobile web application libraries are dividing in two main groups: lightweight libraries and complex and (often heavy) application framework with extended UI support. Introduction A good point of balance is iUI – a web UI framework for mobile devices. It offers a really basic, but very functional, navigation system between pages (the classic left-to-right and [...]

Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database

These days I had the opportunity to test PhoneGap, an open source framework for creating native mobile apps with web standards. So, first things came to mind when you think about HTML5, is that even if mobile browsers are very fast to implement new features, you cannot truly count on “standards” but on “drafts”. The [...]

No need to jQuery: managing events

A very important topic in web development it’s about Events. jQuery offers a nice syntax with functions like element.click(), MooTools -instead-  tries to remain closer to natural JavaScript implementation with element.addEvent(‘onclick’, fn). Modern browsers have really no problem with this, the syntax is simple: el.addEventListener(“click”, eventTriggered, false); function eventTriggered() { //do your stuff }

Image Tween with Element.crossfade for MooTools

Element.crossfade is a MooTools extension to simulate a tween for background-image element’s property. The syntax, in this new version, is very clear: document.id(‘el’).crossfade(‘end_image.jpg’); Just remember your element position property in CSS should be expressly declared (as absolute, relative or fixed), don’t leave it blank. Note: you can customize the fade behavior by setting tween properties [...]

Effetti grafici con Javascript: semplice comparsa e scomparsa con animazione

In un esempio recente su questo blog ho mostrato come ottenere un’effetto slide verticale (simulando un’illusione di movimento grazie ad alcune immagini ad-hoc). Qualcuno mi chiede se è possibile realizzarlo anche con un’interpolazione orizzontale: niente di più facile, MooTools mette a disposizione delle classi che facilitano il lavoro (Fx.Slide, invece del semplice tween utilizzato nell’esempio [...]