Bom galera.
Resolvi criar este post aqui por uma dúvida em um dos forúns que participo http://forum.imasters.com.br.
A dúvida está neste post aqui. Abaixo está a solução para o problema. Este será um dos post que não terá imagem, por se tratar de uma coisa simples, devem existir outras formas para se fazer isto, mas essa é a mais ditádica que eu consegui.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Alterando a largura de um elemento via Javascript by AprendaCSS.wordpress.com</title>
<style type=”text/css”>
#esquerda {
width: 20%;
background-color: #CCC;
height: 500px;
float:left;
}
#direita {
width: 80%;
background-color: #AFA;
height: 500px;
float: left;
}#esq, #dir {
margin: 10px;
}
</style>
<script type=”text/javascript”>
function espande(estado){
if( estado == “normal” ) {
document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;
} else if ( estado == “diminui_esquerda” ) {
document.getElementById(‘esquerda’).style.width = “10%”;
document.getElementById(‘direita’).style.width = “90%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
} else if ( estado == “diminui_direita” ) {
document.getElementById(‘esquerda’).style.width = “90%”;
document.getElementById(‘direita’).style.width = “10%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
}
}</script>
</head>
<body><div id=”esquerda”>
<p>
<a id=”esq” href=”javascript: espande(‘diminui_direita’);”> Expandir para Esquerda </a>
</p>
</div><div id=”direita”>
<p>
<a id=”dir” href=”javascript: espande(‘diminui_esquerda’);”> Expandir para Direita </a>
</p>
</div></body>
</html>
Abaixo tem uma explicação de um bloco de código, os outros são iguais, apenas mudando os parametros.
document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;
document.getElementById(‘esquerda’) significa que estou percorrendo toda a página procurando por um elemento que tenha o id igual a esquerda.
Linha 1: Atribuo 20% do tamanho da tela para o elemento que tem o id igual a esquerda.
Linha 2: Atribuo 80% do tamanho da tela para o elemento que tem o id igual a direita
Linha 3: Altero o atributo href do elemento que tem o id igual a dir.
Linha 4: Substituo o conteúdo do elemento que tem o id igual a dir.
Linha 5: Altero o atributo href do elemento que tem o id igual a esq.
Linha 6: Substituo o conteúdo do elemento que tem o id igual a esq.
Bom é isso ai pessoal, caso alguém tenha dúvida, poste que responderei com o maior prazer.
Até o próximo.
Fala ai cara, so uma dica, voce deveria tirar esses getElementById e usar um funçao que o retorne o metodo deixando seu codigo muito mais limpo, e tambem agrupar os elemento que sejam do mesmo ID
Qualquer coisa manda um email ai.
Por: Hantaro em 2/Dez/2008
às 20:26:04
Com certeza Hantaro
Só não fiz isso para ficar mais didatico, mas o correto mesmo seria fazer isso
function $(id) {
return document.getElementById(id);
}
Por: Paulo Fernandes em 3/Dez/2008
às 07:21:13