Ir para conteúdo

POWERED BY:

Arquivado

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

charion

[Resolvido] Renderização da Página!

Por , em Javascript

Recommended Posts

charion    0

charion
Postado

Pessoal o negocio é um seguinte, estou tentando fazer um script que calcule a altura interna do brower. Só que o envento onLoad esta sendo carregado antes da página ser renderizada completamente, tipo esta calcula mais ou menos 1/4 da página como a altura total. Só que se eu tiro o DOCTYPE isso não acontece e a altura da página é calculada normalmente. Alguém tem alguma ideia do que esta acontecendo?

 

 

 

<?xml version="1.0" encoding="iso-8859-1" ?>

<!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">

<head>

<title>Teste</title>

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

<style type="text/css">

div{border:solid 1px #000;}

</style>

<script type="text/javascript">

window.onload = function(){

document.getElementById("header").style.height = getHeight() + "px";

}

 

function getHeight(){

var height = (document.body.clientHeight - 100) * 0.9;

return height;

}

</script>

</head>

<body>

<div id="header">

<div id="logo"><p>LOGOTIPO</p></div>

<div id="menu">MENU</div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Em que navegador você testou?

Pra que essa linha acima do DOCTYPE?

<?xml version="1.0" encoding="iso-8859-1" ?>
??

Compartilhar este post

Link para o post
Compartilhar em outros sites

charion    0

charion
Postado

Teste no Firefox3, no IE7 e no Safari3

Essa linha é o próprio eclipse que gera, mais não faz nenhuma diferença.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faz sim rapaz.

No IE6, se você coloca o XML Prologo em seu documento, o browser passa a funcionar em Quirks Mode.

http://tableless.com.br/?s=quirks

O "quirks mode", é horrível!

http://revolucao.etc.br/archives/category/strict-mode/

A solução da Microsoft então, foi usar um prólogo (Prolog de XML) antes do Doctype que ativa o Quirks Mode ao mesmo tempo em que utiliza um DocType aceito e validado pela W3C

Enfim, retire isso.

Faz isso aqui para você ver:

window.onload = function(){
	document.getElementById("header").style.height = getHeight() + "px";
	alert(getHeight());
}
Oque você pretendia com isso ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

charion    0

charion
Postado

Não entendi o código que você postou?

De onde vem o getHeight()?

 

window.onload = function(){
	document.getElementById("header").style.height = getHeight() + "px";
	alert(getHeight());
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

charion    0

charion
Postado

Ah sim eu estou tentando desenvolver um teste onde o tamanho dos objetos (Ex: <div>,<p>...) esteja diretamente relacionado com o tamanho da página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Vem da sua função.

Rodei em 2 browsers diferentes, e cada um respondeu uma coisa.

 

Explica oque você quer fazer.. que esse script parece estar errado.

Só coloquei o alert para você ver a diferença de valores.

 

@edit

Tá.. e porque não usa simplesmente medidas em % no css ?

dessa forma, não vai funcionar.. você está capturando errado..

veja que a tua função para capturar o height, não está consistente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

charion    0

charion
Postado

Sim para alguns elementos pode-se usar mais no caso de um div você não consegue mensurar a sua altura através de % .

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ahn ? como não?

<!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">
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
#porcentagem {
	height: 50%;
	width: 50%;
	background-color: #f0f;
}
</style>
</head>
<body>
<div id="porcentagem">
	Vai ocupar exatamente 1/4 da viewport, para verificar, fique redimensionando a janela do browser
</div>
</body>
</html>
;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

charion    0

charion
Postado

Caraca é verdade, mais o segredo disso é você ter definir a height do html. Isso não imaginava.

Mais era isso mesmo. Muito obrigado mesmo.

 

html, body {
	height: 100%;
}

 

 

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

Compartilhar este post

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

Informação importante

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

  Aceito