dochub concentra de maneira fácil e rápida as documentações de CSS, HTML, Javascript e DOM. No qual tem o seu conteúdo retirado da Mozilla Developer Network.

Excelente ferramente para tirar aquela dúvida ou refrescar a memória.

Para tal exemplo vamos precisar de um HTML simples:

Pensando assim que fiz um script para gerar um Jump Menu, ou ComboBox se prefirir. Ele é composto por uma <div> (para moldura), uma <span> (para servir como rótulo) e uma lista não-ordenada de links (<ul>).

Pois então, esse script cria uma sequência de links (<a>) 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).

O código está contido na própria página [...]]]>

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

Pois então, esse script cria uma sequência de links (<a>) 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).

O código está contido na própria página do exemplo, e para usá-lo basta instanciar o objeto definindo a quantidade de “estrelas” e adicioná-lo em alguma tag (append):

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.

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

Há duas maneiras de usá-la, uma aplicando em apenas uma tag o evento, e a outra, aplicando o evento [...]]]>

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 [...]]]>

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 [...]]]>

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 <script> e depois criar uma nova variável do tipo Colorpicker().

Ex:

<script type="text/javascript" src="colorpicker.js"></script>

var picker = new ColorPicker(100, 38); // x , y
picker.setVisible(true);

Para visualizar-lo funcionando clique aqui.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]]]>

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

link para o outro post e comentários

Há algum tempo queria fazer algo parecido e então tirei um tempo para desenvolver, ou pelo menos tentar, uma espécie de data grid.

Este é composto por uma tabela de quantas linhas e colunas desejar, e em cada célula (<td>) contém um <div> e um <input>, no qual se alternam. Para uma hora poder [...]]]>

Há algum tempo queria fazer algo parecido e então tirei um tempo para desenvolver, ou pelo menos tentar, uma espécie de data grid.

Este é composto por uma tabela de quantas linhas e colunas desejar, e em cada célula (<td>) contém um <div> e um <input>, no qual se alternam. Para uma hora poder alterar o seu conteúdo (mostra o <input>) e outra apenas exibi-lo (<div>).

Ao clicar duas vezes (ondbclick) na célula o atributo type do <input> é alterado,
se é text altera para hidden e seu valor é colocado dentro da <div> (innerHTML), caso contrário se é hidden altera-se para text e o seu valor recebe o conteúdo da <div> (limpando-a: div.innerHTML = “”;).

Nessa primeira versão tem uma quantidade razoável de funções, possibilitando uma boa customização. Mas nada impede de utilizar CSS para conseguir um resultado mais desejado.

Para utilizar o DataGrid é bastante simples, precisa apenas informar a quantidade de linhas e colunas e aonde deseja adicioná-la.

var datagrid = new DataGrid(10, 25);
datagrid.setCelSize(10,10);
datagrid.pack("container2");

new DataGrid(linhas, colunas) : cria um novo DataGrid, com a quantidade de linhas e colunas desejada;

setCelSize(largura, altura) : seta uma largura e altura para as células (em pixels);

pack(alvo) : inclui (append) o DataGrid no alvo desejado, passando como parâmetro o id do alvo.

Para visualiza-lo funcionando clique no link a seguir:

http://www17.brinkster.com/chivalrous/exemplos/datagrid/DataGrid.html

ps: Para reportar algum bug, dúvida ou sugestões basta deixar um comentário. Caso vá usá-lo recomendo que leia o código primeiro para poder aproveitá-lo melhor.