Barras de rolagem vinculadas...

[JhonatasSol 0]

Eu tenho uma pergunta que deve envolver html e javascript,´eu nunca vi isso na internet, mas me pediram pra fazer isso:Imaginem o excel, nele há a possibilidade por exemplo de se travar uma linha ou várias enquanto as outras correm soltas!!A idéias é a seguinte:Eu teria no lado esquerdo tipo um frame fixo e no topo tipo um frame fixo também, o centro se movimenta( através de barras de rolagem ), vertical e horizontalmente!! O problema está em: Se o usuário movimentar a barra de rolagem horizontal, o topo tem que acompanhar junto!! ( Só lembrando, no centro contém uma tabela com várias informações, o topo possui datas e o lado esquerdo possui uma lista e cada linha dessa lista está vinculada à um registro da tabela central , por isso um tem que acompanhar o outro! ), se o usuário movimentar a barra vertical, o lado esquerdo é que tem que acompanhar junto!!! Tem como fazer isso? Vincular à uma barra de rolagem um frame e dependendo da barra de rolagem que for arrastada ele movimentar determinado frame ou outra coisa??? Deve ser difícil, mas até agora não encontrei nada que me desse pelo menos o início pra começar isso!! Valeu!!!

[mauyr 0]

Cara é o seguinte,

Já fiz isso, inclusive tive de criar um scrollbar. Porem acredito q isso nao será necessário caso você esteja utilizando o IE.

 

Va em "DIV" no link abaixo q você vai pegar todas as propriedades e metodos necessarios para fazer o q vou lhe explicar por cima.

http://msdn.microsoft.com/library/default....nce/objects.asp

 

O que você tem q fazer sao 3 DIVs, parecido com isso:

 

<table>

<tr>

<td colspan=2><div id="divTOPO" style="overflow: hidden"></div></td>

</tr>

<tr>

<td><div id="divESQ" style="overflow: hidden"></div></td>

<td><div id="divDIR" style="overflow: scroll" onScroll="rolaOutraDivs()"></div></td>

</tr>

</table>

 

o importante esta na "divDIR".

No evento onScroll desta div você fara algo assim:

 

function rolaOutraDivs() {

divEsq.scrollTop = divDIR.scrollTop;

divTOPO.scrollLeft = divDIR.scrollLeft;

}

 

se tiver alguma duvida fala ae.

 

flw

[JhonatasSol 0]

Cara funcionou!!! Bárbaro!!! Vou fazer umas experiências aqui e qualquer coisa eu volto a postar!!Valeu!!

[JhonatasSol 0]

Uma outra dúvida em cima disso!! Eu não entendo quase nada sobre o div!! Mas em relação à resolução do monitor, como ele se comportaria? Porque os DIV's terão que ficar sincronizados!! Qual a melhor solução, ele deve acompanhar a resolução do monitor? Eu já devo fazer de uma forma que fique bom para os dois? Alguém tem alguma idéia? Acho que ele deveria ficar o mais flexível possível, o que devo aplicar pra isso funcionar?Valeu!!

[JhonatasSol 0]

Pra essa situação da primeira pergunta, como é que faço com que ele redimensione ao mudar a resoulação de vídeo? Pois usando aquele script do segundo tópico, só consegui fazer funcionar estabelecendo um tamanho fixo para os meus divs, se eu tirar o tamanho fixo, ele se redimenciona, mas não aparece a barra de rolagem , porque o div se auto-ajusta ao conteúdo!! Entenderam?Alguém tem idéia de como fazer isso?Valeu!!

[mauyr 0]

Pra essa situação da primeira pergunta, como é que faço com que ele redimensione ao mudar a resoulação de vídeo? Pois usando aquele script do segundo tópico, só consegui fazer funcionar estabelecendo um tamanho fixo para os meus divs, se eu tirar o tamanho fixo, ele se redimenciona, mas não aparece a barra de rolagem , porque o div se auto-ajusta ao conteúdo!! Entenderam?Alguém tem idéia de como fazer isso?Valeu!!

É o seguinte. Você até consegue fazer com que redimensiome a div dependendo da resolução do monitor. Porem acho inviável e normalmente nao fica legal.Prefiro sempre utilizar um valor fixo.De qualquer forma ai ai uma ajuda de como se fazer isso:a Propriedade document.body.clientWidth diz o quanto de largura se tem disponivele a document.body.clientHeight diz o quanto de altura.você tera que colocar no evento onResize do Body uma fucao que calcule o tamanho disponivel e qual vai ser o tamanho da div.e tera de chamar a funcao no OnLoad tb.Algo parecido com isso:

<body onResize="redimensiona()"><div id="div1" style="overflow: scroll; width: 400px; height: 300px"></div></body><script language="javascript">function redimensiona() {  var width = document.body.clientWidth;  var height = document.body.clientHeight;  var div = document.getElementById("div1");  div.style.width = (width - 400);  div.style.height = (height - 200);}redimensiona();</script>

Na linha:

div.style.width = (width - 400);

Coloquei o (-400) pq sera o que você quer deixar de sobra para os outros controles na tela, se necessário.Qualquer duvida me avise.flw