Tag Archives: CSS

Javascript: Jump Menu

Uma grande maioria dos desenvolvedores web não gostam cara padrão dos Jump Menus. Então por que não fazer um?

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>).

Para usá-lo, a única coisa que devemos fazer, além de linkar o script ou adicioná-lo no corpo da página, é instanciar o Objeto. E passar como parâmetro um array de array, contendo esse último na primeira posição a url e na segunda o texto a ser exibido. Após isso feito, escolha aonde adicioná-lo (pack) através do id da tag.

Ex:

var itens = Array();

for (var i=0; i<15; i++)

 itens[i] = ['https://rogeriolino.wordpress.com/', 'item ' + (i+1)];var jump = new JumpMenu(itens);

jump.setLabel(' + Click Here');

jump.pack('teste');

Para o visual basta usar de todo o potencial do CSS e estilizar como preferir.

Clique aqui para conferir o exemplo contendo o código.

Javascript: Rate this

Rate

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.

Javascript: Fade in, Fade out

Ver post no novo domínio: http://rogeriolino.com/2008/01/15/javascript-fade-in-fade-out/

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.

Ex.:

fadeOut(id, time)

fadeIn(id, time)

Exemplo em funcionamento aqui.

Javascript: Shake Text

shake.jpg

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>

clique aqui para visualizar

Javascript: Code Syntax Highlight

jscc.jpg

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.

Javascript: Colorpicker

colorpicker.jpg

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 meuCP = new ColorPicker(100, 38); // x , y

meuCP.setVisible(true);

...

Para visualizar-lo funcionando clique aqui.

CSS: Centralizar Horizontal e Vertical #2

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