[Resolvido] div tamanho do browser

[Fernando Wobeto 0]

Nao sei se o lugar é certo para postar minha duvida mas vamos la, espero tbm que me entendam.

 

Vejam a imagem abaixo:

 

Trata-se de uma aplicação desenvolvida por um colega nosso ai que possui o problema que gostaria de ver com vcs.

Quando você clica no botao Cadastrar novo contato chama uma funcao JS que cria uma Div (quadrado mais escuro lado esquerdo superior) e depois recebe atraves do ajax um formulario dentro dela. Para criacao dessa div (layer mais escuro) ha uma funcao JS que verifica o tamanho do browser do cara (area de trabalho do browser) e cria a div do tamanho total.

 

Só que se o usuario, diminui sua area de trabalho do browser, clica no botao Cadastrar novo contato que aparece a div escura (tamanho da tela atual do browser - onde esta o problema) com o formulario no interior e depois maximiza a janela do browser, essa div fica do tamanho anterior do browser.

 

Como solucionar isto?

 

Obrigado e espero que tenha sido claro!

[William Bruno 1501]

Provavelmente mechendo nessa função aqui:

ha uma funcao JS que verifica o tamanho do browser do cara (area de trabalho do browser) e cria a div do tamanho total.

 

como ele faz isso ? através da resolução não é o correto.

[Fernando Wobeto 0]

Tudo o que envolve a criacao dessa div está abaixo:

 

Esta função gera a div

function exibirBgBody() {
	// Seleciona a tag body. item(0) por que só existe uma tag body
	var tagBody = gEs('body').item(0);
	// Pega os tamanhos atuais da página, como largura, altura, ...
	var sizesPage = getPageSize();
	// Vamos criar uma tag div
	var bgBody = document.createElement('div');
	// Setar o atributo ID a div criada
	bgBody.setAttribute('id','bgBody');
	// Essa div terá o tamanho exato da página
	bgBody.style.height = arrayPageSize[1] + 'px';
	// Essa div terá a largura exata da página
	bgBody.style.width = arrayPageSize[0] + 'px';
	// Evita criar a div novamente
	if (!gE('bgBody')) {
		tagBody.insertBefore(bgBody, tagBody.firstChild);
	}	
}

Esta funçao é a responsável por retornar um array com as dimensoes do browser que é chamado na funçao de criacao da div:

function getPageSize(){	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

}

E este abaixo é o CSS da div criada:

#bgBody {
	background-color: #000;
	-moz-opacity: 0.6;
	opacity: 0.6;
	filter:alpha(opacity=60);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
}

Então, como eu poderia fazer para que isso fique correto???

 

Obrigado mais uma vez

[William Bruno 1501]

Poste o minimo de scripts necessários para que possamos rodar os teus códigos.

Só nesse trecho ai, ainda ficou 'faltando' 2 funções:

 

gE(), gEs()

impossível testar assim.

 

Note como fizemos a captura do tamanho da tela aqui:

http://forum.imasters.com.br/index.php?/topic/377851-floater-animado-sobrepondo-a-pagina-em-qualquer-resolucao/

 

 

já que a tua dúvida não é css.

Tópico Movido:

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

[Fernando Wobeto 0]

Ah, me desculpe, esqueci destas duas funcoes,

 

Mas veja abaixo aqui um codigo completinho disso funcionando...ou nao...depende do ponto de vista por estar acontecendo esse problema!!!

<!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=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gE(ID) {
	return document.getElementById(ID);
}

// Utilizado para evitar de digitar: document.getElementsByTagName toda hora, tornando o processo mais prático
function gEs(tag) {
	return document.getElementsByTagName(tag);
}
function exibirBgBody() {
	// Seleciona a tag body. item(0) por que só existe uma tag body
	var tagBody = gEs('body').item(0);
	// Pega os tamanhos atuais da página, como largura, altura, ...
	var sizesPage = getPageSize();
	// Vamos criar uma tag div
	var bgBody = document.createElement('div');
	// Setar o atributo ID a div criada
	bgBody.setAttribute('id','bgBody');
	// Essa div terá o tamanho exato da página
	bgBody.style.height = arrayPageSize[1] + 'px';
	// Essa div terá a largura exata da página
	bgBody.style.width = arrayPageSize[0] + 'px';
	// Evita criar a div novamente
	if (!gE('bgBody')) {
		tagBody.insertBefore(bgBody, tagBody.firstChild);
	}	
}
function getPageSize(){	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

}
</script>
<style type="text/css">
#bgBody {
	background-color: #000;
	-moz-opacity: 0.6;
	opacity: 0.6;
	filter:alpha(opacity=60);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
}
</style>
</head>

<body>
<a href="#" onclick="exibirBgBody();">abrir janela</a>
</body>
</html>

Muito obrigado novamente

[William Bruno 1501]

Só que se o usuario, diminui sua area de trabalho do browser, clica no botao Cadastrar novo contato [..] e depois maximiza a janela do browser, essa div fica do tamanho anterior do browser.

 

 

o width é fácil de pegar..

pode trocar:

bgBody.style.width = arrayPageSize[0] + 'px';

por

bgBody.style.width = '100%';//linha 27

que você não terá nenhum problema, e ainda vai economizar uma boa parte desse script. Agora o probleminha é o height

o mesmo funcionaria, para a altura

bgBody.style.height = '100%';

se a página não pudesse ser mais alta que o máximo da viewport. No caso, 100% do body diz respeito à viewport, e um site pode ter mais altura que isso.

 

Sugiro que você olhe novamente o script que postei, para ver como fiz lá.

[Fernando Wobeto 0]

hummm, realmente, troquei o width para 100% e funcionou..apenas preciso ver sobre o height...Vou dar uma olhada no post que você me passou!!!

 

Muito obrigado por enquanto...

 

Ahhh, um exemplo do DIV que se auto ajusta de acordo como quero é o orkut....na hora que você clica em sua imagem do perfil para alterá-la, onde abre essa div de fundo e fica se auto ajustando em width e height de acordo como você altera o tamanho da tela do browser...

 

 

brigadao ae!!!

[Fernando Wobeto 0]

Nossa Willian, resolvi de forma tao facil que nem eu imaginava. Como essa DIV que crio herda herança da pai BODY, eu apenas disse a body que ele vai ter seu style heigth 100%

 

ai coloquei a heigth 100% da div tbm...veja o resultado:

<!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=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gE(ID) {
        return document.getElementById(ID);
}

// Utilizado para evitar de digitar: document.getElementsByTagName toda hora, tornando o processo mais prtico
function gEs(tag) {
        return document.getElementsByTagName(tag);
}
function exibirBgBody() {
        // Seleciona a tag body. item(0) por que s existe uma tag body
        var tagBody = gEs('body').item(0);
        // Pega os tamanhos atuais da pgina, como largura, altura, ...
        var sizesPage = getPageSize();
        // Vamos criar uma tag div
        var bgBody = document.createElement('div');
        // Setar o atributo ID a div criada
        bgBody.setAttribute('id','bgBody');
        // Essa div ter o tamanho exato da pgina
        bgBody.style.height = '100%';
        // Essa div ter a largura exata da pgina
        bgBody.style.width = '100%';
        // Evita criar a div novamente
        if (!gE('bgBody')) {
                tagBody.insertBefore(bgBody, tagBody.firstChild);
        }       
}
function getPageSize(){ 
        var xScroll, yScroll;
        
        if (window.innerHeight && window.scrollMaxY) {  
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
        }
        
        var windowWidth, windowHeight;
        if (self.innerHeight) { // all except Explorer
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
        }       
        
        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
                pageHeight = windowHeight;
        } else { 
                pageHeight = yScroll;
        }

        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){      
                pageWidth = windowWidth;
        } else {
                pageWidth = xScroll;
        }

        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

}
</script>
<style type="text/css">
#bgBody {
        background-color: #000;
        -moz-opacity: 0.6;
        opacity: 0.6;
        filter:alpha(opacity=60);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
}
</style>
</head>

<body style=" height:100%;">
<a href="#" onclick="exibirBgBody();">abrir janela</a>
</body>
</html>

Muito obrigado por sua ajuda amigo, abraço!

[Fernando Wobeto 0]

ixxxxxxxxxxxx, testando melhor, se eu tiver rolagem verticalmente maior que o browser no tamanho maximo do height monitor / browser ele cria apenas até ai....nao até o final da pagina height do browser com a rolagem....

 

vou pesquisar melhor! =(

[Fernando Wobeto 0]

Entao,

 

agora, definitivamente, resolvi o problema utilizando apenas CSS para isso tudo:

 

codigo CSS

html {
        height: 100%;
}
body {
	height: 100%;
	margin:0;
	padding:0;
}
#bgBody {
	background-color: #000;
	-moz-opacity: 0.1;
	opacity: 0.1;
	filter:alpha(opacity=10);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	min-height:100%;
	height:auto;
	width:100%;
}

e a funcao JS para criar a div na tela apenas:

function exibirBgBody(){
	var tagBody = gEs('body').item(0);
	var bgBody = document.createElement('div');
	bgBody.setAttribute('id','bgBody');
	if (!gE('bgBody')) {
		tagBody.insertBefore(bgBody, tagBody.firstChild);
	}	
}

Well done! Obrigado Willian pela sua ajuda!!!