Tem como obter o efeito de frame usando apenas DIV? [RESOLVIDO]

14 de abril de 2010 5 respostas

oddy.silva 14 de abril de 2010

Tenho uma dúvida:

Quando eu tenho dois frames, A(Menu) e B(Conteúdo), e clico num link de A, B exibe o novo conteúdo (uma página HTML), mas A permanece o mesmo (mesma página com menu).

Eu gostaria de saber se há como obter o mesmo efeito dos frames, mas usando DIV´s: Dois DIVs A(Menu) e B(conteúdo). Quando eu clicar num Link do DIV Menu A, apenas o conteúdo do DIV B deve mudar (a página solicitada), e o conteúdo de A(O menu) deve permanecer o mesmo.

No meu caso, quando clico em Algum link de A, ele abre uma nova página na tela, não carrega essa nova página no DIV B, como se fosse um framezinho. Eu só sei fazer isso usando Frames, mas gostaria de saber se há como fazer isso usando DIV´s.

PS: Fique a vontade para exemplificar em HTML, XHTML ou CSS.

5 Respostas

rogelgarcia 14 de abr. de 2010

Você pode fazer isso com AJAX… vc tem a manha de usar ajax?

Talvez uma dessas bibliotecas pode te ajudar a fazer isso:

http://mootools.net/

http://jquery.com/

oddy.silva 14 de abr. de 2010

Ajax parece uma boa idéia sim, atualizar só um pedaço da página.
Fora o ajax, tem como fazer alguma coisa do tipo usando só o CSS/Html?

rogelgarcia 14 de abr. de 2010

Se vc já tiver carregado todo o conteúdo…

vc pode usar um javascript para mostrar ou ocultar partes da página…

Exemplo:

oddy.silva 14 de abr. de 2010

Legal, legal. Só espero que a página não fique pesada.
Pelo jeito, algo parecido no CSS/HTML só usando Frames mesmo. É que eu tô desenvolvendo uma aplicação que precisa ficar super leve.
Não tô nem usando JSF pra criar componentes.

Valeu

Ctrl_C_Ctrl_V 17 de fev. de 2013

Caso você queira substituir frames por divs com javascript da pra usar essa parada aqui:

<html>
<head>
<script type="text/javascript">
try{
xmlhttp = new XMLHttpRequest();
}
catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E){
xmlhttp = false;
}
}
}
div_base = "";
function abre(arquivo,metodo,div){
div_base = div;
xmlhttp.open(metodo,arquivo);
xmlhttp.onreadystatechange=conteudo
xmlhttp.send(null)
}
function conteudo() {
nova_div = div_base;
document.getElementById(nova_div).innerHTML="<div style='top:50%;left:50%;position:absolute;'>carregando...</div>"
if (xmlhttp.readyState==4){
document.getElementById(nova_div).innerHTML=xmlhttp.responseText
}
}
</script>
</head>

<body>
<div id="menu">
<a href="javascript: abre('contato.html','GET','conteudo');">Link 1</a>
<a href="javascript: abre('coisa.html','GET','conteudo');">Link 2</a>
<a href="javascript: abre('seila.html','GET','conteudo');">Link 3</a>
</div>
<div id="conteudo">

Aqui você coloca as coisas da página inicial, quando clicar no l-i-n-k do menu(que está ali em cima), 
a página que que está no l-i-n-k abre nesse lugar. Pronto , frame substituído.

</div>
</body>
</html>

Depois é so estilizar com css o menu e onde está escrito carregando… pode ser substituido por um gif
Antes tarde do que nunca

Esqueci de dizer que se for testar em navegador webkit (chrome, canary, maxthon, coolnovo) não vai funfar, ele só funcionará quando estiver hospedado.
Para resolver isso teste com xampp em localhost ou com navegador firefox ou parentes dele(seamonkey, cometbird,)

Criado 14 de abril de 2010

Ultima resposta 17 de fev. de 2013

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados