Page Load - Animação

[Enziguri]

Boas.

<div id="conteudo">
	<?php
		if (empty($_GET["pagina"])) {
			include ("paginas/home.php");
		} elseif($_GET["pagina"] != "") {
			if (!file_exists('paginas/'.$_GET["pagina"].".php")) {
				echo "ERROR - PAGE NOT FOUND";
			} else {
				include 'paginas/'.$_GET["pagina"].'.php';
			}
		}
	?>		
</div>

Tenho este pedaço de codigo a fazer include á pagina que pretendo, para que não tenha que actualizar a pagina toda.. acontece que pretendo faze-lo com uma animação... encontrei um exemplo muito bom, basicamente é para fazer o mesmo que este exemplo mostra...

http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html

Source:(http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/)

Já o testei e não consigo fazer load das minhas paginas nesse... têm que estar em "root" e com extensao .html...

Alguma solução? Obrigado desde já

Edited July 4, 2012 at 01:36 PM by Enziguri

[MASNathan]

Boas,

Como é que tens esta parte?

<ul id="nav"> 
    <li><a href="index.html">welcome</a></li> 
    <li><a href="about.html">about</a></li> 
    <li><a href="portfolio.html">portfolio</a></li> 
    <li><a href="contact.html">contact</a></li> 
    <li><a href="terms.html">terms</a></li> 
   </ul> 

[HappyHippyHippo]

faz post de um url com o teu site para uma pessoa poder ver o que tens

[Enziguri]

Com esta alteração para a animação funcionar vou desistir de por os "UL" dentro dos "LI" e vou criar uma pagina para cada sub-menu...

Envio o website para poderem ver, a intenção é fazer com que a div "conteudo" apareca com o tal efeito..

http://www.belezaorganica.pt/

<div id="nav">
<ul>
	<li>
		<a href="./index.php?pagina=home">Home</a>
	</li>
	<li>
		<a href="./index.php?pagina=sobre-nos">Sobre Nós</a>
	</li>
	<li>
		<a>Produtos</a>
		<ul>
			<li><a href="./index.php?pagina=produto-verniz-gel">Verniz Gel</a></li>
		</ul>
	</li>
	<li>
		<a>Cursos</a>
		<ul>
			<li><a href="./index.php?pagina=curso-cabeleireiro">Cabeleireiro</a></li>
			<li><a href="./index.php?pagina=curso-colorimetria-avancada">Colorimetria Avançada</a></li>
			<li><a href="./index.php?pagina=curso-depilacao">Depilação</a></li>
			<li><a href="./index.php?pagina=curso-manicure-pedicure">Manicure & Pedicure</a></li>
			<li><a href="./index.php?pagina=curso-pestanas">Pestanas</a></li>
			<li><a href="./index.php?pagina=curso-unhas-de-gel">Unhas de Gel</a></li>
			<li><a href="./index.php?pagina=curso-verniz-gel">Verniz Gel</a></li>
		</ul>
	</li>
	<li>
		<a href="./index.php?pagina=workshops">Workshops</a>
	</li>
	<li>
		<a href="./index.php?pagina=inscricao">Inscrições</a>
	</li>
	<li>
		<a href="./index.php?pagina=contactos">Contactos</a>
	</li>
</ul>
</div>

Edited July 5, 2012 at 10:04 AM by Enziguri

[HappyHippyHippo]

estou a ver o teu site ... isso não tem nada de javascript

estás a fazer reload da página completa na mesma !!!!

[Enziguri]

estou a ver o teu site ... isso não tem nada de javascript

estás a fazer reload da página completa na mesma !!!!

humm bem então há mais uma coisinha a fazer... nao sou pro em web... alias, falta-me experiencia, este é o meu 1º website "a sério". bem eu pensava que aquilo fizesse refresh apenas áquela div... mas mesmo que não faça é o menos porque funciona bem... já vi varios websites em jquery.. o que predendia mesmo era que as paginas daquele div nao fossem carregadas ao inicio e nos exemplos que vi até agora as paginas sao TODAS carregadas e os buttoes vao "chamar" e "ocultar" as paginas, o que se torna muito mau.

Bem se encontrarem alguma boa solução digam

Obrigado

[HappyHippyHippo]

onde está na tua página, o javascript que tem no tutorial que faz os pedidos AJAX e afins ??

[Enziguri]

onde está na tua página, o javascript que tem no tutorial que faz os pedidos AJAX e afins ??

pois ainda nao adicionei porque nao estou a conseguir chamar... apenas com ficheiros .html na pasta onde está o index...

[Enziguri]

já consegui aplicar a tal "animação", como posso fazer com que seja apenas o conteudo a carregar e nao o website todo? algo to tipo ajax ou assim...

gostava de continuar a usar o url "index.php?pagina=" porque tenho coisas a ler esta variavel :S

http://www.teste2.belezaorganica.pt/

aceito sugestoes para melhorar

Obrigado

Edited July 6, 2012 at 10:39 AM by Enziguri

[HappyHippyHippo]

1º - tens de alterar os pedidos de uma página específica para somente retornar somente o conteúdo. (tirando obviamente a principal porque a essa é necessário apresentar os menus e afins)

2º - tens de associar ao evento de clicar na entrada de menu, uma função que te execute o AJAX.

3º - no meio dessa função terás as chamadas de animação que pretendes

[Enziguri]

Tenho estes codigos, funcionam perfeitamente, apenas preciso de poder enviar as "tais variaveis" para o url... não estou a conseguir essa parte.

Alguma solução?

Obrigado

<!doctype html>
<html>
<head>
	<title>Website</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
<body>
	<ul id="nav">
		<li><a href="index.php?pagina=home" onclick="home">Home</a></li>
		<li><a href="index.php?pagina=sobre-nos" onclick="sobre-nos">Sobre Nós</a></li>
		<li><a href="index.php?pagina=contactos" onclick="contactos">Contactos</a></li>
	</ul>
	<div id="content"></div>
</body>
</html>

ul#nav {
list-style:none;
padding:0;
margin:0 0 10px 0;
}
ul#nav li {
display:inline;
margin-right:10px;
}

$(document).ready(function() {
//Inicial
$('#content').load('home.php');

//Cliques
$('ul#nav li a').click(function() {
 var pagina= $(this).attr('href');
 $('#content').load(pagina + '.php');
 return false;
});
});

Edited July 6, 2012 at 11:34 AM by Enziguri

[HappyHippyHippo]

<!doctype html>
           <li><a href="index.php?pagina=home" onclick="home">Home</a></li>
           <li><a href="index.php?pagina=sobre-nos" onclick="sobre-nos">Sobre Nós</a></li>
           <li><a href="index.php?pagina=contactos" onclick="contactos">Contactos</a></li>
</html>

 var pagina= $(this).attr('href');
 $('#content').load(pagina + '.php');

isso resulta em, por exemplo ao clicar no Home : index.php?pagina=home.php

o que não percebo é o que queres dizer com

preciso de poder enviar as "tais variaveis" para o url

que variáveis ??

[Enziguri]

xD peço desculpa por nao me explicar bem...

$_GET["pagina"]

Estou a usar isto para saber em que pagina estou (atravez do url) e pretendo continuar a usar este metodo... a não ser que haja forma melhor de o fazer em javascript mas estar a alterar montes de codigo agora... :S

Edited July 6, 2012 at 11:52 AM by Enziguri

[HappyHippyHippo]

não vejo onde se encontra o problema, porque como explicado no teu exemplo

isso resulta em, por exemplo ao clicar no Home : index.php?pagina=home.php

logo o existirá uma entrada no $_GET com o nome "pagina" e valor "home.php" ...

$_GET['pagina']; // 'home.php'

não estás a conseguir visualizar esta situação ??

[Enziguri]

com aquele script só funciona assim como neste codigo abaixo e eu gostava que funcionasse da maneira explicada no codigo acima..

   	 <ul id="nav">
		<li><a href="home">Home</a></li>
		<li><a href="sobre-nos">Sobre Nós</a></li>
		<li><a href="contactos">Contactos</a></li>
	</ul>

peço desculpa nao ter colado o codigo que esta a funcionar, estou a testar formas de o fazer :S

Edited July 6, 2012 at 12:22 PM by Enziguri

[MASNathan]

será isto?

//Cliques
$('ul#nav li a').click(function() {
 var pagina= $(this).attr('href');
 $('#content').load('index.php?pagina=' + pagina + '.php');
 return false;
});
});

[Enziguri]

nop a minha intenção é que carregue o conteudo sem fazer refresh á pagina mas que altere tambem o url... para que possa saber em que pagina estou com o $_GET['pagina']; já consegui carregar as paginas sem o refresh mas nao consigo arranjar forma de saber em que pagina estou...

[brunoais]

Isso não é permitido por motivos de segurança.

Podes sempre tentar trabalhar com o hash como o twitter faz, por exemplo.

[Octàvio Luzio]

boas acho que precisas de jquery (toggle) é a função que esconde e amostra Divs Imagens etc etc...

Exemplo:

html
<div id="clica-me">
Clica Me
</div>

<img id="mostra" src="#" alt="" width="100" height="123" />

Jquery

$('#clica-me).click(function() {
$('#mostra).toggle('slow', function() {
// Animação aqui.
});
});

Edited August 10, 2012 at 05:50 PM by Octàvio Luzio