Tag Archives: div

Javascript: Draggable Window

Ver post no novo domínio: http://rogeriolino.com/2007/01/25/javascript-draggable-window/

Tem algum tempo já que estava de bobeira e acabei fazendo um exemplo de uma div (janela) arrastável.

Simulei uma janela padrão em alguns Sistemas Operacionais, tem a barra superior com o título da janela, o espaço ao centro para o conteúdo e uma barra no final, a statusbar (essa só para incrementar mesmo).

Há nela também três opções: “minimizar/maximizar“, “esconder” e “fechar“.

Na opção “minimizar” é alterado a propriedade display do CSS da parte do conteúdo para none. Voltando para block com “maximizar”.

O “esconder” além de aproveitar a função para “minimizar” também altera o display da statusbar para none. E seta a posição da janela para a origem da tela (left:0 e top: 0).

E o “fechar” por sua vez altera a propriedade do visibility do CSS da janela toda para hidden. E no palco tem uma opção para (re)abrir a janela, que altera o visibility para visible.

O porquê de usar visibility para “fechar” a janela é porque não queremos mudar o comportamento da janela, como ela é vista, e sim só sumir, torná-la invisível. O mesmo não funcionaria muito bem com o conteúdo porque fazendo ele só sumir ainda ficaria o seu “espaço guardado” fazendo apenas o conteúdo ficar invisível ao invéz da janela realmente minimizar.

Ao arrastar a janela também é alterado o cursor, mudando para move. O que caracteriza melhor a janela sendo arrastada.

Qualquer dúvida é só deixar no comentário.

Exemplo: Draggable Window

Source: Draggable Window

Tutorial Caixa de Contrato

Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem.

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: 400px;
height: 500px;
padding: 10px;
overflow: auto;
border: 3px groove #CCCCCC;
background: #F1F1F1;
}

Você pode alterar o estilo da borda: estilos de borda css.

HTML

<div id=”contrato”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam massa. Donec bibendum quam a augue. Fusce rhoncus. Proin laoreet facilisis ipsum. Nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque semper porta lorem. Nunc libero. Pellentesque sollicitudin. Integer tincidunt cursus nulla. Vivamus lacinia condimentum ipsum. Quisque lacus diam, scelerisque vitae, vestibulum id, elementum vitae, ante. Cras ipsum. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Uma encheção de lingüiça aí.

E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.