Obter altura de um Div dinâmicamente e aplicar a outro Div

aendereng · Setembro 11, 2012, 2:30pm

Olá pessoal tudo bem ?
Gostaria por gentileza da contribuição de vocês para resolver o seguinte problema: Quero obter dinamicamente a altura de um Div e aplicar a outro, tipo, tenho um menu do lado esquerdo e um div do lado direito, queria igualar as alturas ; acontece que o div do lado direito não possui altura definida, ele vai ter a altura da página que vai abrir dentro dele com Includes php.Então eu teria que obter a altura do div no momento em que a página for aberta dentro dele e aplicar essa altura ao menu esquerdo, a DiV do lado direito vai ter um altura dinâmica que dependerá da página que abrir dentro dele.
Eu já tenho um script mas ele só iguala as altura se eu fornecer a altura a Div do lado direito, ou seja não funciona de forma dinâmica.

<script type="text/javascript">
     jQuery(document).ready(function() {
	 var highestCol = Math.max(jQuery('#sidebar').height(),jQuery('#main').height()); // Pega altura da Div main
	 jQuery('#sidebar').height(highestCol); //Aplica altura da div main à div sidebar
     });
</script>

Valeu pessoal !!

natanaelv · Setembro 11, 2012, 2:42pm

Dá uma olhada na propriedade offsetHeight de javascript, deve te ajudar.

windsofhell · Setembro 12, 2012, 2:34am

Ola,

Existe um plugin para JQuery que detecta qualquer mudanca num elemento HTML.
Aqui tem um blog post mostrando como usa-lo e com links para download.

Se vc quiser fazer isso na mao, eu fiz um exemplo que talvez sirva para voce. A ideia eh disparar um evento quando novo conteudo for adicionado ao div, ai vc adiciona um listener para esse evento, pega a a altura do div que foi modificado e aplica no outro div.

<html>
	<head>
		
		<title>test jquery</title>
		
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" />		

		<style>
			.main { background-color: blue; }
			.second { background-color:red;}
		</style>
		
		<script type="text/javascript">
			
			$(document).ready(function() {
			
				$("#mainDiv").bind("divResized", function(){
						var height = $(this).height();
						$("#secondDiv").height(height);
				});			
			
				$("#button1").on("click", function() {
					$("#mainDiv").html("New text added<br>New text added<br>New text added<br>New text added<br>");
					$("#mainDiv").trigger("divResized"); 
				});			
			});
			
		</script>
		
	</head>

	<body>
		
		<div id="mainDiv" class="main">test1</div>
		<div id="secondDiv" class="second">test2</div>
		
		<br>
		<input type="button" id="button1" value="Change"/>
		<br>

	</body>
</html>

Aqui tem esse exemplo rodando para voce testar: http://jsfiddle.net/tyqdj/

//Daniel

aendereng · Setembro 12, 2012, 6:39am

[quote=windsofhell]Ola,

Existe um plugin para JQuery que detecta qualquer mudanca num elemento HTML.
Aqui tem um blog post mostrando como usa-lo e com links para download.

Aqui tem esse exemplo rodando para voce testar: http://jsfiddle.net/tyqdj/

//Daniel[/quote]

windsofhell. valeu Brother !!! Eu implementei o código que vc passou e funcionou blz, parece que vai resolver meu problema, eu necessito exatamente desse esquema. Como a Div conteúdo não terá altura definida eu tenho que capturar essa altura no momento em que a página for aberta, ou seja quando eu clicar no Link aciono o evento click que executa o JS , captura a altura do Div e aplica no outro Div, perfeito Brolther ,vou adaptar no meu código agora e testar.
Um grande abraço e obrigado pelas dicas.Show de bola rapaz .

aendereng · Setembro 12, 2012, 7:35am

windsofhell pôxa infelizmente não funcionou , o Script só funciona quando vc já tem o Div preenchido com o conteúdo, daí é só clicar no botão , que as alturas das Divs são igualadas, quando a div não tem conteúdo , e este vai ser carregado posteriormente com includes php ,não funciona.Mas de qualquer forma muito obrigado pelas dicas.Abraço brother.

windsofhell · Setembro 12, 2012, 8:38am

Ok, tenta fazer isso entao:

$("#mainDiv").bind("DOMNodeInserted", function(){
	var height = $(this).height();
        $("#secondDiv").height(height);
});

//Daniel

aendereng · Setembro 12, 2012, 9:12am

Ok, tenta fazer isso entao:

$("#mainDiv").bind("DOMNodeInserted", function(){
	var height = $(this).height();
        $("#secondDiv").height(height);
});

//Daniel[/quote]
Valeu de novo Brother mas não deu certo ainda , do outro jeito acho que até deve estar melhor.Vou postar meu código pra ver se ajuda;

<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style>
.dialog { display:none; }            
.main { background-color: blue; }
.second { background-color:red;}
</style>
<script>
            $(document).ready(function() {  
                $("#mainDiv").bind("divResized", function(){  
                        var height = $(this).height();  
                        $("#secondDiv").height(height);  
                });           
                $("#button1").on("click", function() {   
                    $("#mainDiv").trigger("divResized");   
                });           
            });  
</script>
</head>

<body>
<div id="mainDiv" class="main">
  <?php
    if (isset($_GET['local'])){
    switch ($_GET['local']){
        case 01:
          include "pg.php";
          break;
	   }
	}
	?>	  
</div>
<div id="secondDiv" class="second">test2</div>        
        <h3><br>
          <a href="?local=01" id="button1" >Carregar Página </a><br>
        </h3>
</body>
</html>

O link está chamando a página " pg.php" para dentro do Div “mainDiv” , por isso é complicado, tem que ser um negócio em tempo de execução.
Obrigado .

aendereng · Setembro 12, 2012, 9:55am

Consegui Resolver usando a dica do amigo rai3mb ,do fórum Viva o Linux.
Segue o código completo:

<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style>
.dialog { display:none; }            
.main { background-color: #FFC; }
.second { background-color:red;}
</style>
</head>

<body>
<div id="paginas" class="main">
  <?php
    if (isset($_GET['local'])){
    switch ($_GET['local']){
        case 01:
          include "pg.php"; //Página a ser aberta no Div
          break;
	   }
	}
	?>
<script>
$(document).ready(function() { 
var hDiv = 0;
$.ajax({
   dataType: 'html',
   type: 'POST',
        success: function(data, textStatus) {
          //$('#mainDiv').html(data);        //recebendo o conteudo via ajax na div
          hDiv = $('#paginas').height();   // obtem a altura
          $('#menu').height(hDiv);      // configura a nova altura
         }
   })
 });
  
</script>	  
</div>
<div id="menu" class="second">Div Redimensionada</div>        
        <h3><br>
          <a href="?local=01" >Carregar Página </a><br>
        </h3>
</body>
</html>

A página é carregada com o include e a altura do Div “paginas” e transmitida para o div " menu "

system · Janeiro 6, 2016, 5:10am

Obter altura de um Div dinâmicamente e aplicar a outro Div

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI