Skip to content

Posts tagged ‘javascript’

14
Out

Firefox accelerometer

Paul Rouget shows off some cool new demos that are bak­ing on the trunk of Fire­fox currently.

First are some nifty new events that get fired if your com­puter has an accelerometer:

JAVASCRIPT:

  1. win­dow.addE­ventLis­tener(“MozOri­en­ta­tion”, func­tion(e) {
  2. /* 3 val­ues: e.x, e.y, e.y */
  3. }, true)

It works with Mac­Books and on Win­dows and Linux with Thinkpads.

Check out this cool screen­cast of the ori­en­ta­tion event in action:

orientation_demo

They also have WebGL and CSS Tran­si­tions going in Fire­fox trunk now as well! There are some demos in the orig­i­nal blog post of WebGL + CSS3 + SVG as well as CSS Tran­si­tions + the HTML5 Video tag that are very cool (require Fire­fox Nightly).

Here’s an exam­ple code snip­pet show­ing how you can use CSS Tran­si­tions to change the back­ground color of a DIV over time as well as chang­ing the width and height of an HTML5 Video at the same time:

CSS:

  1. div {
  2. –moz-transition-property: background-color, height, width, font-size;
  3. –moz-transition-duration: 2s, 1s, 2s, 1s;
  4. –webkit-transition-property: background-color, height, width, font-size;
  5. –webkit-transition-duration: 2s, 1s, 2s, 1s;
  6. }
  8. div video {
  9. –moz-transition-property: width, height;
  10. –moz-transition-duration: 2s, 2s;
  11. –webkit-transition-property: width, height;
  12. –webkit-transition-duration: 2s, 2s;
  13. }

Someone’s also put together a cool demo that puts the new accelerom­e­ter sup­port with some SVG to cre­ate a Super Mario Kart clone:

mario_orientation

Fonte:Ajax­ian

9
Out

CSS 3 Generator

Inter­ac­tive CSS 3 Gen­er­a­tor from Ajax­ian by Brad Neu­berg 9 peo­ple liked this Many browsers have been exper­i­ment­ing with new cus­tom CSS prop­er­ties lately. Keep­ing track (and learn­ing how to use them) can be a bit of a chal­lenge. Via Wid­get­Pad comes a nifty CSS 3 Gen­er­a­tor that helps you under­stand the new CSS 3 fea­tures in Webkit with an inter­ac­tive tool that will build up and show how each new prop­erty affects an ele­ment. Here, for exam­ple, we see the results of apply­ing rounded cor­ners, box shad­ows, reflec­tions, and a trans­form to an ele­ment: css3_generator_screenshot Which results in the fol­low­ing code: PLAIN TEXT CSS: 1. –webkit-border-radius: 10px; 2. –webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 3. –webkit-box-reflect: below 5px –webkit-gradient(linear, left top, left bot­tom, from(transparent), color-stop(0.5, trans­par­ent), to(white)); 4. –webkit-transform: rotateZ(15deg); The CSS 3 Gen­er­a­tor works on any webkit based browser, includ­ing Safari, the iPhone, and Chrome. Here’s a chal­lenge to the com­mu­nity: can you cre­ate an enhanced ver­sion of this that works with all the new CSS 3 and vendor-specific prop­er­ties, includ­ing on IE and Fire­fox, hid­ing the options that don’t work on spe­cific browsers? That would turn this into a more gen­eral pur­pose edu­ca­tional and test­ing tool that would be very valu­able. Even bet­ter if you open source it and we can host it on the Open Web Devel­oper Net­work we’ve been kick­ing around. Drop me a line if you cre­ate such a thing :) As a side note, I had never seen the Wid­get­Pad web­site where this is hosted before this which looks quite inter­est­ing. From the site: [Wid­get­Pad is a] col­lab­o­ra­tive devel­op­ment envi­ron­ment for devel­op­ers to develop fully-interactive, stand-alone, down­load­able Smart­Phone appli­ca­tions in HTML5, CSS3 and Javascript. You don’t need to install any spe­cial devel­op­ment tools or learn any platform-specific API sets. Wid­get­Pad offers every­thing you need — project man­age­ment, source code edit­ing, debug­ging, col­lab­o­ra­tion, ver­sion­ing and even dis­tri­b­u­tion — in your own browser!

Fonte: Ajax­ian

7
Out

Preload Page

The clas­sic ani­mated gif, or the “load­ing…” text, could be now eas­ily replaced thanks to this new jQuery plug-in.

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

Fea­tures:

  • Pre­load a whole web page.
  • Pre­load a part of the page.
  • Gets all images, <img> tags and background-image of your CSS
  • Easy to implement.
  • Adjustable load­ing bar.
  • Tested in Fire­fox, 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 hon­est, I instantly had a thought about this tech­nique:  wasn’t the DOM­Con­tent­Loaded event pur­pose the one to avoid peo­ple wait­ing a full page down­load before they’re allowed to inter­act with it? … never mind, we can­not do much in any case in front of images ded­i­cated layouts.

Fonte:GayaDe­sign

8
Jul

Open web tools mozilla labs

A mozilla labs criou um direc­tório, onde podem ser encon­tradas de uma forma sim­ples e ráp­ida várias “fer­ra­men­tas” para pro­gra­madores, ten­taram reunir numa só página algu­mas das fer­ra­men­tas con­heci­das dos programadores.

http://tools.mozilla.com/

E claro tudo fer­ra­men­tas opensource.

A página ainda dis­põem de um for­mulário de pesquisa, muito útil caso queiram pesquisar só pelo design , código etc..

24
Abr

jCarousel

Rid­ing carousels with jQuery

Author: Jan Sor­galla
Ver­sion: 0.2.3 (Changelog)
Down­load: jcarousel.tar.gz or jcarousel.zip
Licence: MIT and GPL
Doc­u­men­ta­tion: http://sorgalla.com/projects/jcarousel/

jCarousel is a jQuery plu­gin for con­trol­ling a list of items in hor­i­zon­tal or ver­ti­cal order. The items, which can be sta­tic HTML con­tent or loaded with (or with­out) AJAX, can be scrolled back and forth (with or with­out animation).

Exam­ples

The fol­low­ing exam­ples illus­trate the pos­si­bil­i­ties of jCarousel:

17
Abr

JavaScript : Prototype e LibSAPO.js

Apre­sen­tação Pro­to­type e LibSAPO.js, real­izada pelo Cláu­dio Gam­boa na segunda SAPO Session.

27
Fev

Ajax — Acentuação

como resolver o prob­lema de acen­tu­ação do  ajax ape­nas com uma linha de código.

Basta acres­cen­tar esta linha ao conteúdo.

<?php header(“Content-Type: text/html; charset=ISO-8859–1″,true) ?>

9
Fev

como escrever um código javascript limpo e bonito

Nicholas Zakas é um engen­heiro na equipa da YUI
3
Dez

Dojo @ sapo codebits 2008

Prac­ti­cal Thin Server Archi­tec­ture with Dojo

Fonte:sapo codeb­its 2008

Newer Entries »

Bad Behavior has blocked 58 access attempts in the last 7 days.