Skip to main content
Pergunta fechada como "Duplicada" por bfavaretto, Erlon Charles, Silvio Andorinha, ramaral, Sergio
formatação, ortografia, e retirada de conteúdo irrelevante
Fonte Link
Maniero
  • 484,4mil
  • 94
  • 1,3mil
  • 2,2mil

Amigos, estou com um problema. EstouEstou desenvolvendo um site que tem uma divdiv onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma paginapágina, então ao clicar em portfólio, ele apenas me leva até a div #portifolioá div #portifolio. O problema é que eu gostaria de ao trocar de categoria no portfolioportfolio que ele não desse refreshrefresh na página, apenas recarrega-se a div entende?div.

Já procurei bastante na net, até encontrei um scripscript que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito grayscalegrayscale também. Se algué souber como fazer me ajudaria muito. Valew!

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";
                                        
                                        // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
                                        
                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
                                        
                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  
                             
                </nav>
                
                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 
    
                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
                            
                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   
                        
                        ?>
                    </div>
                    
                </div>
                    
                </div>

E este é o jqueryjQuery:

Amigos, estou com um problema. Estou desenvolvendo um site que tem uma div onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma pagina, então ao clicar em portfólio, ele apenas me leva até a div #portifolio. O problema é que eu gostaria de ao trocar de categoria no portfolio que ele não desse refresh na página, apenas recarrega-se a div entende? Já procurei bastante na net, até encontrei um scrip que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito grayscale também. Se algué souber como fazer me ajudaria muito. Valew!

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";
                                        
                                        // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
                                        
                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
                                        
                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  
                             
                </nav>
                
                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 
    
                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
                            
                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   
                        
                        ?>
                    </div>
                    
                </div>
                    
                </div>

E este o jquery:

Estou desenvolvendo um site que tem uma div onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma página, então ao clicar em portfólio, ele apenas me leva até á div #portifolio. O problema é que eu gostaria de ao trocar de categoria no portfolio que ele não desse refresh na página, apenas recarrega-se a div.

Já procurei bastante na net, até encontrei um script que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito grayscale também.

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";
                                        
                                    // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
                                        
                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
                                        
                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  
                             
                </nav>
                
                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 
    
                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
                            
                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   
                        
                        ?>
                    </div>
                    
                </div>
                    
                </div>

E este é o jQuery:

added 2918 characters in body
Fonte Link

O código é este:

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";
                                        
                                        // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
                                        
                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
                                        
                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  
                             
                </nav>
                
                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 
    
                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
                            
                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   
                        
                        ?>
                    </div>
                    
                </div>
                    
                </div>

E este o jquery:

        <script type="text/javascript">
        $(document).ready(function(){
            var content = $('#portifolio');

            //pre carregando o gif
            loading = new Image(); loading.src = 'images/loading_ajax.gif';
            $('#portifolio a').live('click', function( e ){
                e.preventDefault();
                content.html( '<img src="images/loading_ajax.gif" />' );

                var href = $( this ).attr('href');
                $.ajax({
                    url: href,
                    success: function( response ){
                        //forçando o parser
                        var data = $( '<div>'+response+'</div>' ).find('#portifolio').html();

                        //apenas atrasando a troca, para mostrarmos o loading
                        window.setTimeout( function(){
                            content.fadeOut('slow', function(){
                                content.html( data ).fadeIn();
                            });
                        }, 500 );
                    }
                });

            });
        });
    </script>

O código é este:

<div id="portifolio" class="grid_24">
 <nav id="menu-portifolio" class="grid_24"> 
     <ul id='nav'>
                            <li><a href='#'>SERVIÇOS<img class='icon-menu' src='images/icon-menu.png' alt='Icone do menu'/></a>
                                <ul>
                                    <?php
                                        // Includa a conexão com o banco de dados sql
                                        include "conn.php";
                                        
                                        // Conecta a tabela categorias
                                        $result = mysql_query('SELECT * FROM categorias')or die(mysql_error());
                                        
                                        echo "<li><a href='?id_todos=todos#bloco03'> &nbsp Todos </a></li>";
                                        
                                        // Exibe o resultado da consulta
                                        while ($row = mysql_fetch_object($result)) {
                                            echo "<li>      
                                                    <a href='?id=$row->id#bloco03'> &nbsp $row->nome </a>
                                                  </li>
                                               ";
                                        }                           
                                    ?> 
                              </ul>
                            </li>                                
                         </ul>
                    </nav>  
                             
                </nav>
                
                <!--  Primeira pagina portifólio -->
                <div id="modal" class="conteudo-portifolio grid_24">                     
                        <?php 
    
                        // Conecta a tabela portifolio                          
                        if (isset($_GET['id']) && is_numeric($_GET['id'])) {  
                            $id_categoria = $_GET['id']; 
                            $resultado = mysql_query("SELECT * FROM portifolio WHERE id_categoria = '$id_categoria' LIMIT 12"); 
                            
                            // Exibe o resultado da consulta
                            $myModal = 1;
                            while ($row = mysql_fetch_object($resultado)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }                               
                            } else {
                                $resultado_todos = mysql_query("SELECT * FROM portifolio LIMIT 12");
                                // Exibe o resultado da consulta
                                $myModal = 1;
                                while ($row = mysql_fetch_object($resultado_todos)){
                                    echo "
                                        <figure class='img-portifolio'> 
                                            <a href='#janela1".$myModal."' rel='modal'><img class='' src=". $row->imagem ." alt=". $row->titulo ."/></a>
                                        </figure>

                                        <div class='window' id='janela1".$myModal."'>
                                            <img class='img-thumb' src=". $row->imagem ." alt=". $row->titulo ."/>
                                        </div>                           
                                         
                                        <!-- mascara para cobrir o site -->  
                                        <div id='mascara'></div>                                        

                                         ";
                                $myModal++;
                                }
                            }                                   
                        
                        ?>
                    </div>
                    
                </div>
                    
                </div>

E este o jquery:

        <script type="text/javascript">
        $(document).ready(function(){
            var content = $('#portifolio');

            //pre carregando o gif
            loading = new Image(); loading.src = 'images/loading_ajax.gif';
            $('#portifolio a').live('click', function( e ){
                e.preventDefault();
                content.html( '<img src="images/loading_ajax.gif" />' );

                var href = $( this ).attr('href');
                $.ajax({
                    url: href,
                    success: function( response ){
                        //forçando o parser
                        var data = $( '<div>'+response+'</div>' ).find('#portifolio').html();

                        //apenas atrasando a troca, para mostrarmos o loading
                        window.setTimeout( function(){
                            content.fadeOut('slow', function(){
                                content.html( data ).fadeIn();
                            });
                        }, 500 );
                    }
                });

            });
        });
    </script>
Fonte Link

Navegação sem refresh!

Amigos, estou com um problema. Estou desenvolvendo um site que tem uma div onde eu tenho um script que lista resultados de uma consulta SQL. São imagens, no caso. O site foi desenvolvido em apenas uma pagina, então ao clicar em portfólio, ele apenas me leva até a div #portifolio. O problema é que eu gostaria de ao trocar de categoria no portfolio que ele não desse refresh na página, apenas recarrega-se a div entende? Já procurei bastante na net, até encontrei um scrip que era bem similar ao que eu queria, mas dava bug na janela modal e no efeito grayscale também. Se algué souber como fazer me ajudaria muito. Valew!