Jump to content


Resolução Automatica


  • Faça o login para participar
134 replies to this topic

#1 BrunoBagni

BrunoBagni
  • Visitantes

Posted 31/07/2003, 18:53

:( A muito tempo venho procurando, mais não encontro. Eu estava vendo um script que algumas pagina tem, que você entra no site, ele se ajusta a sua resolução, não importa se é 800 ou se é 1024...
Eu vi um código onde você criava uma versão em 800 e outra em 1024 e colocava pra abrir. mais não é bem isso que eu quero.
eu procuro um codigo onde você cria a versão 800 e atumaticamente quando você entra no site ele deixa do tamanh da resolução, sem prescizar criar 2 versões...
por favor prescizo muito deste codigo. serei muitissimo grato!

#2 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 01/08/2003, 00:08

Hum... este tópico eu deveria pendurar...

Sinceramente, o único meio de controlar os tamanhos é usando porcentagem ou então, controlando via JS.

Normalmente, porcentagem é precário e mal implementada por parte dos browsers. Se você testar um width="100%" no IE, será diferente do width="100%" do Mozilla, e assim por diante.

Em vista disso, o meio mais correto de se ajustar um site é via JS.
Aumentando esse desgosto que temos pelos browsers, você pode acrescentar que até hoje, nada foi feito para tentar controlar a altura de objetos. Assim qualquer tentativa de height="90%" que possua conteúdo dinâmico, não funcionará...

Visando isso, novamente nos restou a opção... JS!

Podemos capturar a largura do documento usando window.innerWidth ou document.body.clientWidth no caso do IE e window.innerWidth ou document.documentElement.clientWidth no caso do Mozilla, Opera, Netscape.

Mas, o window.innerWidth naum possui uma precisão muito aceitável, então, acabamos ficando na deixa...

Primeiramente, vamos descobrir se o browser que se trata é o IE:

var ie = /msie/i.test(navigator.userAgent);

Esta linha testa e retorna verdadeiro se o browser for o MSIE e falso caso contrário. Feito isso, precisamos saber se o IE tem o suporte necessário à captura dos dados:

var ieBox = ie && (document.compatMode == null || document.compatMode == "BackCompat");

Pronto... agora temos o que queríamos!
Falta agora, fazer a captura dos dados...

var canvasEl = ieBox ? document.body : document.documentElement;
var w = window.innerWidth || canvasEl.clientWidth;
var h = window.innerHeight || canvasEl.clientHeight;


Pronto!!!

Agora você já tem o que queria... os valores.
Pra dimensionar, use:

document.getElementById("id_do_elemento").style.width = Math.max(0, w) + "px";

Utilizo Math.max para posterior compreensão.

Depois de tudo construído, teste... ele deve funcionar perfeitamente.
Tente então... redimensionar a janela. Já era... o script naum adiantou em nada.

Vamos então, melhorar nosso sistema.

Deixe a checagem do IE de lado...

Pegue a checagem e as linhas de edição de tamanho e agrupe numa função sem parâmetros...
Finalmente, adicione a chamada no evento window.onresize, assim:

window.onresize = checkSize;

Vejamos o exemplo que eu tenho rodando no meu site, o exemplo completo.
É só pra exemplificar, não vou comentá-lo.

      var ie = /msie/i.test(navigator.userAgent);
      var ieBox = ie && (document.compatMode == null || document.compatMode == "BackCompat");

      function checkSize() {
        var canvasEl = ieBox ? document.body : document.documentElement;
        var w = window.innerWidth || canvasEl.clientWidth;
        var h = window.innerHeight || canvasEl.clientHeight;

        document.getElementById("menu").style.height = Math.max(0, h) + "px";
        document.getElementById("treeMenu").style.height = Math.max(0, h - 95) + "px";
        document.getElementById("spacer").style.height = Math.max(0, h - 411) + "px";

        if(document.getElementById("menu").className == "menu-hidden") {
          size = w - 27;
          if(ie) box_size = w - 77;
        } else {
          size = w - 240;
          if(ie) box_size = w - 290;
        }

        document.getElementById("content").style.width = Math.max(0, size) + "px";
        document.getElementById("content").style.height = Math.max(0, h) + "px";
        if(ie) {
          document.getElementById("code_space").style.width = Math.max(350, box_size) + "px";
          document.getElementById("box2").style.width = Math.max(350, box_size + 10) + "px";
          document.getElementById("box3").style.width = Math.max(350, box_size + 10) + "px";
        }
      }

      window.onresize = checkSize;

Espero que isto ajude não só a você, mas a muitos outros programadores brasileiros.
Até hoje, só vi 4 sites brasileiros que funcionassem sem problemas em todas as resoluções. Um deles é o meu. Internacionalmente, já vi vários. A maioria usa a mesma base.

Não podia simplesmente mandar um "Valew". Seu post merecia destaque aki, e é o que eu vou fazer. O tópico ficará pendurado por motivos óbvios. Depois os moderadores podem enviá-lo pra tutoriais ou algo do tipo.

Grato,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#3 BrunoBagni

BrunoBagni
  • Visitantes

Posted 02/08/2003, 11:56

:lol: Poxa cara, que legal que até que enfim eu arranjei alguem que me respondesse isso. Procurava isso a muito tempo... Eu vou testar aqui.
Tenho certeza que isso ajudara muitas pessoas.
Valeu! Um abraço pro ce! :ok:

#4 BrunoBagni

BrunoBagni
  • Visitantes

Posted 02/08/2003, 12:20

Cara, eu acho qeu eu não entendi muito bem, eu coloquei o código:

<script language="JavaScript" type="text/JavaScript">
var ie = /msie/i.test(navigator.userAgent);
     var ieBox = ie && (document.compatMode == null || document.compatMode == "BackCompat");

     function checkSize() {
       var canvasEl = ieBox ? document.body : document.documentElement;
       var w = window.innerWidth || canvasEl.clientWidth;
       var h = window.innerHeight || canvasEl.clientHeight;

       document.getElementById("menu").style.height = Math.max(0, h) + "px";
       document.getElementById("treeMenu").style.height = Math.max(0, h - 95) + "px";
       document.getElementById("spacer").style.height = Math.max(0, h - 411) + "px";

       if(document.getElementById("menu").className == "menu-hidden") {
         size = w - 27;
         if(ie) box_size = w - 77;
       } else {
         size = w - 240;
         if(ie) box_size = w - 290;
       }

       document.getElementById("content").style.width = Math.max(0, size) + "px";
       document.getElementById("content").style.height = Math.max(0, h) + "px";
       if(ie) {
         document.getElementById("code_space").style.width = Math.max(350, box_size) + "px";
         document.getElementById("box2").style.width = Math.max(350, box_size + 10) + "px";
         document.getElementById("box3").style.width = Math.max(350, box_size + 10) + "px";
       }
     }

     window.onresize = checkSize;
</script>
na minha pagina... mais não ajustou ao tamanho do browser... em 800x600 ficava perfeito o site, ja em 1024 por 648 não ficou bom, ficou contorcido do mesmo jeito... por que será? :(

#5 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 02/08/2003, 13:37

O código que eu coloquei foi como exemplo, não pode ser usado por seu site.

A parte onde eu escrevi:

Agora você já tem o que queria... os valores.
Pra dimensionar, use:

document.getElementById("id_do_elemento").style.width = Math.max(0, w) + "px";


O id_do_elemento é o ID de um DIV, por exemplo...

Tente assim:

<DIV ID="teste">
Qquer coisa...
</DIV>

E depois, no source JS, isto:

document.getElementById("teste").style.width = Math.max(0, w) + "px";
document.getElementById("teste").style.height = Math.max(0, h - 300) + "px";

Isto deverá dimensionar a camada teste para 100% do documento no width e para o total menos 300px na altura.

Acho que com esta explicação agora tudo se resolve... =)

Valew,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#6 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 02/08/2003, 14:03

Conforme pedido, aqui vai um exemplo do sistema funcionando.

<HTML>
  <HEAD>
    <TITLE></TITLE>
    
    <STYLE>
      BODY { border: 0px; margin: 0px; }
      DIV#teste { position: absolute; border: 1px solid #888888; background: #F0F0F0; }
    </STYLE>

    <script>
      var ie = /msie/i.test(navigator.userAgent);
      var ieBox = ie && (document.compatMode == null || document.compatMode == "BackCompat");

      function checkSize() {
        var canvasEl = ieBox ? document.body : document.documentElement;
        var w = window.innerWidth || canvasEl.clientWidth;
        var h = window.innerHeight || canvasEl.clientHeight;

        document.getElementById("teste").style.width = Math.max(0, w - 50) + "px";
        document.getElementById("teste").style.height = Math.max(0, h - 100) + "px";
      }

      window.onload = checkSize;
      window.onresize = checkSize;
    </SCRIPT>
  </HEAD>

  <BODY>
    <DIV ID="teste">Conteúdo!!!</DIV>
  </BODY>
</HTML>

Espero que isto ajude.

Grato,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#7 Super-Malkaviano

Super-Malkaviano

    Turista

  • Usuários
  • 47 posts
  • Sexo:Não informado

Posted 17/08/2003, 23:06

Li o topico e acabei fcando curioso... qual eh o codigo que dependendo da resolução abre uma page diferente q ele falou no primeiro post?!

#8 Kleber

Kleber

    Magavilha!

  • Visitantes
  • PipPipPip
  • 210 posts
  • Sexo:Não informado

Posted 17/08/2003, 23:29

Li o topico e acabei fcando curioso... qual eh o codigo que dependendo da resolução abre uma page diferente q ele falou no primeiro post?!

Eu acho q é esse:

<script language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="alta.html";
}
else
{
  window.location="baixa.html";
}
//-->
</SCRIPT>


FLW pru C. B)
Nome: Kleber Anderson
E-mail: kleber.sylva@bol.com.br
MSN: kleber7777@hotmail.com

#9 Super-Malkaviano

Super-Malkaviano

    Turista

  • Usuários
  • 47 posts
  • Sexo:Não informado

Posted 19/08/2003, 23:22

Valeu ae... sou mtu newba em Java...

#10 Guilherme_bl

Guilherme_bl

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 30/08/2003, 20:38

meu problema é o seguite , eu coloco os tamanhos mas nada muda??por q será?
<site>www.6ames.1br.net</site>
<email>guilherme_bl@ig.com.br</email>
<icq>254791521</icq>
<msn>guilherme_bl@msn.com</msn>

#11 jeanpaulo5

jeanpaulo5

    ....

  • Usuários
  • 189 posts
  • Sexo:Não informado
  • Localidade:Rj - Rio de Janeiro

Posted 16/09/2003, 14:57

Conforme pedido, aqui vai um exemplo do sistema funcionando.

CODE 

<HTML>
<HEAD>
  <TITLE></TITLE>
 
  <STYLE>
    BODY { border: 0px; margin: 0px; }
    DIV#teste { position: absolute; border: 1px solid #888888; background: #F0F0F0; }
  </STYLE>
.........


Oq significa akele 'DIV#teste' ?


#12 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 16/09/2003, 23:16

Estou definindo um estilo CSS que se aplica a DIVs, em especial os especificados com o ID="teste".
Eu poderia ter criado classes, como o .teste { ... }, que poderia ser aplicado a qualquer tipo de elemento e/ou Id, bastando chamar a classe, mas no exemplo o que mais me convinha era o ID e a classe específica.

Qualquer dúvida, fala comigo.

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#13 Luke

Luke

    O Que Sei É Que Nada Sei

  • Usuários
  • 304 posts
  • Sexo:Não informado
  • Localidade:Bsb

Posted 24/09/2003, 10:24

é possivel usar uma espécie de include ( do php ou do ASP ) ou um link de referência a esse code... de maneira que eu possa inseri-lo em outras pages?

Caso seja... como?!
######################
"A humanidade está perdendo seus maiores gênios... Aristóteles faleceu, Newton bateu as botas, Einstein morreu, e eu não tô passando muito bem hoje... "

#14 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 24/09/2003, 11:00

Coloque tudo num arquivo e salve-o como *.js

Aí, no cabeçalho do seu documento, chame-o, assim:

<script src="arquivo.js"></script>

Todo o código JS será incluído.
Mas lembre-se: Seu documento deve conter as mesmas entidades que o JS controla, senão obterá erros.

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#15 Visitante_gabriel

Visitante_gabriel
  • Visitantes

Posted 24/09/2003, 15:32

Caras, e se eu estiver usando frames, como eu faria..... para redimensionar??? e possivel?




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq