Ir para conteúdo

POWERED BY:

Arquivado

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

Aline Rodrigues

Clicar em um link e ir para outra página em div específica

Por , em Desenvolvimento frontend

Recommended Posts

Aline Rodrigues    2

Aline Rodrigues
Postado

Olá pessoal, estou com o seguinte problema: na minha página index.html tem um link, quero que quando ao clicar nesse link ele vá para outra página e pare em uma div específica.

 

Ex:

 

index.html

<a href="produtos.html#div"></a>

 

produtos.htmlvai apara a página e aparece a div.

 

Tem como isso?

 

Obrigada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

<a href="produtos.html#aniversario_link"></a>

Certifique-se que no documento produtos.html há algum elemento com a id #aniversario_link.

 

produtos.html

<h1>Lorem Ipsum</h1>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro.</p>
 
<h1 id="aniversario_link">Aniversário</h1>
<p>Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos.</p>

O link para ir para o produtos.html ancorando o título "aniversário" seria

<a href="produtos.html#aniversario_link">Ir para aniversário, em produtos</a>

Ou, se já estiver na página produtos.html:

<a href="#aniversario_link">Ir para aniversário</a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aline Rodrigues    2

Aline Rodrigues
Postado

Poi é pelo que entendi nesse link, os arquivos abrem dentro de uma mesma div, não serviria muito pra mim :( , pois eu quero que ele abra em outra página e vá direto para a div dessa página.

Obrigada.

 

obs: não possuo muito conhecimento de javascript, ajax, etc...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Você está filtrando os produtos por Aniversário, Casamento, Chás, Maternidades com jQuery, na mesma página (produtos.html). O filter no produtos.html organiza os produtos pelo valor de data-option-value, certo?

<a href="#filter" data-option-value=".chas">Chás</a>
O que quer é estabelecer um link externo para um filtro específico, sendo que para filtrar está utilizando o plugin jQuery Isotope. É como QueryString, do PHP. Utilizaremos o plugin jQuery BBQ, que utiliza o evento hashchange do HTML5 para permitir essa "querystring" com o hash (#).

 

Exemplo da utilização :seta: http://isotope.metafizzy.co/demos/hash-history.html

Perceba que é a tabela periódica. Para filtrarmos apenas os metais de transição, usamos sua classe (que é .transition) com #filter. 

<a href="#filter=.transition">transition</a>
Resultado :seta: http://isotope.metafizzy.co/demos/hash-history.html#filter=.transition

 

Na documentação há todos os passos. Mas, caso não entenda nada, simplifiquei rapidamente (no sentido de "organizei parcialmente") o código para que possa entender melhor o funcionamento e o que é necessário para chegar à solução: :seta: http://jsfiddle.net/RhdKb/

 

No seu código, já há praticamente tudo: jQuery, jQuery Isotope e os elementos filtrados. Só falta o plugin jQuery BBQ + hashchange. Vou simplificar também como incluí-los:

1. Baixe o código :seta: https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js;

2. Inclua o plugin na sua página com <script>;

3. Inclua o hashchange também com <script>: 

$(function(){
      var $container = $('#container'),
          // object that will keep track of options
          isotopeOptions = {},
          // defaults, used if not explicitly set in hash
          defaultOptions = {
            filter: '*',
            sortBy: 'original-order',
            sortAscending: true,
            layoutMode: 'masonry'
          };
  
      var setupOptions = $.extend( {}, defaultOptions, {
        itemSelector : '.element',
        masonry : {
          columnWidth : 120
        },
        cellsByRow : {
          columnWidth : 240,
          rowHeight : 240
        },
        getSortData : {
          symbol : function( $elem ) {
            return $elem.attr('data-symbol');
          },
          category : function( $elem ) {
            return $elem.attr('data-category');
          },
          number : function( $elem ) {
            return parseInt( $elem.find('.number').text(), 10 );
          },
          weight : function( $elem ) {
            return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
          },
          name : function ( $elem ) {
            return $elem.find('.name').text();
          }
        }
      });
  
      // set up Isotope
      $container.isotope( setupOptions );
  
      var $optionSets = $('#options').find('.option-set'),
          isOptionLinkClicked = false;
  
      // switches selected class on buttons
      function changeSelectedLink( $elem ) {
        // remove selected class on previous item
        $elem.parents('.option-set').find('.selected').removeClass('selected');
        // set selected class on new item
        $elem.addClass('selected');
      }
  
  
      $optionSets.find('a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return;
        }
        changeSelectedLink( $this );
            // get href attr, remove leading #
        var href = $this.attr('href').replace( /^#/, '' ),
            // convert href into object
            // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
            option = $.deparam( href, true );
        // apply new option to previous
        $.extend( isotopeOptions, option );
        // set hash, triggers hashchange on window
        $.bbq.pushState( isotopeOptions );
        isOptionLinkClicked = true;
        return false;
      });
 
      var hashChanged = false;
 
      $(window).bind( 'hashchange', function( event ){
        // get options object from hash
        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
            // do not animate first call
            aniEngine = hashChanged ? 'best-available' : 'none',
            // apply defaults where no option was specified
            options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } );
        // apply options from hash
        $container.isotope( options );
        // save options
        isotopeOptions = hashOptions;
    
        // if option link was not clicked
        // then we'll need to update selected links
        if ( !isOptionLinkClicked ) {
          // iterate over options
          var hrefObj, hrefValue, $selectedLink;
          for ( var key in options ) {
            hrefObj = {};
            hrefObj[ key ] = options[ key ];
            // convert object into parameter string
            // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
            hrefValue = $.param( hrefObj );
            // get matching link
            $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
            changeSelectedLink( $selectedLink );
          }
        }
    
        isOptionLinkClicked = false;
        hashChanged = true;
      })
        // trigger hashchange to capture any hash data on init
        .trigger('hashchange');
 
    });

 

