Arquivo Discussoes de Programacao e Tecnologia Fala ae pessoal.
Galera, tenho uma jsp divida que está divida com uma
acho que o
window.onload
deve servir pra você um exemplo de utilização seria
window.onload = initPage;
function initPage(){
}
a função initPage vai ser chamada assim que toda a página HTML estiver carregada.
Fala ae Charles.
Não funcionou cara. Infelizmente o JavaScript está obtendo primeiro as dimensões da página atual e carregando a página para a qual estou indo depois. Assim, ele posiciona o rodapé na página atualmente carregada levando em consideração as dimensões da página anterior.
Mas se tiver alguma outra idéia, posta ae por favor.
Agradecido pela ajuda.
Abraço.
Posta aqui como é que você ta fazendo para reposicionar o rodapé, se em vez de colocar a posição exata dele tu apenas utilizasse o margin do css não teria o mesmo resultado não?!
Posta o código, pois acrdito que o seu problema é CSS, mais precisamente no atributo float do menu.
Só por curiosidade, pra quê você está usando frame?
Charles, Eu entendi sua pergunta, mas não sei se funcionaria.
antitribus, não conheço muito de CSS e nem sei pra que serve esse “float”, mas ele está no CSS como “float: left;”. Não criei este CSS, foi algum designer.
Segue como Eu reposiciono o rodapé.
<html>
<head>
<style type="text/css">
#conteudo {
padding: 20px 0px 15px 0px;
position: relative;
min-height:290px;
width:1000px;
margin-left:1px;
}
#conteudo #menu{
float: left;
width: 172px;
height: 275px;
position: relative;
margin-left: 10px;
font-size:10px;
color: #999;
z-index: 4;
}
#rodape {
position:relative;
background-image: url(../images/fdo_rodape.jpg);
background-repeat: no-repeat;
padding: 5px 0px 20px 0px;
text-align: center;
font-size:7pt;
color: #999;
}
</style>
<script type="text/javascript" defer="defer">
function posicionaRodape() {
var cabecalho = document.getElementById("cabecalho");
var menu = document.getElementById("menu");
var rodape = document.getElementById("rodape");
var conteudo = document.getElementById("conteudo");
var posicaoMenu = cabecalho.offsetHeight + menu.offsetTop + menu.offsetHeight;
var posicaoRodape = cabecalho.offsetHeight + conteudo.offsetTop + conteudo.offsetHeight;
if(posicaoRodape < posicaoMenu) { // se o Menu for maior do que o Rodapé
var distancia = posicaoMenu - posicaoRodape;
rodape.style.marginTop = distancia+10+"px";
}
else { // se o Rodapé for maior ou igual que o Menu
rodape.style.marginTop = "10px";
}
}
</script>
</head>
<body>
<%@ include file="/cabecalho.jsp"%>
<div id="menu">
<div id="conteudo">
<%@ include file="/rodape.jsp%>
</body>
</html>
Essa função fica na página principal e dentro da página principal que eu tenho uma div cabecalho, menu, conteudo e rodape.
Dentro da Div conteudo que Eu tenho o Iframe e a página carregada no Iframe que chama esta função acima com
<script>
parent.posicionaRodape();
</script>
O CSS não está todo aí, mas está o que se refere a estas Divs.
Não sei se consegui passar a vocês o necessário para obter ajuda.
Agradeço de antemão.
Abraço.
Eu tava pensando aqui levando em consideração que vai ser usado javascript para reposicionar o redape então será independente de ser executado antes ou depois da página ser carregada, o código sendo executado ele será reposicionado, o que deve estar acontecendo na verdade é que tais reposicionando a partir o div “conteudo”, mas na verdade ele não está aumentando tamanho, mas somente o iframe. Tenta fazer o seguinte, só para teste, substitui essa parte do css a baixo, recarrega a página com o conteudo e verifica como ficou o div “conteudo”, com esse css vai aparecer um contorno pelo div e vai dar pra saber como ele está.
#conteudo {
padding: 20px 0px 15px 0px;
position: relative;
min-height:290px;
width:1000px;
margin-left:1px;
border: 1px solid red;
}
caso ele realmente não esteja ficando maior, pode ser redimencionado a partir do iframe e consequentimente o rodapé ficará no lugar certo.
Fala ae Charles, foi muito boa a sua sacada, ajudou bastante.
Substitui o código da função para pegar as medidas do iframe e não mais do div (conteudo) que continha o iframe.
Ainda, não resolveu o problema por completo, hehehehe, mas ajudou muito. O conteúdo também altera seu tamanho de acordo com o tamanho da página aberta no iframe, mas ele realmente não podia ser utilizado como parâmetro para reposicionar o rodapé. E sua dica ajudou muito com isso.
Cara, eu acho que precisava tentar executar a função do JavaScript somente depois da página do iframe totalmente carregada. Se eu colocar um alert na função aí eu tenho uma noção mais real do que ocorre.
<script type="text/javascript" defer="defer">
/*
* método necessário para ajustar o rodapé de acordo com o tamanho do menu vertical, para que um não fique sob o outro
*/
function posicionaRodape() {
var cabecalho = document.getElementById("cabecalho");
var menu = document.getElementById("menu");
var rodape = document.getElementById("rodape");
var conteudo = document.getElementById("conteudo");
var iframe = document.getElementById("iframe");
var posicaoMenu = cabecalho.offsetHeight + menu.offsetTop + menu.offsetHeight;
var posicaoRodape = cabecalho.offsetHeight + iframe.offsetTop + iframe.offsetHeight;
var posicaoConteudo = cabecalho.offsetHeight + conteudo.offsetTop + conteudo.offsetHeight;
if(posicaoRodape < posicaoMenu) { // se o Menu for maior do que o Rodapé
var distancia = posicaoMenu - posicaoRodape;
rodape.style.marginTop = distancia+10+"px";
alert("PosiçãoRodapé:"+posicaoRodape+" - PosiçãoMenu:"+posicaoMenu+" - PosiçãoConteudo:"+posicaoConteudo);
}
else { // se o Rodapé for maior ou igual que o Menu
rodape.style.marginTop = "0px";
alert("PosiçãoRodapé:"+posicaoRodape+" - PosiçãoMenu:"+posicaoMenu+" - PosiçãoConteudo:"+posicaoConteudo);
}
}
</script>
O alert sempre mostra a posição dos objetos da página atual antes de ir para a página desejada. Vou dar uma pesquisada também para ver se posso utilizar outra coisa também, e não mais o “marginTop”.
Detalhe é que estou usando a propriedade defer do JavaScript. Mas também nem sei se isso funciona de verdade.
Ah, também já testei no IE 8, no FireFox 9 e no Chrome 16 (já é isso tudo mesmo?).
E Agradeço muito a ajuda camarada.
Abraço.
Você não fecha as divs não?
<body>
<%@ include file="/cabecalho.jsp"%>
<div id="menu">
<div id="conteudo">
<%@ include file="/rodape.jsp%>
</body>
O float faz com que um determinado elemento fique flutuante, no caso o menu, e é por isso que o rodapé sobe, pois em algum momento a sua div
de conteudo deve ser menor do que a de menu.
O certo seria:
<body>
<div id="cabecalho">
<%@ include file="/cabecalho.jsp"%>
</div>
<div id="conteiner">
<div id="menu">
<%@ include file="/menu.jsp"%>
</div>
<div id="conteudo">
Implementação do conteúdo
</div>
</div>
<div id="rodape">
<%@ include file="/rodape.jsp%>
</div>
</body>
Onde você setaria o tamanho mínimo do conteiner, impossibilitando que a div de rodape sobreponha a de menu e conteudo.
Fala ae antitribus.
Eu fecho as DIVs sim cara, hehehe, esqueci disso porque escrevi correndo.
Também passei a estrutura errada da página. Foi mal. A estrutura correta é esta aqui.
<html>
<head>
<!-- chamadas dos arquivos javascript e css -->
</head>
<body onload="funcaoJavaScript_1(); funcaoJvaScript_2();">
<div id="container">
<iframe src="cabecalho.jsp" id="cabecalho" name="cabecalho">
</iframe>
<div id="conteudo">
<div id="menu">
<tagLibMenu:montaMenu />
</div>
<div id="principal">
<iframe src="" id="iframe" name="iframe">
</iframe>
<div>
</div>
<%@ include file="/rodape.jsp"%>
</div>
</body>
</html>
As funções que são carregadas no onload do body devem e têem de ser carregadas ali. Quando coloquei o window.load nas páginas carregadas no iframe principal, como sugeriu o Charles, elas pararam de funcionar.
Tentei outra coisa utilizando JQuery e coloquei este código nas páginas que são carregadas no iframe principal;
<script>
jQuery(document).ready(function() {
parent.posicionaRodape();
});
</script>
Mas também continua obtendo as dimensões da página atual e não da página destino.
Quanto a sua pegunta:
Eu seto o tamanho do conteiner no CSS esterno, mas não tenho como impedir que a Div do menu fique sobre a Div do rodapé, porque o menu pode variar de tamanho para cada usuário.
Mas caraca galera, será que não tem mesmo como fazer uma função JavaScript ser executada somente após a página estar carregada? :?
Agradeço muito a ajuda.
Abraço.
Encontrei um projeto aqui que acho que é mais ou menos a mesma situação que tais passando agora.
eu tinha um div principal que era onde ficava todo o conteudo da página e dentro deste div uma table que era populada de acordo com o retorno do banco de dados. Só que quando ela ficava grande de mais ficava por cima do meu rodape, então a partir do tamanho da table eu modivicava o div de conteudo.
window.onload = initPage;
function initPage(){
//body é o div "conteudo" no seu caso
var body = document.getElementById("body");
//e detail o iframe
var detail = document.getElementById("detail");
//Eu pego o comprimento da tabela detail e adiciono 10
var tam = detail.offsetHeight + 10;
//E depois modifico o tamanho no estilo do div de conteudo
body.setAttribute("style", "height:" + tam + "px;");
}
Aqui deu certo. Como cada caso é um caso não sei como vai ficar ai ‘’/
Da maneira que ele quer assim não vai funcionar, mas acredito que desta maneira sim, olha:
window.onload = function () {
posicionaRodape();
}
Parece que assim existe um certo atraso.
Encontrei um projeto aqui que acho que é mais ou menos a mesma situação que tais passando agora.eu tinha um div principal que era onde ficava todo o conteudo da página e dentro deste div uma table que era populada de acordo com o retorno do banco de dados. Só que quando ela ficava grande de mais ficava por cima do meu rodape, então a partir do tamanho da table eu modivicava o div de conteudo.
window.onload = initPage; function initPage(){ //body é o div "conteudo" no seu caso var body = document.getElementById("body"); //e detail o iframe var detail = document.getElementById("detail"); //Eu pego o comprimento da tabela detail e adiciono 10 var tam = detail.offsetHeight + 10; //E depois modifico o tamanho no estilo do div de conteudo body.setAttribute("style", "height:" + tam + "px;"); }Aqui deu certo. Como cada caso é um caso não sei como vai ficar ai ‘’/
Bom meus camaradas, consegui resolver o problema.
Eu estou usando o Struts 1 e todas as páginas que são chamadas para serem abertas no iframe principal estão no tiles-config.xml com uma página definida no extends. Por exemplo:
<definition name="paginaPadrao" path="/paginaPadraoPrincipal.jsp">
</definition>
<definition name="pagina.aaa" extends="paginaPadrao">
<put name="content" value="/paginaAAA.jsp" />
</definition>
<definition name="pagina.bbb" extends="paginaPadrao">
<put name="content" value="/paginaBBB.jsp" />
</definition>
<definition name="pagina.ccc" extends="paginaPadrao">
<put name="content" value="/paginaCCC.jsp" />
</definition>
E esta paginaPadraoPrincipal.jsp possui uma função no onload do body que chama uma segunda função, que redimensiona o tamanho do site de acordo com o tamanho da página aberta no iframe principal. O que eu fiz foi inserir nesta segunda função uma chamada para a minha função, que reposiciona o rodapé.
Eu devia ter olhado isso antes aqui no trabalho. :oops:
Mas fiquei com uma dúvida: o onload do body não executa a função antes da página ser totalmente carregada? Ou é ao contrário, é após a página ser totalmente carregada?
Mas agradeço muito a ajuda de vocês e com certeza também vou testar estas duas soluções que vocês postaram ae por último.
Muito Agradecido.
Abraço e um 2012 de Sucesso.