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,

Aff...

Não há como simplesmente "minimizar" o browser, mas como sempre, há como burlar isto.
O meio possível é alterando o posicionamento da janela, enviando ela para uma dimensão que não seja possível a visualização.

Para fazer isto, dá uma olhadinha no código abaixo:

function min(){
top.window.moveTo(0,-4000);
if(top.opener&&!top.opener.closed){
top.opener.window.focus();
top.window.moveTo(0,0);
}
top.window.blur();
}

O que este Script faz, na realidade, é jogar a janela para uma posição -4000 (acima do início da tela) e setar o foco de janela na janela que abriu a FullScreen.
Não testei o Script pra ver se realmente funciona, mas deve funcionar... caso alguma coisa, entre em contato comigo.

Para "minimizar" a janela, chame a função min() no evento ONCLICK ou ONDBLCLICK ou qualquer outro.
Espero ter ajudado.

Grato,

Só adicione o evento ONCLICK na célula...

<TD ONMOUSEOVER="..." ONMOUSEOUT="..." ONCLICK="document.location='link.html';">Lisnk</TD>

Valeu,

Quero iniciar este tutorial falando primeiramente o que é suporte a W3C.

Os browsers que suportam códigos W3C são: IE5+, NS6+, Opera, Mozilla.

Para os que se interessarem mais sobre o assunto, chequem este link (em Inglês): http://www.w3c.org/

Por que somente o suporte aos browsers W3C?
A tendência que temos hoje é de que todos os browsers convirjam para S.C. (Standards Compliant), que nada mais é que uma linguagem única que funcione em todos os navegadores.

Vamos primeiro, ter uma noção de como acessar uma camada.

Há duas formas de se acessar uma camada (tag DIV nos browsers W3C). Vamos utilizar somente 1 forma, a mais prática, que acessa a camada diretamente pela identidade dela.
A outra forma, que não convém neste tutorial explicar de forma mais profunda, é o acesso à camada via a captura da tag DIV; e, para chegar até a camada desejada, conta-se à partir do 0 a posição da camada no documento.
Como o primeiro método é mais prático, nós o usaremos.
Para acessar à camada, utilizaremos este código:
document.getElementById
Traduzindo, seu significado é documento.pegueElementoPelaIdentidade.

Acessando uma camada com identidade definida:
document.getElementById('nome_da_camada')

Já possuímos a base para o código JS, mas falta ainda explicar o código HTML da camada.
Para se ter uma boa idéia sobre DIVs, olhe este tutorial (também de minha autoria) netse endereço: http://forum.wmonlin...=ST&f=25&t=2651

Devo ressaltar, que estamos conversando neste momento sobre DHTML (JS + CSS). Hein?!
Para se atribuir estados, comportamentos, posiciomentos, tamanhos na camada, usamos CSS (cascading Style Sheets, ou Folhas de Estilo). Ao mesmo tempo, usamos recursos do XHTML (a tag DIV) e JavaScript (particularmente, DOM (Document Object Model, ou Modelagem de Objeto do Documento)). Esta interação, JS + CSS, a maioria dos autores atribuem como sendo DHTML (Dynamic HTML).

Bem, sabemos como criar camadas e como acessar uma camada.
Agora, vamos ver o algoritmo de como mostrar e esconder o nosso DIV.

função nome() {
se( camada escondida ) {
mostra camada;
} senão {
esconde camada;
}
}

Lembre-se do tutorial sobre DIVs... o atributo CSS VISIBILITY mostra ou esconde o DIV.
Para iniciar com a camada escondida, insira no seu atributo inicial VISIBILITY: hidden.

Para acessar a propriedade VISIBILITY, acessamos a camada e em seguida a visibilidade dela, desta forma:
document.getElementById('nome_da_camada').style.visibility

Sendo assim, podemos codificar nosso algoritmo para JS.
function camada() {
if( document.getElementById('nome_da_camada').style.visibility == "hidden" ) {
document.getElementById('nome_da_camada').style.visibility = "visible";
} else {
document.getElementById('nome_da_camada').style.visibility = "hidden";
}
}

Com isso, concluímos o objetivo do tutorial. Para chamar a função, use como ONCLICK isto:
camada();


A partir de agora, vamos melhorar a performance do nosso código.
Observe que a tag document.getElementById('nome_da_camada') se repete várias vezes. poderíamos atribuí-la numa variável a somente chamar a variável + .style.visibility. Isso melhoraria o tamanho do código (ficaria menor) e ajudará nos próximos upgrades que daremos daqui a pouco.
Fazendo a atribuição na variável, nosso código ficaria assim:
function camada() {
var sDiv = document.getElementById('nome_da_camada');
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}

A chamada para a função, continuaria a mesma.

Bem melhor assim, não?!
Se você analisar o tamanho do código em TXT, veremos que o primeiro usa 275 bytes e o segundo, 215 bytes. Por mais que você possa dizer que a diferença é pequena, qualquer redução no tamanho do código, aumenta a performance do seu site.


Até o exato momento, se você quisesse utilizar somente uma camada, este código seria suficiente para mostrar/esconder nossa camada. Mas imagine utilizar 100 camadas... como ficaria? Usaremos 1 código para cada camada? Não... seu arquivo ficaria com o tamanho de centenas de kb. Isto seria inviável para um site.
Por isto, existe um recurso chamado passagem de parâmetros. Com ele, podemos chamar diferentes camadas usando somente um código.
Vamos ver como fica nosso código usando passagem de parâmetros:
function camada( sId ) {
var sDiv = document.getElementById(sId);
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}

Pode-se notar que alteramos somente um pequeno trecho de código ('nome_da_camada' para sId) e atribuímos um parâmetro sId na chamada da função. Assim, alteramos a forma de como chamá-la e o código passado anteriormente (camada();) não seria mais válido. Agora, temos que usar assim nosso código:
camada('nome_da_camada');

Lembre-se que não adianta nada possuir o código, a chamada, sendo que não temos a camada definida; portanto, FIQUE ATENTO!

Para concluir, fiz um código de exemplo e vou postá-lo aqui.
Lá vai!

<HTML>
  <HEAD>
    <TITLE>Mostrar/Esconder camadas - por Guilherme Blanco</TITLE>
    <script>
      function camada( sId ) {
        var sDiv = document.getElementById( sId );
        if( sDiv.style.visibility == "hidden" ) {
          sDiv.style.visibility = "visible";
        } else {
          sDiv.style.visibility = "hidden";
        }
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <A HREF="#" ONCLICK="camada('menu');">Abre e fecha a camada 'menu'</A>

    <!-- Camada 'menu' -->
    <DIV ID="menu" STYLE="POSITION: absolute; TOP: 35px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
      Testando a visibilidade da camada
    </DIV>
  </BODY>
</HTML>

Salve este código como um arquivo HTML e teste-o no seu navegador.

Espero ter dado uma boa noção de DIVs e a alternância de visibilidade de camadas aqui.
Caso alguma dúvida, entre em contato comigo.