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

Assuntos Gerais
#1

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.

#2

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/

#3

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?

#4

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

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

Exemplo:

#5

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

#6

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 :slight_smile:

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,)

#7