SpotGeek.net » ajax/javascript

Category: ajax/javascript

tooltip

como agora os balões andam muito na moda, deixo aqui umas dicas :=)

qTip http://craigsworks.com/projects/qtip/demos/

JQuery

Share and enjoy:

Tags: jquery, qtip, tooltip

ajax/javascript | Filipe Teixeira Nunes | 19/10/2009 02:38 | Comments (0)

Firefox accelerometer

Paul Rouget shows off some cool new demos that are baking on the trunk of Firefox currently.

First are some nifty new events that get fired if your computer has an accelerometer:

PLAIN TEXT

JAVASCRIPT:

window.addEventListener(“MozOrientation”, function(e) {
/* 3 values: e.x, e.y, e.y */
}, true)

It works with MacBooks and on Windows and Linux with Thinkpads.

Check out this cool screencast of the orientation event in action:

They also have WebGL and CSS Transitions going in Firefox trunk now as well! There are some demos in the original blog post of WebGL + CSS3 + SVG as well as CSS Transitions + the HTML5 Video tag that are very cool (require Firefox Nightly).

Here’s an example code snippet showing how you can use CSS Transitions to change the background color of a DIV over time as well as changing the width and height of an HTML5 Video at the same time:

PLAIN TEXT

CSS:

div {
-moz-transition-property: background-color, height, width, font-size;
-moz-transition-duration: 2s, 1s, 2s, 1s;
-webkit-transition-property: background-color, height, width, font-size;
-webkit-transition-duration: 2s, 1s, 2s, 1s;
}
div video {
-moz-transition-property: width, height;
-moz-transition-duration: 2s, 2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 2s, 2s;
}

Someone’s also put together a cool demo that puts the new accelerometer support with some SVG to create a Super Mario Kart clone:

Fonte:Ajaxian

Share and enjoy:

Tags: accelerometer, FireFox, javascript, mozilla

ajax/javascript | Filipe Teixeira Nunes | 14/10/2009 17:21 | Comments (0)

Preload Page

The classic animated gif, or the “loading…” text, could be now easily replaced thanks to this new jQuery plug-in.

Specially suited for a page loads of images, the final result showed in this demo looks really nice and flashy.

Features:

Preload a whole web page.
Preload a part of the page.
Gets all images, <img> tags and background-image of your CSS
Easy to implement.
Adjustable loading bar.
Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Full post, demo, and source code, are in Gaya Design blog.

To be honest, I instantly had a thought about this technique: wasn’t the DOMContentLoaded event purpose the one to avoid people waiting a full page download before they’re allowed to interact with it? … never mind, we cannot do much in any case in front of images dedicated layouts.

Fonte:GayaDesign

Share and enjoy: