Quem nunca viu aquelas “5 estrelas” logo após algum artigo, foto, etc?

Pois então, esse script cria uma sequência de links () de uma quantidade pré-definida para que o visitante possa taxar, classificar, o conteúdo da página. Seu visual é totalmente customizável através de folhas de estilos (CSS).

var r1 = new Rate(5);

r1.onclick = function() {
    // input here your action
    alert(r1.getValue());
}

r1.setDefault(3);

r1.append("example1");

Para visualizar o exemplo clique aqui.

Um efeito muito legal de transição é o fade, aonde o objeto surge gradativamente (in) ou some (out). Com o auxílio do CSS, definido pelo próprio javascript, usando opacity (alpha) conseguimos montar um exemplo.

Passando dois parâmetros a gente define o alvo (id do elemento HTML) e o tempo de demora da execução do efeito.

Código:

function fadeOut(id, time) {
    fade(id, time, 100, 0);
}

function fadeIn(id, time) {
    fade(id, time, 0, 100);
}

function fade(id, time, ini, fin) {
    var target = document.getElementById(id);
    var alpha = ini;
    var inc;
    if (fin >= ini) { 
        inc = 2; 
    } else {
        inc = -2;
    }
    timer = (time * 1000) / 50;
    var i = setInterval(
        function() {
            if ((inc > 0 && alpha >= fin) || (inc < 0 && alpha <= fin)) {
                clearInterval(i);
            }
            setAlpha(target, alpha);
            alpha += inc;
        }, timer);
}

function setAlpha(target, alpha) {
    target.style.filter = "alpha(opacity="+ alpha +")";
    target.style.opacity = alpha/100;
}

Exemplo:

fadeOut("foto", 0.6);
fadeIn("popup", 1);

Exemplo em funcionamento aqui.

Mais um exemplo em Javascript, agora uma função, creio que conhecida por muitos já, que tem a finalidade de embaralhar o texto contido em uma tag qualquer (embaralhar o texto após passar o mouse por cima).

Há duas maneiras de usá-la, uma aplicando em apenas uma tag o evento, e a outra, aplicando o evento a todas os elementos de mesmo “tag name”.

Ex:

shakeAll('h2');







<h3 onmouseover="shake(this)"></h3>

[update] Codigo portado para jQuery

/**
 * textShake
 * @author rogeriolino http://rogeriolino.com
 */
(function($) {

    $.fn.textShake = function(options) {

        var defaults = {
            timeIn: 20,
            timeOut: 50
        };

        var opts = $.extend({}, defaults, options);

        return this.each(function() {

            var self = $(this);
            self.running = false;

            self.mouseover(function() {
                if (!self.running) {
                    self.running = true;
                    self.content = self.text();
                    self.len = self.content.length;
                    self.init(self.i);
                }
            });

            self.init = function(i) {
                self.i = 0;
                setTimeout(
                    function() {
                        self.text(self.shakeChar(i));
                        if (i <= self.len) {
                            self.init(++i);
                        } else {
                            self.undo(0);
                        }
                    }
                    , 
                    opts.timeIn
                );
            }

            self.shakeChar = function(i) {
                return self.text().substring(0, i - 1) + randomChar() + self.text().substring(i);
            }

            self.undo = function(i) {
                setTimeout(
                    function() {
                        if (i <= self.len) {
                            self.text(self.content.substring(0, i) + self.text().substring(i));
                            self.undo(++i);
                        } else {
                            self.text(self.content);
                            self.running = false;
                        }
                    }, 
                    opts.timeOut
                );
            }

        });

        function range(ini, fin) {
            var j = 0;
            var a = new Array(fin - ini);
            for (var i = ini; i < fin; i++) {
                a[j++] = i;
            }
            return a;
        }

        function randomChar() {
            var arr = new Array();
            arr = arr.concat(range(48, 57), range(65, 90), range(97, 122)); // numbers, uppers, lowers 
            var c = arr[Math.floor(Math.random() * arr.length)];
            return String.fromCharCode(c);
        }

    }

})(jQuery);

[/update]

clique aqui para visualizar

Algo que qualquer editor que se prese tem que ter é a capacidade de facilitar a leitura do código utilizando o que se chama Syntax Highlight . O ato de distinguir partes do código com cores diferentes ajudando assim a uma melhor associação do mesmo.O que não ocorria na web até um tempo atrás, quando alguém teve a idéia de “pintar” os códigos disponibilizados na rede. Existem vários scripts para esse fim, muitos com suporte a mais de uma sintaxe (mais de uma linguagem).

E nessa mesma onda fiz um script de fácil entendimento, com a possibilidade de personalizar o código usando CSS ficando o resultado de sua preferência.

JsCC (Javascript Colored Code) por enquanto só atende a códigos Java e Javascript, mas pretendo ir incluindo outras linguagens com o passar do tempo (e ganho de tempo também).

Para visualiza-lo em funcionamento clique aqui, download disponível aqui.

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag