Ir para conteúdo

POWERED BY:

Arquivado

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

osk

[Resolvido] carregar pagina sem refresh

Por , em Javascript

Recommended Posts

osk    0

osk
Postado

Boa tarde, já utilizo um sistema de carregamento de pagina em uma div sem refresh...

Aconte que preciso carregar uma galeria de fotos que possiu efeitos da Jquery.

 

So que os efeitos não funciona, e quero saber se realmente usando este metodo sem refresh eu não vou conseguir usar efeitos da pagina carregada na div?

Compartilhar este post

Link para o post
Compartilhar em outros sites

osk    0

osk
Postado

Ok vou tentar...

 

Uso essa função que funcionar normal, para carregar pagina em uma div sem dar refresh na pagina inteira.

 

ajax.js

function GetXMLHttp() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    }
    catch(ee) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
                xmlHttp = false;
            }
        }
    }
    return xmlHttp;
}

var xmlRequest = GetXMLHttp();

e instrucao.js

 

function abrirPag(valor){
    var url = valor;

    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.open("GET",url,true);
    xmlRequest.send(null);

        if (xmlRequest.readyState == 1) {
            document.getElementById("conteudo").innerHTML = "<img src='img/logo2.png'>";
        }

    return url;
}

function mudancaEstado(){
    if (xmlRequest.readyState == 4){
        document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
    }
}

na index.php tenho:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/css.css" type="text/css" media="all" />

<title>Núcleo Educacional Cantares</title>
<script src="js/ajax.js" type="text/javascript"></script>
<script src="js/instrucao.js" type="text/javascript"></script>

<style type="text/css">
<!--
.text_form {color: #339966}
-->
</style>
</head>

<body>
<div id="tudo">
<div id="topo"></div>
<div class="menu"></div>
 <div id="btn">
      <table width="687" border="0">
        <tr>
          <td><a href="#" onclick="abrirPag('home.php');"><img src="img/btnhome.png" border="0"/></a></td>
          <td><a href="#" onclick="abrirPag('mostra.php');"><img src="img/btnfotos.png" border="0"/></a></td>
          <td><a href="#" onclick="abrirPag('estrutura.php');"><img src="img/btnestrutura.png" border="0"/></a></td>
          <td><a href="#" onclick="abrirPag('contato.php');"><img src="img/btncontato.png" border="0"/></a></td>
        </tr>
      </table>
    </div>
<div class="meio" id="conteudo"></div>
<div class="rodape"></div>

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

O botao que chama a pagina abrirPag('mostra.php');

 

E dentro dela tem outra função para dar efeito nas fotos:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

img {border: none;}
.container {
	height: 360px;
	width: 910px;
	margin: -180px 0 0 -450px;
	top: 50%; left: 50%;
	position: absolute;
}
ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
	background:url(img/thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
	float: left;
	padding: 9px 0;
	margin-left: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '100px', 
			height: '100px', 
			padding: '5px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumb li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});
 
});
</script> 
</head>

<body>
<div class="container">
<ul class="thumb">

  <?php do { ?>
    <li><a href="img/<?php echo $row_galeria['grande']; ?>"><img src="img/<?php echo $row_galeria['grande']; ?>" alt="" /></a></li>
    <?php } while ($row_galeria = mysql_fetch_assoc($galeria)); ?></ul>
    <div id="main_view"><a title="" ><img src="" alt="" /></a><br />
    
  </div>
</div>
</body>
</html>

Vou pastar dois links para vizualizar.

 

Aqui é so clicar no botão Fotos e Eventos (efeito não funciona)

http://www.hostmonsters.com.br/imasters/

 

E aqui onde o efeito funciona.

http://www.hostmonsters.com.br/imasters/mostra.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Você tá puxando o código jquery dentro do ajax.

Tira isso do mostra.php e coloca no index.php:

 

<script type="text/javascript" src="[url="view-source:http://www.hostmonsters.com.br/imasters/js/jquery-latest.js"]js/jquery-latest.js[/url]"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
 .animate({
 marginTop: '-110px', 
 marginLeft: '-110px', 
 top: '50%', 
 left: '50%', 
 width: '174px', 
 height: '174px',
 padding: '20px' 
 }, 200);
 
 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
 .animate({
 marginTop: '0', 
 marginLeft: '0',
 top: '0', 
 left: '0', 
 width: '100px', 
 height: '100px', 
 padding: '5px'
 }, 400);
});

//Swap Image on Click
 $("ul.thumb li a").click(function() {
 
 var mainImage = $(this).attr("href"); //Find Image Name
 $("#main_view img").attr({ src: mainImage });
 return false; 
 });
 
});
</script>
Testa e avisa no que deu.

Aconselho tirar tb todo css de lá e colocar no index deixando apenas a div container com o conteudo.

Quando faço algo com ajax eu coloco todo css e jquery na página principal.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

osk    0

osk
Postado

Sim claro, se puder me ajudar agradeço.

 

Ou se tiver um tutorial pode me passar tambem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

se ja tiver add manda um email com seu msn pois nao apareceu seu contato aqui.

 

Testa ai.

 

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://hostmonsters.com.br/imasters/css/css.css" type="text/css" media="all" />
<title>Núcleo Educacional Cantares</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 
 $('table a').click(function(e){
 
 var pagina = $(this).attr('href');
 
			$.post(pagina, function(data) {
			$("#conteudo").empty().html(data);
			});
			
$().ajaxError(function(){ alert('erro');});			
			
 e.preventDefault();
});
 

});
</script>
<style type="text/css">
<!--
.text_form {color: #339966}
-->
</style>
</head>

<body>
<div id="tudo">
<div id="topo"></div>
<div class="menu"></div>
 <div id="btn">
 	<table width="687" border="0">
 	<tr>
 	<td><a href="home.php"><img src="http://hostmonsters.com.br/imasters/img/btnhome.png" border="0"/></a></td>
 	<td><a href="mostra.php"><img src="http://hostmonsters.com.br/imasters/img/btnfotos.png" border="0"/></a></td>
 	<td><a href="estrutura.php"><img src="http://hostmonsters.com.br/imasters/img/btnestrutura.png" border="0"/></a></td>
 	<td><a href="contato.php"><img src="http://hostmonsters.com.br/imasters/img/btncontato.png" border="0"/></a></td>

 	</tr>
 	</table>
	</div>
<div class="meio" id="conteudo"></div>
<div class="rodape"></div>

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

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