Jump to content

Contúdo dinâmico com Jquery


Gonçalo_ssb
 Share

Recommended Posts

Boa noite,

Estou neste momento a desenvolver um site e queria implementar como funcionalidade a navegação pelo site sem reload da página quando se muda de secção, como tal comecei a pesquisar e decidi realizar o load da página através da API do jquery load().

Eu quero que ao mudar de secção a secção anterior faça fadeout apareça um loader(gif) e só depois de carregada apareça a nova secção em fadeIn, mas não estou a conseguir 🙂

Podem ver o que que já fiz...mas não é este o resultado http://www.ajbf.pt/ama/

Eu tenho o seguinte código:


HTML: (Conteúdo)
<div id="center-content"> <!-- ESTRUTURA CENTRAL -->
<div id="loading"><>
<div id="content"><>
<>


(Menu)

<ul id="menu_items">
<li id="<?php echo LINK_WHO_IS; ?>"><img src="resources/images/menu/menu_01.png" name="menu_01" alt="" width="119" height="14" class="img_menu" /></li>
<li><img src="resources/images/menu/menu_mid.png" alt="" width="17" height="14" /></li>
<li><img src="resources/images/menu/menu_02.png" name="menu_02" alt="" width="82" height="14" class="img_menu" /></li>
<li><img src="resources/images/menu/menu_mid.png" alt="" width="17" height="14" /></li>
<li><img src="resources/images/menu/menu_03.png" name="menu_03" alt="" width="67" height="14" class="img_menu" /></li>
<li><img src="resources/images/menu/menu_mid.png" alt="" width="17" height="14" /></li>
<li id="<?php echo LINK_RESERVES; ?>"><img src="resources/images/menu/menu_04.png" name="menu_04" alt="" width="86" height="14" class="img_menu" /></li>
<li><img src="resources/images/menu/menu_mid.png" alt="" width="17" height="14" /></li>
<li id="<?php echo LINK_NEWS; ?>"><img src="resources/images/menu/menu_05.png" name="menu_05" alt="" width="76" height="14" class="img_menu" /></li>
<li><img src="resources/images/menu/menu_mid.png" alt="" width="17" height="14" /></li>
<li id="<?php echo LINK_CONTACTS; ?>"><img src="resources/images/menu/menu_06.png" name="menu_06" alt="" width="103" height="14" class="img_menu" /></li>
</ul>


CSS:

#loading{ 
width:100%;
    display: none;
height: 322px;
background: url(../images/icons/ajax-loader.gif) no-repeat center center;
}



#center-content{
    margin-top: 30px;
    width:840px;
    background: #FFFFFF !important;
    /*filter:alpha(opacity=80);*/
    /*opacity:0.80;*/
    min-height: 400px;
    border: 1px solid #FFFFFF;
}


Javascript:

/*************CARREGA AS PÁGINAS*************/
var sections = $("#menu ul li");
var loading  = $("#loading"); 
var content  = $("#content");

//PAGINA POR DEFEITO
    content.load("inc/who_is.php");

    //NAVEGAÇÃO DO SITE
sections.click(function(){  

	showLoading();

	switch(this.id){  
		case "contacts":  
                content.load("inc/contacts.php", hideLoading);  
			break;  
		case "who_is":    
			content.load("inc/who_is.php", hideLoading);  
			break; 
		case "news":
			content.fadeOut();
			content.load("inc/news.php", hideLoading);  
			break;
		case "reserves":  
			content.fadeOut();  
			content.load("inc/reserves.php", hideLoading);  
			break;    
		default:    
			content.fadeOut();  
			content.load("inc/who_is.php", hideLoading);  
			break; 
	}

	return false;
});

//show loading bar  
function showLoading(){
        loading.show("show");
}  
//hide loading bar  
function hideLoading(){
       loading.hide("slow",function(){
            content.fadeIn('slow');
       });
       		
}; 
/******************************************/

Link to comment
Share on other sites

Estava no tópico, de qualquer das formas aqui vai:

Javascript:

/*************CARREGA AS PÁGINAS*************/
        var sections = $("#menu ul li");
        var loading  = $("#loading"); 
        var content  = $("#content");
        
        //PAGINA POR DEFEITO
    content.load("inc/who_is.php");
        
    //NAVEGAÇÃO DO SITE
        sections.click(function(){  
                
                showLoading();
                
                switch(this.id){  
                        case "contacts":  
                content.load("inc/contacts.php", hideLoading);  
                                break;  
                        case "who_is":    
                                content.load("inc/who_is.php", hideLoading);  
                                break; 
                        case "news":
                                content.fadeOut();
                                content.load("inc/news.php", hideLoading);  
                                break;
                        case "reserves":  
                                content.fadeOut();  
                                content.load("inc/reserves.php", hideLoading);  
                                break;    
                        default:    
                                content.fadeOut();  
                                content.load("inc/who_is.php", hideLoading);  
                                break; 
                }
                
                return false;
        });
                
        //show loading bar  
        function showLoading(){
        loading.show("show");
        }  
        //hide loading bar  
        function hideLoading(){
       loading.hide("slow",function(){
            content.fadeIn('slow');
       });
                       
        }; 
        /******************************************/
Link to comment
Share on other sites

Ok, tens de ter duas coisas em atenção.

Só vais começar a carregar o conteúdo depois de o fadeOut estar feito. [.fadeOut( [ duration ], [ easing ], [ callback ] ) || .fadeOut( [ duration ], [ callback ] )]

Portanto no teu caso tens de criar uma função

var carregaConteudo = function() {
   content.html('');
   content.load("inc/who_is.php", hideLoading);
};

Agora tens de fazer assim o fadeOut

content.fadeOut(1000, carregaConteudo);

Ok, já está a fazer fadeOut e a carregar o conteudo.

Agora é que a porca torce o rabo, tu qd tás em localhost ele faz-te fadeOut e fadeIn sem problemas.

O stress vai estar quando estiver online, o fadeOut ele faz, o fadeIn é que só se já tiver carregado préviamente.

var hideLoading = function(){
       if(content.children().length === 0)
          var intervalo = window.setInterval(hideLoading, 50);
       else
       {
          loading.hide("slow",function(){
             content.fadeIn('slow');
          });
       }
};

Pronto, assim deve dar.

O content.html(''); antes do load e depois do fade é muito importante, pois apaga tudo o que há dentro de #content, e quando ele faz a verificação se tem childs if(content.children().length === 0) convém que não haja mesmo nada lá dentro (Obviamente).

Bem, espero ter ajudado.

Melhores cumprimentos,João Lopes***Esta mensagem foi escrita ao abrigo do novo Acordo Ortográfico***

Link to comment
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
 Share

×
×
  • 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.