Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

BR_code

Document.getElementById

Por , em Desenvolvimento frontend

Recommended Posts

BR_code    0

BR_code
Postado

Seguinte Galera, ja fiz diversas buscas aki no fórum nas ultimas 2 semanas sobre Document.getElementById e suas propriedades, aprendi coisas novas inclusive com um amigo daki do forum msm sobre a modificação da style de uma div usando .style o problema é q teoricamente to fazendo tudo certo, pq nem ta dando erro no console de JavaScript do FF só q não funciona. Meu problema é o seguinte:

 

To criando um sitezinho pra empresa, coisa pequena pq eu nem saco tanto, e to usando a minha resolução pra montar ele : 1024 x 768. Porem, óbviamente, quando acesso ele de outro computador com diferentes resolções ele fica feio pq ta todo engessado pra minha resolução, o topo ja ta ok mas, a barra de baixo fica quase no meio do site quando se acessa ele de uma maior resolução. A ideia é pegar a resolução do usuário subtrair uns 190px guardar esse valor numa variável e setar ele na style da div q ta sendo usada pra ser a barra de rodapé (pq eu to usando tableless). Antes de fazer isso com uma variavel eu tentei usar com valores fixos ai fiz isso :

 

essa é a div do rodapé :

<div id="rodape" align="center" class="texto"><b>blah blah blah </b></div>

no body eu usei um onLoad pra chamar a função q setaria os valores no style da div (o nome da função é mudaEstilo):

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="document.getElementById('pop').style.display='block', mudaEstilo();">

dentro de uma das div's (q inclusive carrega antes da barra de rodapé) eu montei a função em js, com uns alerts só pra ter certeza da resolução e tentei setar os valores na marra pra ver se ia, caso desse depois era só por o valor numa variavel:

<script type="text/javascript">var altura = screen.heightvar largura = screen.widthalert("sua resolção é de: "+largura+" x "+altura);function mudaEstilo(){document.getElementById('rodape').style.Top = 600;document.getElementById('rodape').style.Left = 0;alert("rodou!");}</script>

Ah! sem esquecer q essa div tem uma imagem de background carregada atraves de .css :

#rodape{width:100%;height:20px;background:url('../imagens/barra4.gif');margin:0px auto;}

Ai quando vou ver o resultado a barra fica la emcima, como se tivesse sido carregada a top: 0px, ignorando o q eu fiz. Pra piorar minha situação o console de js do FF não da erro algum. Onde eu to errando ? fiz salada em algum lugar ai ?

 

Heeeeeeeeeeeeellllllppppp ! :unsure:

 

vlw !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Suissa    1

Suissa
Postado

talvez você devesse setar margin-bottom: 0px; em vez do topnaum sei, mas testa ae ve se funciona

Compartilhar este post

Link para o post
Compartilhar em outros sites

BR_code    0

BR_code
Postado

Suissa, até agora nada, ja tentei setar o marginBottom e nada, inclusive tentei engessar denovo colocando o style direto na div:

<div id="rodape" style="margin-bottom: 0px; left: 0px; position: absolute;" align="center" class="texto"><b>blah blah blah </b></div>

e nada ... to ficando doido ja com esse negócio, ninguem faz ideia do q eu possa fazer ai não ?

 

vlw !

Compartilhar este post

Link para o post
Compartilhar em outros sites

BR_code    0

BR_code
Postado

Salve galera, quebrando a cuca consegui aki o q queria, vou postar aki pq pode ter gente com a msma dificuldade futuramente ! Era mtoooooooooo simples, por isso q tava tão "complicado" rsrs .... ao inves de margin-bottom eu coloquei somente bottom com valor 0 (zero) e posição absoluta, simples e ta resolvido meu problema ! :P

 

<div id="rodape" style="bottom: 0px; left: 0px; position: absolute;" align="center" class="texto"><b>blah blah blah </b></div>

lembrando q na css ainda continuam os valores de width a 100% e um background com url setando uma imagem de fundo nessa div!

 

Agora o desafio é outro, fazer com q duas div's q estão na lateral peguem o valor da resolução do usuário e façam um calculo e se a resolução do usuário for maior q 1024x768 ela desça na tela pra preencher os espaços vazios e se for menor q a resolução padrão suba, ai eu alem de alterar posição vou ter q alterar tamanho de fonte entre outras coisas mais, vou tentat fazer aki, caso não conseguir volto pra perguntar a você's, mas, ja pra antecipar : "alguem tem alguma ideia ?" :P

 

vlw !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shift_Del    0

Shift_Del
Postado

Salve galera, quebrando a cuca consegui aki o q queria, vou postar aki pq pode ter gente com a msma dificuldade futuramente ! Era mtoooooooooo simples, por isso q tava tão "complicado" rsrs .... ao inves de margin-bottom eu coloquei somente bottom com valor 0 (zero) e posição absoluta, simples e ta resolvido meu problema ! :P

 

<div id="rodape" style="bottom: 0px; left: 0px; position: absolute;" align="center" class="texto"><b>blah blah blah </b></div>

lembrando q na css ainda continuam os valores de width a 100% e um background com url setando uma imagem de fundo nessa div!

 

Agora o desafio é outro, fazer com q duas div's q estão na lateral peguem o valor da resolução do usuário e façam um calculo e se a resolução do usuário for maior q 1024x768 ela desça na tela pra preencher os espaços vazios e se for menor q a resolução padrão suba, ai eu alem de alterar posição vou ter q alterar tamanho de fonte entre outras coisas mais, vou tentat fazer aki, caso não conseguir volto pra perguntar a você's, mas, ja pra antecipar : "alguem tem alguma ideia ?" :P

 

vlw !

 

Tive um problema parecido e a solução foi essa

function ver(){var h=document.body.clientHeight; document.getElementById("pagi").style.height=h-220+"px";}
setInterval("ver()",10);
a função deixara a div sempre no final da pagina mesmo que o usuário redimensione a janela do navegador.

sei que to atrasado mais se mais alguem tiver a mesma duvida a solução ta ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito