Ir para conteúdo
Fórum Script Brasil
  • 0

Detectar Altura do ecra e correr script para calcular %

m3io

Perguntado por m3io,

 Share

Pergunta

m3io

m3io

Postado
Postado

Oi gente, alguém sabe uma maneira de detectar a altura do ecra do utilizador e gerar uma percentagem???

tipo

eu no mozilla e cromo tenho no css e funciona direito

div#menu
{
float: left;
width: 150px;
    
/* altura da coluna da esquerda em % */    
height: 70%;  
padding-top: 2em;
}
mas no internet explorer a minha % não funciona então tenho de meter por exemplo height:450px; ,assim tava a pensar fazer um script para detectar a altura do ecra do user por exemplo eu tenho 1024x728 
$var =  728 (detecta altura do user)
$percent = 0.70
$nova_var = $var*$percent
echo $nova_var  //(509.6)

e fazia no IE 
//css
height:509px;

ou algo parecido , so mesmo para o ie e o mozila terem as mesmas medidas , mesmo usando percentagens.

aki esta o link para a estrutura que comecei a trabalhar agora

http://cybercentro-braganca.pt/~m3io/testes/multimedia/

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
vini_loock

vini_loock

Postado
Postado

Você tem que fazer isso com javascript(com o screen.width), pois php só trabalha no servidor.

Dai você faz a porcentagem atravez do valor retornado.

function screen(){
var screen = screen.width;
var porc = 90;//90%
var width = (screen.porc)/100;
document.getElementById("menu").style.width = width + 'px';
}

Link para o comentário
Compartilhar em outros sites
  • 0
m3io

m3io

Postado
  • Autor
Postado (editado)

boas , parece muito pratico e facil

eu coloquei assim e não funcionou

devo manter o meu width:70%; no css ou eliminar?

<script type="text/javascript">
function screen(){
    var screen = screen.width;
    var porc = 70;//70%
    var width = (screen.porc)/100;
    document.getElementById("menu").style.width = width + 'px';
    document.getElementById("direita").style.width = width + 'px';
    }
</script>
e depois 
<body onload="screen()">

mas não deu nada no IE. pode-me corrigir onde errei??? valeu

Editado por m3io
Link para o comentário
Compartilhar em outros sites
  • 0
vini_loock

vini_loock

Postado
Postado (editado)

Só para tirar uma duvida.

Troque por isso:

<script type="text/javascript">
function screen(){
    var screen = screen.width;
    var porc = 70;//70%
    var width = (screen.porc)/100;
alert(screen + '\n' + porc + '\n' + width);
    }
</script>
E me fale o que apareceu ... Você quer definir o height e não o width certo? Então faça assim:
function screen(){
        var screen = window.screen.height;
        var porc = 70;
        var height = (screen*porc)/100;
        document.getElementById("menu").style.height = height + 'px';
        document.getElementById("direita").style.height = height + 'px';
    }

E tire o 70% do css

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites
  • 0
m3io

m3io

Postado
  • Autor
Postado

oi

o seu primeiro exemplo não fez nada

o ultimo tb não

, eu retirei o height do css então ele fica pekeno em todo o lado porque não recebe nenhuma instrucao de height

<head>
   <link rel="stylesheet" href="css/style.css" type="text/css" >
<script type="text/javascript">

    var resheight = screen.height;
    var porc = 70;
    var height = (resheight*porc)/100;

    document.write(resheight);
    document.write(' <-Antiga) . (nova-> ');
    document.write(height);

    document.getElementById("menu").style.height = height + 'px';
    document.getElementById("direita").style.height = height + 'px';
</script>

dei um print pra ver se tava dando correto, mas tanto no IE como nos outros nada funciona

Link para o comentário
Compartilhar em outros sites
  • 0
m3io

m3io

Postado
  • Autor
Postado

o seu script não tava funcionando, mas com a sua ajuda fui capaz de criar exactamente o que queria :D muito obrigado

olha ai

<script type="text/javascript">
function setHeight()
{
    var resheight = screen.height;
        var porc = 70;
    var browser     = '';
    // BROWSER?
    if (browser == '')
    {
        if (navigator.appName.indexOf('Microsoft') != -1)
        {
            var velha = ((resheight*porc)/100)/1.45;
            var height = velha + "px";
        }
        else 
        {
                var height = porc + "%";
        }
    }
       
document.getElementById("menu").style.height= height;
document.getElementById("direita").style.height= height;
}
</script>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
<body onLoad="setHeight()">

alterei o script para so detectar a altura no IE e transformar em 70% de pixel, no mozzila e crome deixo tar a % original

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...