Nota: caso necessário, alterar linha ('#container')

var $container = $('#container'),
Há também um ótimo tutorial do DL sobre o assunto, não com a mesma solução, mas com um resultado semelhante :seta: Hash History with Isotope. Uma ótima e objetiva alternativa, caso eu tenha falhado na didática.

 

Documentação (consulte-a, de preferência):

:seta: http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

:seta: http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

:seta: http://support.metafizzy.co/2011/isotope-combo-filters-hash-links.html

:seta: http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#hashchange_event(BBQ)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aline Rodrigues    2

Aline Rodrigues
Postado

Olá Diéssica,

 

Não consegui fazer :(

 

Baixei o isotopehashhistory, e fiz um teste, criei outra página para chamar essa página abaixo com os links.

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>Isotope Tutorial</title>
        
        <link rel="stylesheet" href="style.css">
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
        </script>
        
        <script type="text/javascript" src="hashchange.min.js"></script>
        <script type="text/javascript" src="isotope.js"></script>
        
        <script type="text/javascript">
        
        $(document).ready(function(){
            var $container = $('#content');
        
            if(location.hash!=""){
                var hashfilter = "." + location.hash.substr(1);
            }
            else{
                var hashfilter = "*";
            }
        
            $container.isotope({
                filter: hashfilter,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false,
                }
            });

            $('#nav a').click(function(){
                var selector = $(this).attr('data-filter');
 
                var prettyselector = selector.substr(1);
 
                location.hash = prettyselector;
                
                return false;
            });

            $(window).hashchange(function(){
    
                if(location.hash!=""){
                    var hashfilter = "." + location.hash.substr(1);
                }
                else{
                    var hashfilter = "*";
                }
                
                $container.isotope({
                    filter: hashfilter,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false,
                    }
                });
    
            });

        });
        </script>
    </head>
    
    <body>
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="" data-filter="*">All</a></li>
                <li><a href="" data-filter=".cat1">Category 1</a></li>
                <li><a href="" data-filter=".cat2">Category 2</a></li>
                <li><a href="" data-filter=".cat3">Category 3</a></li>
            </ul>
        </div>
        
        <div id="content">
            <div class="box cat1 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus!
                </div>
            </div>
            
            <div class="box cat1">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus! Odio placerat pellentesque risus urna elit, odio phasellus, rhoncus, est ridiculus purus etiam, penatibus integer!
                </div>
            </div>
            
            <div class="box cat2 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur?
                </div>
            </div>
            
            <div class="box cat1">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
                </div>
            </div>
            <div class="box cat2">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
                </div>
            </div>
            <div class="box cat2">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
                </div>
            </div>
            
            <div class="box cat2 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit.
                </div>
            </div>
            
            <div class="box cat1">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
                </div>
            </div>
            
            <div class="box cat2 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
                </div>
            </div>
        
        
        </div>
    </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito