Jump to content
Enziguri

Page Load - Animação

Recommended Posts

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 by Enziguri

Share this post


Link to post
Share on other sites
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> 

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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 by Enziguri

Share this post


Link to post
Share on other sites
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 !!!!


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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 by Enziguri

Share this post


Link to post
Share on other sites
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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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 by Enziguri

Share this post


Link to post
Share on other sites
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 ??


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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 by Enziguri

Share this post


Link to post
Share on other sites
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 ??


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
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 by Enziguri

Share this post


Link to post
Share on other sites
MASNathan

será isto?

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

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
brunoais

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

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


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
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 by Octàvio Luzio

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.