Ir para conteúdo

POWERED BY:

Arquivado

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

willwalker

Como pegar a resolução ou area do navegador e passar para um div ?

Por , em Javascript

Recommended Posts

willwalker    2

willwalker
Postado

O que eu estou querendo fazer é :

 

*Pegar a arera do navegador em pixels, dessa área subtrair as margens do div, e o resultado, ser o height e width do div, por exemplo:

 

Area util 1280x690

 

Calculo width - 1280-200=1080

Calculo heght - 690-190=500

 

<div style="width: 1080; height: 500;">Conteudo</div>

 

Seria isso, e se por acaso o cara restaura o navegador em vez de estar em full screen, ai ele pega de novo a resolução e refaz os calculos para que o div fique sempre em um tramanho ajustavel no navegar.

 

Alguem pode me ajudar ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hantaro    1

hantaro
Postado

A parte de fullscreen mudar o tamanho e tal voce tera que pesquisar, mas para ter a resoluçao faça assim

 

alert(screen.width+' - '+screen.height);

com isso ai voce ja tem uma ideia

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mateus André Chies    0

Mateus André Chies
Postado

Olá

 

Utilizo a seguinte solução e funciona em todos os Nevegadores

 

var canvasEl = ieBox ? document.body : document.documentElement;

var w = window.innerWidth || canvasEl.clientWidth;

var h = window.innerHeight || canvasEl.clientHeight;

 

nesse momento as variavel w vale a largura e a variavel h vale a altura

 

basta utilizar como você necessitar

 

 

Forte Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Um amigo me ajudou a fazer com jQuery, e funciona que é uma maravilha, mas como sempre há uns probleminhas...

 

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

var div = document.getElementById('conteudo');

var teste = document.getElementById('teste');

 

var largura = $(document).width();

var altura = $(document).height();

 

div.style.width = largura - 181;

div.style.height = altura - 208;

teste.innerHTML = largura + 'x' + altura;

 

});

</script>

Ele faz tudo que eu quero, mas só quando abre a página, se o cara mexe no browser, ele continua do mesmo jeito, ai para arrumar o div tem que dar um F5. Então eu testei colocando nome a função para usar um setInterval(function, 1);

 

No IE eu faço o full screen ou qualquer coisa, e ele verifica a resolução e vai diminuindo pixel por pixel, muito bosta, deve ser o maravilho IE, e nos outros acontece nada. Alguem pode me ajudar a fazer com que o script verifique que mudou a resolução e faça a verificação de novo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Segue:

 

<html>
<head>
<style>
#conteudo
{
position:absolute;
display: block;
top:0px;
left:0px;
background-color:red;
}
</style> 
<script type="text/javascript" src="jQuery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$(window).load(medidas);
$(window).resize(medidas);

});

function medidas() {

	var largura = document.body.clientWidth;
	var altura = document.body.clientHeight;
		$("#conteudo").show().css({'width': largura+"px",'height': altura+"px"});
	
 } 
</script>

</head>
<body>
<div id="conteudo"></div>

</body>
</html>

Testado no ie7, ff3 e opera9.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Nas variáveis coloca assim:

 

var largura = window.innerWidth  || document.body.clientWidth;
var altura =  window.innerHeight  || document.body.clientHeight;

Falta colocar a subtração. Coloca testa e manda resposta.

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Só para não ter que criar outro tópico, tem como em javascript eu criar uma função assim:

 

O cara clica em um link, o javascript lê o nome por exemplo OnClick="pagina('contato')", e ai o javascript pega o arquivo contato.php e carrega dentro da div conteudo, como faço xD ?

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