Aumentar Div

Jessi_1412 · Agosto 8, 2014

Boa Tarde

Tenho uma div em tamanho de 300px, quando clicada gostaria que a div ficasse do tamanho do navegador.

Alguém conhece algum efeito usando jquery ou html5 assim.

William Bruno · Agosto 8, 2014

Basta alterar o width dela para 100%

lokaodomau · Agosto 8, 2014

Basta alterar o width dela para 100%

Se ela estiver dentro de outra DIV com width: 400px; (por exemplo), o tamanho é herdado, não?

Algo como document.getElementById('id_da_div').style.width = document.width + 'px'; com JS funciona?

William Bruno · Agosto 8, 2014

Sim, o tamanho é herdado.

Ou isso, ou então colocar um absolute no elemento, o que fará com que ele busque referência ao primeiro pai com relative ou absolute para pegar o 100% de largura.

Jessi_1412 · Agosto 12, 2014

Bom dia.

Tenho esse codigo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo/estilo_teste120814.css">
<title>Tv- Lembretes</title> 
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<!--Inicio script de teste para Tv-->
 <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){

                var d = {};
				var bsuperior = {};
				var blateral = {};
				var pai = {};
                var speed = 900;
                if(!isFullscreen){ // MAXIMIZATION

                    d.width = "100%";
                    d.height="100%";                    
                    /*d.left="0%";
                    d.top="0%";
                    d.marginLeft="0px";*/
					
					bsuperior.width = "100%";  

					blateral.height="100%";					
                   
					
					pai.display="absolute";

                    $("#corpo1").animate(d,speed);
					 $("#barra_superio").animate(bsuperior,speed);
					 $("#barra_lateral").animate(blateral,speed);
					//$("#coluna_1").attr("style","display:'absolute'");
                    isFullscreen = true;

                }else{ // MINIMIZATION

                    d.width="300px";
                    d.height="100px";
                    d.left="50%";
                    d.top="50%";
                    d.marginLeft="50px";


                    $("#corpo1").animate(d,speed);
					$("#barra_superio").animate(bsuperior,speed);
					$("#barra_lateral").animate(blateral,speed);
                    isFullscreen = false;
                }

            }

        </script> 



<div id="corpo" >
    
	<div id="coluna_1">
  
      	<div id="corpo1">
			<div id="barra_superio">Teste</div>           
            <div id="barra_lateral"><h4 class="texto_vertical">OIL & GAS</h4></div>
			<div id="botao"><input type='button' value='fullscreen' onclick='fullscreen();' /></div>
      	</div> 
	</div>
</div>

@charset "utf-8";

#corpo {
	background-color:#999;	
	min-width:1024px;
	min-height:1000px;


	}

	/*inicio css coluna 1*/
#coluna_1 {
	position:absolute;
	width:400px;
	height:850px;
	margin-right:10px;
	background-color:#BBE6C6;
	
	}

#corpo1{
   	 /*background-color:#DCDCDC;*/
	 border-radius: 8px 8px 8px 8px;
	 border: 4px;
	 border-style: solid;
	 border-color:#0000FF;
	 min-height: 200px;
	 min-width: 300px;
	 margin-top:50px;
	 margin-left:50px;
	 margin-right:200px;
}

#barra_superio { 
	 background-color:#053;
	 /*border: 2px;
	 border-style: solid;
	 border-color:#0000FF;*/
	 border-radius: 0px 8px 0px 0px;
	 min-width:242px;
	 height:40px;
	 float:right;
	 

}

#barra_lateral {
	 background-color:#065;
	 /*border: 2px;
	 border-style: solid;
	 border-color:#0000FF;*/
	 border-radius: 8px 0px 0px 8px;
	 width:50px;
	 min-height:200px;
	 float:left;
}

#botao{
	position:absolute;
	margin-top:170px;
	margin-left: 220px;
}

Vou ter 3 colunas iguais a coluna que esta em verde, se notarem quando clico no botão de fuulscren a div cresce, mas não ocupa toda a tela preciso que oculpe a tela toda escondendo as outras divs que terem em outras colunas.

Marlon Pacheco · Agosto 12, 2014

Buenas.

Nesse trecho:

if(!isFullscreen){ // MAXIMIZATION

                    d.width = "100%";
                    d.height="100%";

Mude para:

if(!isFullscreen){ // MAXIMIZATION

                    d.width = window.innerWidth;
                    d.height= window.innerHeight;

Jessi_1412 · Agosto 12, 2014

Bom dia, Marlon

Então ate funciona no chrome, porém no IE não.

Ai suger os seguintes problemas.

1) No IE precisa muito funcionar :(

2) Nos outros navegadores funciona, mas pega barra de rolagem para lateral algo que não pode acontecer por nada e ainda não sobrepoe as outras divs.

Olha o codigo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo/estilo_teste120814.css">
<title>Tv- Lembretes</title> 
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<!--Inicio script de teste para Tv-->
 <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){

                var d = {};
				var bsuperior = {};
				var blateral = {};
				var pai = {};
                var speed = 900;
                if(!isFullscreen){ // MAXIMIZATION
					
					d.width = window.innerWidth;
                    d.height= window.innerHeight;
					
                    /*d.width = "100%";
                    d.height="100%"; */                   
                    /*d.left="0%";
                    d.top="0%";
                    d.marginLeft="0px";*/
					
					bsuperior.width = "100%";  

					blateral.height="100%";					
                   
					
					pai.display="absolute";

                    $("#corpo1").animate(d,speed);
					 $("#barra_superio").animate(bsuperior,speed);
					 $("#barra_lateral").animate(blateral,speed);
					//$("#coluna_1").attr("style","display:'absolute'");
                    isFullscreen = true;

                }else{ // MINIMIZATION

                    d.width="300px";
                    d.height="100px";
                    d.left="50%";
                    d.top="50%";
                    d.marginLeft="50px";


                    $("#corpo1").animate(d,speed);
					$("#barra_superio").animate(bsuperior,speed);
					$("#barra_lateral").animate(blateral,speed);
                    isFullscreen = false;
                }

            }

        </script> 



<div id="corpo" >
    
	<div id="coluna_1">
  
      	<div id="corpo1">
			<div id="barra_superio">Teste</div>           
            <div id="barra_lateral"><h4 class="texto_vertical">OIL & GAS</h4></div>
			<div id="botao"><input type='button' value='fullscreen' onclick='fullscreen();' /></div>
      	</div> 
	</div>
	
	<div id="coluna_2">
    
     	<div id="corpo2">
			<div id="barra_superio2"></div>           
            <div id="barra2"><h3 class="texto_vertical">Texto</h3></div>
     	</div>
</div>

@charset "utf-8";

#corpo {
	background-color:#999;	
	min-width:1024px;
	min-height:1000px;


	}

	/*inicio css coluna 1*/
#coluna_1 {
	position:absolute;
	width:400px;
	height:850px;
	margin-right:10px;
	background-color:#BBE6C6;
	
	}

#corpo1{
   	 /*background-color:#DCDCDC;*/
	 border-radius: 8px 8px 8px 8px;
	 border: 4px;
	 border-style: solid;
	 border-color:#0000FF;
	 min-height: 200px;
	 min-width: 300px;
	 margin-top:50px;
	 margin-left:50px;
	 margin-right:200px;
}

#barra_superio { 
	 background-color:#053;
	 /*border: 2px;
	 border-style: solid;
	 border-color:#0000FF;*/
	 border-radius: 0px 8px 0px 0px;
	 min-width:242px;
	 height:40px;
	 float:right;
	 

}

#barra_lateral {
	 background-color:#065;
	 /*border: 2px;
	 border-style: solid;
	 border-color:#0000FF;*/
	 border-radius: 8px 0px 0px 8px;
	 width:50px;
	 min-height:200px;
	 float:left;
}

#botao{
	position:absolute;
	margin-top:170px;
	margin-left: 220px;
}

#coluna_2 {
	position:absolute;
	left:430px;
	width:400px;
	height:850px;
	background-color:#BBE6C6;
	}

#corpo2{ 
	 background-color:#DCDCDC;
	 border: 4px;
	 border-style: solid;
	 border-color:#2E8B57;
	 border-radius: 8px 8px 8px 8px;
	 height:150px;
	 width:300px;
	 margin-top:50px;
	 margin-left:50px;
	 margin-right:200px;
}

#barra_superio2{ 
	 background-color:#053;
	 border-radius: 0px 8px 0px 0px;
	 width:250px;
	 height:40px;
	 float:right;
}

#barra_lateral2 { 
	 background-color:#065;
	 border-radius: 8px 0px 0px 8px;
	 width:40px;
	 height:150px;
	 float:left;
}

Será qe vc tem alguma ideia para me ajudar. Obrigado

Entrar

Arquivado

Aumentar Div

Recommended Posts

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lokaodomau 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante