146 replies to this topic

[Guilherme Blanco]

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,

[Guilherme Blanco]

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,

[Guilherme Blanco]

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,

[Super-Malkaviano]

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

[Kleber]

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.

[Super-Malkaviano]

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

[Guilherme_bl]

meu problema é o seguite , eu coloco os tamanhos mas nada muda??por q será?

[jeanpaulo5]

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' ?

[Guilherme Blanco]

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,

[Luke]

é 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?!

[Guilherme Blanco]

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,