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.

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.

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.

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.

Então não teve momento mais oportuno, com um simples script que transforma um números aleatórios em char e pronto. Está resulvido o meu problema.

Esses dias um pouco inspirado com a aula de Probabilidade e Estatística, resolvi fazer um script para gerar gráficos de barras.

Você cria um novo objeto Grafico (sem acento mesmo – new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu [...]]]>

Esses dias um pouco inspirado com a aula de Probabilidade e Estatística, resolvi fazer um script para gerar gráficos de barras.

Você cria um novo objeto Grafico (sem acento mesmo – new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu gráfico.

Não vou explicar aqui linha por linha porque o código não está pequeno e também porque está bem simples de entender. Mas havendo alguma dúvida é só deixar um comentário que logo eu respondo.

Clique aqui para vê-lo funcionando.

O código que gerou o gráfico da imagem ao lado é o seguinte:

var grafico = new Grafico(11);
grafico.setSize("200px");
grafico.setTitle("Grafico de Barras");
grafico.setSource("Fonte: Fictícia");
grafico.setBarraSize(0, "80%");
grafico.setBarraLabel(0, "manga");
grafico.setBarraSize(1, "30%");
grafico.setBarraLabel(1, "banana");
grafico.setBarraSize(2, "50%");
grafico.setBarraLabel(2, "maracuja");
grafico.setBarraSize(3, "100%");
grafico.setBarraLabel(3, "melancia");
grafico.setBarraSize(4, "70%");
grafico.setBarraLabel(4, "maracuja");
grafico.setBarraSize(5, "76%");
grafico.setBarraLabel(5, "pera");
grafico.setBarraSize(6, "30%");
grafico.setBarraLabel(6, "uva");
grafico.setBarraSize(7, "47%");
grafico.setBarraLabel(7, "melao");
grafico.setBarraSize(8, "25%");
grafico.setBarraLabel(8, "laranja");
grafico.setBarraSize(9, "90%");
grafico.setBarraLabel(9, "abacaxi");
grafico.setBarraSize(10, "10%");
grafico.setBarraLabel(10, "kiwi");

[update]

Faça o download do exemplo aqui (.rar)

[/update]

Clique aqui para visualizar