Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 18:35

Como abrir div externo na aba do ajax?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17237
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 18:37

Qual script está usando e o que é div externo?
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 19:20

Tenho um menu em Ajax cuja as abas possuem links cujos conteudos qsão abertos dentro do corpo desse menu. Gostaria que em uma das abas o link abri-se em uma div externa para o conteudo.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17237
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 19:24

Fiz um esquema com o script de abas que disponibilizei no fórum.

No onclick para chamar o conteúdo está assim:

onclick="muda(this.id,'conteudo');"

conteudo é o id da div, exemplo:

<div id="conteudo"></div>

Renomeie para outros ids de acordo com suas divs

SCRIPT COMPLETO

<style type="text/css"> .td_ativada{ cursor:hand; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-top:1px solid #cccccc; background-color:#ffffff; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } a.ativada{ font-weight:bold; font-family:arial; font-size:8pt; color:#696969; text-decoration:none; } a:hover.ativada{ color:111111; text-decoration:underline; } .td_desativada{ cursor:hand; border-right:1px solid #cccccc; border-left:1px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#f9f9f9; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } .td_baixo{ border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#ffffff; } </style> <script type="text/javascript"> function muda(id,div) { if(id=="td_topo_e") { td_topo_e.className="td_ativada"; document.getElementById('l1').style.color='#696969'; td_topo_m.className="td_desativada"; document.getElementById('l2').style.color='red'; td_topo_d.className="td_desativada"; document.getElementById('l3').style.color='red'; document.getElementById(div).innerHTML = document.getElementById("conteudo_1").innerHTML; } if(id=="td_topo_m") { td_topo_e.className="td_desativada"; document.getElementById('l1').style.color='red'; td_topo_m.className="td_ativada"; document.getElementById('l2').style.color='#696969'; td_topo_d.className="td_desativada"; document.getElementById('l3').style.color='red'; document.getElementById(div).innerHTML = document.getElementById("conteudo_2").innerHTML; } if(id=="td_topo_d") { td_topo_e.className="td_desativada"; document.getElementById('l1').style.color='red'; td_topo_m.className="td_desativada"; document.getElementById('l2').style.color='red'; td_topo_d.className="td_ativada"; document.getElementById('l3').style.color='#696969'; document.getElementById(div).innerHTML = document.getElementById("conteudo_3").innerHTML; } } </script> <body onload="muda('td_topo_e','conteudo');document.getElementById('l1').style.color='#696969';"> <div id="conteudo_1" style="display:none;">CONTEÚDO 1</div> <div id="conteudo_2" style="display:none;">CONTEÚDO 2</div> <div id="conteudo_3" style="display:none;">CONTEÚDO 3</div> <table width="300" cellpading="0" cellspacing="0"> <tr> <td class="td_ativada" id="td_topo_e" onclick="muda(this.id,'conteudo');"><a class="ativada" href="#" id="l1">link 1</a></td> <td class="td_desativada" id="td_topo_m" onClick="muda(this.id,'outros');"><a class="ativada" href="#" id="l2">link 2</a></td> <td class="td_desativada" id="td_topo_d" onClick="muda(this.id,'conteudo');"><a class="ativada" href="#" id="l3">link 3</a></td> </tr> <tr> <td class="td_baixo" colspan="3" id="conteudo"></td> </tr> </table> a div abaixo vai mostrar o conteúdo do link 2 <div id="outros"></div>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 20:20

Perfeito, agora precisa um link pra fechar a div externa.
Obrigado pela Atenção
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17237
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Carregar conteúdo da aba em outras divs

03-02-2008 22:24

A versão completa: Menu com aba carregando links com ajax, e escolhendo a aba que o documento será aberto.

CSS e JAVASCRIPT
<style type="text/css"> .td_ativada{ cursor:hand; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-top:1px solid #cccccc; background-color:#ffffff; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } a.ativada{ font-weight:bold; font-family:arial; font-size:8pt; color:#696969; text-decoration:none; } a:hover.ativada{ color:111111; text-decoration:underline; } .td_desativada{ cursor:hand; border-right:1px solid #cccccc; border-left:1px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#f9f9f9; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } .td_baixo{ border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#ffffff; } </style> <script type="text/javascript"> function muda(id) { if(id=="td_topo_e") { td_topo_e.className="td_ativada"; document.getElementById('l1').style.color='#696969'; td_topo_m.className="td_desativada"; document.getElementById('l2').style.color='red'; td_topo_d.className="td_desativada"; document.getElementById('l3').style.color='red'; } if(id=="td_topo_m") { td_topo_e.className="td_desativada"; document.getElementById('l1').style.color='red'; td_topo_m.className="td_ativada"; document.getElementById('l2').style.color='#696969'; td_topo_d.className="td_desativada"; document.getElementById('l3').style.color='red'; } if(id=="td_topo_d") { td_topo_e.className="td_desativada"; document.getElementById('l1').style.color='red'; td_topo_m.className="td_desativada"; document.getElementById('l2').style.color='red'; td_topo_d.className="td_ativada"; document.getElementById('l3').style.color='#696969'; } } </script> <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; } } } var valor = 0; function abre(arquivo,metodo,div){ xmlhttp.open(metodo,arquivo+"?valor="+valor); xmlhttp.onreadystatechange=conteudo; xmlhttp.send(null) valor++; function conteudo() { document.getElementById(div).innerHTML="carregando..." if (xmlhttp.readyState==4){ document.getElementById(div).style.display="block"; document.getElementById(div).innerHTML=xmlhttp.responseText } } } </script>

PARTE EM HTML PARA ALTERAÇÕES

* documentos
* divs alvos

<body onload="abre('teste1.html', 'GET', 'conteudo'); muda('td_topo_e', 'conteudo'); document.getElementById('l1').style.color='#696969';"> <table width="300" cellpading="0" cellspacing="0"> <tr> <td class="td_ativada" id="td_topo_e" onclick="muda(this.id); abre('teste1.html', 'GET', 'conteudo');"><a class="ativada" href="#" id="l1">link 1</a></td> <td class="td_desativada" id="td_topo_m" onClick="muda(this.id); abre('teste2.html', 'GET', 'outros');"><a class="ativada" href="#" id="l2">link 2</a></td> <td class="td_desativada" id="td_topo_d" onClick="muda(this.id); abre('teste3.html', 'GET', 'conteudo');"><a class="ativada" href="#" id="l3">link 3</a></td> </tr> <tr> <td class="td_baixo" colspan="3" id="conteudo"></td> </tr> </table> <div id="outros" style="display:none;"></div>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Carregar conteúdo da aba em outras divs

08-02-2008 01:02

Perfeito, era tudo que precizava....Código limpo e objetivo.Obrigado, mais uma vez
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17237
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Carregar conteúdo da aba em outras divs

08-02-2008 09:03

¨peaceout¨
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado