Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leonardo Machado Moreira

DIV que empurra conteudo conforme aumenta

Por , em Desenvolvimento frontend

Recommended Posts

William Bruno    1501

William Bruno
Postado

puts cara, mto bom tiu uiLL era exatamente isso.

^^ http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

Bom, ai nesse caso, eu acho que deva ser JS mesmo, mas me parece ser bem simples... olha, você já está chamando uma função que vai fazer a div clicada aumentar certo?

 

Agora, implementa tb uma que vai fazer outra div aumentar junto, passando como parâmetro as condições, por exemplo, se a DIV vermelha aumentar 300x300, a azul vai 100x300...

se azul aumentar 300x300, a vermelha que iria os 100x300... certo?

 

function aumenta(div){
	document.getElementById(div).innerHTML = "<div class='text'></div>";
}
, é só fazer um BOM algoritmo para essa função, fazendo ela receber 2 parâmetros agora... ou algo parecido...

não me iniciei devidamente em Java Script ^^

 

Algum membro ou modera mais experiente com JS pode ajudar ai ?^^

Eu fico curioso e me divirto qndo encontro esse tipo de desafio, por isso fui fazendo até conseguir com CSS puro o posicionamento.... mas de agora em diante não dá mais... hehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Leonardo Machado, cara... eu gostei mesmo da brincadeira... hehe

 

Java mesmo é bem mais dificil... o script por ser uma versão "reduzida", com uma finalidade tem muitas coisas parecidas com as outras linguagens... bom... olha que dahora ^^

 

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Posicionamento</title>

<style type="text/css">

/* código feito por tiu uiLL */

* { /* zerando propriedades, com seletor glogal */

margin: 0;

padding: 0;

}

body{

margin-left: 50px; /* só para vizualizar sem estar "grudado na borda" */

margin-top: 50px;

}

#plataforma{

overflow:hidden;

height:1px;

clear:both;

}

/*hack para fazer o min-height somente no IE6, sem alterar os outros */

*html #div1, *html #div2, *html #div3 {

height: 100px;

width: 100px;

}

/* fim hack IE6 */

 

 

#div1 {

background-color:#00f; /* Azul */

min-height: 100px;

min-width: 100px;

float: left;

}

#div2 {

background-color:#0f0; /* Verde */

min-height: 100px;

min-width: 100px;

float: left;

}

#div3 {

background-color:#f00; /* Vermelha */

min-height:100px;

min-width:100px;

float: left;

}

.botao {

margin-left: 22px;

margin-top: 35px;

}

.text {

height:300px;

width:300px;

}

.text1 {

height:300px;

width:100px;

}

.text2 {

height:100px;

width:300px;

}

</style>

<script type="text/javascript">

window.onerror = erros;

function erros(msg, url, line)

{

window.alert("Erro Encontrado: "+msg+". \nLinha: "+line+".\nURL: "+url);

}

function aumenta(div){

if(document.getElementById(div)==div3){

document.getElementById(div).innerHTML = "<div class='text'></div>";

document.getElementById("div1").innerHTML = "<div class='text1'></div>";

document.getElementById("div2").innerHTML = "<div class='text2'></div>";

}

if(document.getElementById(div)==div1){

document.getElementById(div).innerHTML = "<div class='text'></div>";

document.getElementById("div3").innerHTML = "<div class='text1'></div>";

}

if(document.getElementById(div)==div2){

document.getElementById(div).innerHTML = "<div class='text'></div>";

document.getElementById("div3").innerHTML = "<div class='text2'></div>";

}

 

}

</script>

</head>

<body>

<div id="div3">

<input id='botao3' type='button' class='botao'

value='esticar' onclick="aumenta('div3')"/>

</div><!-- fecha div 3 Vermelha -->

 

<div id="div1">

<input id='botao1' type='button' class='botao'

value='esticar' onclick="aumenta('div1')"/>

</div><!-- fecha div 1 Azul -->

 

<div id="plataforma"></div>

<div id="div2">

<input id='botao2' type='button' class='botao'

value='esticar' onclick="aumenta('div2')"/>

</div><!-- fecha div 2 Verde -->

</body>

</html>

A grande sacada foi as condições if, em que acabei descobrindo que para a função "getElementById", não tentar entender o parâmetro como uma variável, e sim como uma string, era necessário declarar entre aspas!

Dai, só criei mais 2 classes, com os valores que eu pretendia esticar as outras divs, e fui montando as condições if...

 

:lol:

bom, tá ai...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito