Ir para conteúdo

POWERED BY:

Arquivado

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

MarkZu

[Resolvido] Paginas dentro da Div

Por , em Javascript

Recommended Posts

MarkZu    0

MarkZu
Postado

Ta sou iniciante em web e to apanhando muito nessa questao!!

 

meu script ficou assim! na index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquarela Publicidade</title>
<meta name="keywords" content="Publicidade, Aquarela, guaranta do norte, pinturas"  />
   <meta name="description" content="Publicidade" />
   <link rel="stylesheet" type="text/css" href="Css/Estrutura/Estrutura.css"/>
<script>

$(document).ready(function(){   
               $("a").click(function(){ 

                                       $("#conteudo").load($(this).attr("url") ); 
                               });      

               })

</script>

</head>

<body bgcolor="#CCCCCC">
<div id="radio"> </div><!-- fim da div radio -->

<!-- Logotipo -->		
<div id="topo">
<table border="0"align="right" width="200" height="50"> 
<tr align="right">
   <td widht="200" height="50" align="center"><a href="http://twitter.com/#!/iraecio"><img src="imagens/topo/twitter.jpg" title="siga-nos" border="0" /></a></td>
   </tr>
</table>    
</div> <!--fim da div topo -->

<!-- Menu superior -->
<div id="menu1">
<table>
<tr>
   	<td width="100" align="center">Home</td>
       <td width="100" align="center">Downloads</td>
   	<td width="100" align="center">Agenda</td>
       <td width="100" align="center">Cd online</td>
   	<td width="100" align="center">
<a href="galeria.html">Galeria</a></td>
       <td width="100" align="center">Contato</td>
       <td width="400"><marquee>Ola meu primeiro site!!</marquee></td>
</tr>
</table>
</div> <!--fim da div menu superior -->

<!-- Principal -->    
<div id="principal">
<div id="conteudo">
</div>

</div> <!--fim da div principal -->

<!-- rodapé -->
<div id="rodape">
<center><font color="#FFFFFF"> Copyright # 2011-2012</font></center>

</div> <!--fim da div rodape -->

</body>
</html>

 

Mas quem foi que disse que funciona..(eu ja pesquei tudo quanto e lado e nada funciona!) me ajuda ai pessoal!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrey Knupp Vital    136

Andrey Knupp Vital
Postado

Creio que não tenha como você carregar uma URL externa pelo jQuery, para você abrir outros links, você teria que criar uma página PHP interna, na qual iria pegar todo o output do link e mostrar para o load fazer seu trabalho.

Load.php

<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
	<script type="text/javascript">
	 	$( document ).ready(function(){
			$( 'a' ).click(function(event){
				event.preventDefault();
				var url = $( this ).attr( 'href' ).replace( '#' , '*' );
				$( '#conteudo' ).load( 'GET.php?url=' + url.toString() );
			});
		});
	</script>
</head>
<body>
	<a href="http://www.google.com">Google</a>
	<div id="conteudo">
		Clique no link.
	</div>
</body>
</html>

 

GET.php

<?php
if( isset( $_GET[ 'url' ] ) )
	   echo file_get_contents( str_replace( '*' , '#' , $_GET[ 'url' ] ) );

 

Ou então, já que está usando jQuery, você pode fazer com ajax.

andrey@andrey:~$ cat /var/www/Load.php
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
	<script type="text/javascript">
	 	$( document ).ready(function(){
			$( 'a' ).click(function(event){
				event.preventDefault();
				var url = $( this ).attr( 'href' );
				$.ajax({
					type: 'GET',
					url: url.toString();
					success: function( data ){
						$( '#conteudo' ).html( data );
					}
				});
			});
		});
	</script>
</head>
<body>
	<a href="http://www.google.com">Google</a>
	<div id="conteudo">
		Clique no link.
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarkZu    0

MarkZu
Postado

Fiz como voce falou ali com GET.php

 

e aconteceu o seguinte!!

 

Antes eu clicava e abria outra pagina

 

agora nao abre nada eu clico e nao acontece nada!!

 

tem ideia do que pode ser?? fico assim a pagina

-------------------------------------------------

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquarela Publicidade</title>
<meta name="keywords" content="Publicidade, Aquarela, guaranta do norte, pinturas"  />
   <meta name="description" content="Publicidade" />
   <link rel="stylesheet" type="text/css" href="Css/Estrutura/Estrutura.css"/>
               <script type="text/javascript"> 
                       $( document ).ready(function(){ 
                               $( 'a' ).click(function(event){ 
                                       event.preventDefault(); 
                                       var url = $( this ).attr( 'href' ).replace( '#' , '*' ); 
                                       $( '#conteudo' ).load( 'GET.php?url=' + url.toString() ); 
                               }); 
                       }); 
               </script> 



</head>
<body>
<div id="menu1">
<table>
<tr>
   	<td width="100" align="center">Home</td>
       <td width="100" align="center">Downloads</td>
   	<td width="100" align="center">Agenda</td>
       <td width="100" align="center">Cd online</td>
   	<td width="100" align="center">
<a href="www.google.com.br">Galeria</a></td>
       <td width="100" align="center">Contato</td>
       <td width="400"><marquee>Ola meu primeiro site!!</marquee></td>
</tr>
</table>
</div>
<div id="principal">
<div id="conteudo"></div>

</div>
</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ajax não faz requisições cross domain.

 

você nunca vai conseguir carregar o google dentro do teu site, sem técnicas de jSONp

 

use arquivos relativos ao teu domínio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarkZu    0

MarkZu
Postado

ajax não faz requisições cross domain.

 

você nunca vai conseguir carregar o google dentro do teu site, sem técnicas de jSONp

 

use arquivos relativos ao teu domínio.

Eu coloquei a pagina galeria ao qual desejo abrir na div conteudo

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Aquarela Publicidade</title>
       <meta name="keywords" content="Publicidade, Aquarela, guaranta do norte, pinturas"  />
   <meta name="description" content="Publicidade" />
   <link rel="stylesheet" type="text/css" href="Css/Estrutura/Estrutura.css"/>
               <script type="text/javascript"> 
                       $( document ).ready(function(){ 
                               $( 'a' ).click(function(event){ 
                                       event.preventDefault(); 
                                       var url = $( this ).attr( 'href' ).replace( '#' , '*' ); 
                                       $( '#conteudo' ).load( 'GET.php?url=' + url.toString() ); 
                               }); 
                       }); 
               </script> 



</head>
<body>
<div id="menu1">
<table>
       <tr>
       <td width="100" align="center">Home</td>
       <td width="100" align="center">Downloads</td>
       <td width="100" align="center">Agenda</td>
       <td width="100" align="center">Cd online</td>
       <td width="100" align="center">
[b]<a href="galeria.html">Galeria</a>[/b]</td>
       <td width="100" align="center">Contato</td>
       <td width="400"><marquee>Ola meu primeiro site!!</marquee></td>
       </tr>
</table>
</div>
<div id="principal">
<div id="conteudo"></div>

</div>
</body>

</html>

 

Eu creio que nao estou usando ajax (sou iniciante caso disse algumas M3#$# )

 

 

 

Andrey Knupp

Postado Hoje, 13:39

Coloque 'http://' na frente do 'www.google.com.br', uma pergunta, não seria melhor você usar um iframe ?

 

Eu coloquei http:// e nada mudo!!

nao quero usar iframes..nao parece ser a msm coisa!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu creio que nao estou usando ajax (sou iniciante caso disse algumas M3#$# )

você está usando ajax sim. O método .load() do jQuery faz uma requisição ajax assincrona GET.

 

$( '#conteudo' ).load( $( this ).attr( 'href' ) );

 

http://wbruno.com.br/blog/2011/03/30/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarkZu    0

MarkZu
Postado

Aew brunoo tu me ajudo muito agora em!!

 

O que deu pra min entender pode ser tbm que nao tem nada a ver mais vamos lar :D

 

Assim pelo que vi no seu tuto e o seguinte

 

   <script type="text/javascript">  
   $(document).ready(function(){  
       $("#menu1 a").click(function( e ){  
           e.preventDefault();  
           var href = $( this ).attr('href');  
           $("#new").load( href );  
       });  
   });  
   </script>

eu teria que criar uma div na pagina que eu queria chamar para mostrar apenas a div

dai eu criei uma chamada conteudo e colokei o que eu queria la dentro!! e FUNCIONOU

 

Mas se nao for isso me da uma dica ai ^^

 

$("#new").load( href +" #conteudo");

 

mais uma coisa se dentro dessa div tudo que tiver la vai funcionar corretamente dentro dexxa div#new?

 

Vlw

Compartilhar este post

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

Informação importante

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

  Aceito