Redirect e scroll to com jQuery

Há muito tempo (muito mesmo, em 2009) eu fiz um post no meu blog sobre scroll to – scroll animado com jQuery. Devido algumas pessoas estarem com dúvidas de como fazer isso mas após um redirect de página, estou criado esse tutorial.

Scroll to

O código do Scroll to é bem simples, como já dito em meu site:

$('html, body').animate({
    scrollTop: $("#id_da_ancora").offset().top
}, 2000);

Após o redirect

A execução continua simples, o que muda é o momento da execução do script. No modelo normal, seria executado quando acontecesse algum click (provavelmente em algum link), porém aqui será no load da página.
A única coisa que precisamos é receber via QueryString qual será o id do elemento.

OBS: caso sempre seja um elemento específico nessa tela, poderá setar diretamente no onload

Código

//verifico se existe hash na url (caso não tenha, não preciso fazer o scroll)
if (window.location.hash) {
    //pego a hash
    var hash = window.location.hash
    //animo até meu elemento
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 2000);
}
​

E para adicionar essa hash na minha url, basta adicionar #id_do_elemento no final do href do link. Ex: href="minhaoutrapagina.php#id_do_elemento"

Demo

Link para melhor visualização

Lançado jQuery 1.7.2

Chegou a versão 1.7.2, já esta disponível para download através do CDN:

• http://code.jquery.com/jquery-1.7.2.js
• http://code.jquery.com/jquery-1.7.2.min.js

Compatibilidade com o jQuery Mobile

Essa versão só é compatível com a versão 1.1 do jQuery Mobile, para quem utiliza versões anteriores do jQuery Mobile, continue usando o jQuery 1.7.1 ou anterior.

Post do blog do jQuery.

Lançado jQuery 1.7

Pois é, já estamos na versão 1.7 e você ai com a 1.3 ou 1.4 né? =)
Lançada no dia 3/11/11 a versão 1.7 já esta disponível para download, claro que em sua versão Full e Min.

• http://code.jquery.com/jquery-1.7.js
• http://code.jquery.com/jquery-1.7.min.js

Novidades

As novidades ficam por conta dos novos eventos $(elements).on( events [, selector] [, data] , handler ); e $(elements).off( [ events ] [, selector] [, handler] );. Delegação de eventos de forma mais rápida. Melhor suporte a HTML 5, entre muitas outras. Vale a pena dar uma olhada no changelog.

jQuery UK Conference

Também anunciaram a primeira conferencia na Europa. Será em Oxford e terá vários participantes de nome como Paul Irish e Addy Osmani.
Pra quem puder ir (quem me dera hehe).

Lançado o jQuery 1.7 Beta 2

Olá galera.
No dia 13/10 foi lançado o Beta 2 da versão 1.7 do jQuery que incorpora alguns bugfix e ganha um aumento de estabilidade.

Você já pode baixar da CDN.
http://code.jquery.com/jquery-1.7b2.js

Todas as mudanças podem ser vistas no Change Log do blog oficial.

E isso ai, só baixar, subir para seus projetos e sair testando, não preciso repetir que qualquer bug encontrado será bem visto no bugtraker =D.

jQuery Transitions | Como fazer transições de páginas

Olá, a algum tempo que eu não posto aqui, estou mais focado na tradução da documentação, mas para vocês não me esquecerem, vim dar um oi .

Recentemente comecei um job onde o cliente solicitou que o site tivesse algumas animações, não fosse paradão. Pensei comigo mesmo, acho que o cara quer uma apresentação no PowerPoint =).

Em busca dessa solução, pensei em fazer transições entre as páginas. Eis que veio na minha cabeça um efeito muito simples mas de impacto, simplesmente esmaecer a página.

Vamos ao código então. Precisamos ter nosso html bonitinho.

A marcação

HTML – Página 1

<div id="container">
    <h1>Essa é a index </h1>
    Aqui vamos ter um texto qualquer onde temos um <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>. Esse link vai fazer a página esmaecer
</div>

HTML – Página 2

<div id="container">
    <h1>Essa é a segunda página </h1>
    Ela vai aparecer e vai ter um <a class="transition" href="http://jsfiddle.net/ruanltbg/WvD7Q/1/embedded/result/">link</a> para a index.
</div>

Já temos o HTMl com os links para as páginas, decidi deixar os links com uma class transition para poder identificar quais os links irão ter o efeito (pois posso ter links internos que simplesmente não irão a lugar nenhum, como âncoras).

Efeitos

Para ficar com o efeito armênico, precisamos que quando a página for abrir ela apareça devagar, ou seja, vamos usar o método fadeIn() para fazer isso. E após, precisamos pegar todos os links, aplicar o efeito na página e então redirecionar para onde o site deveria ir.

JavaScript

Vale lembrar que tudo deve estar dentro do ready e o código é igual para ambas as páginas.

$("#container").fadeIn(2000);
$("a.transition").click(function(event){
    event.preventDefault();
    link = this.href;
    $("body").fadeOut(1000, function(){
        window.location = link;
    });
});

Simples assim, agora temos uma página que mais parece um PowerPoint =D.

Demo

*ignore o header do jsfiddle que aparece

Tradução da documentação

Olá galera, há um tempo o Luiz Tiago havia postado que começaríamos o processo de tradução da documentação do jQuery.
No entanto, percebemos que a procura para ajudar a traduzir não foi alta. Gostaria de ressaltar que este trabalho é um trabalho não remunerado, mas que será de grande ajuda para todos, principalmente para os iniciantes. E posso assim dizer que, não há remuneração melhor do que o agradecimento de outra pessoa por algo que você fez e foi útil.

Alguns dados

• 288 páginas de documentação
• +- 30% concluído
• Nenhuma revisão
• +- 10 pessoas já colaboraram
• Faltam 217 páginas a serem traduzidas

Pense, se 288 pessoas pegarem uma página em 1 dia tudo estaria traduzido, ou agora 217.

Como colaborar?

Simples, no post do Tiago tem uma breve explicação de como proceder e mais detalhes no github do projeto.

Meu MUITO OBRIGADO para todos que já ajudaram e para os que ainda irão.

Lançado jQuery 1.6.4

Olá, na noite de ontem (12/09) foi lançada a nova versão do jQuery, a 1.6.4.

Foram corrigidos alguns bugs da versão 1.6.3. Como sempre disponibilizado em duas versões para download.

Links do CDN do jQuery

• http://code.jquery.com/jquery-1.6.4.min.js
• http://code.jquery.com/jquery-1.6.4.js

Lançado jQuery 1.6.3

Olá galera, o jQuery 1.6.3 foi lançado no dia 01 de Setembro (desculpe a demora =’). Ele veio acompanhado de muitas correções de bugs.

Como sempre, o jQuery team pede para que reportem os bugs caso alguém encontre algo que não esta funcionando.

Destaques

Como destaques temos:

• Correção a um ataque XSS
• Sem animações “worm holes“
• Melhorias com o tratamento da propriedade data do HTML5

Links do CDN do jQuery

• http://code.jquery.com/jquery-1.6.3.min.js
• http://code.jquery.com/jquery-1.6.3.min.js

A lista completa de mudanças pode ser vista no changelog.

Cya. +D

ajaxSetup | Configuração padrão para Ajax

Após o nosso podcast sobre Ajax, surgiram algumas dúvidas de como fazer um arquivo de configuração para o Ajax.
Explico, não necessariamente seria um arquivo de configuração e sim códigos de configuração, os mesmos não precisariam estar em um arquivo separado, eu mesmo, quando utilizo, coloco no arquivo de jQuery (não sou de utilizar CDN, por mais que eu recomende o uso).

Configurações padrões para o Ajax

O jQuery nos provê de várias propriedades para configuração do Ajax, essas podem se repetir por várias requisições diferentes. Devido a essa repetição podemos utilizar a função jQuery.ajaxSetup() para que a mesma configuração seja usada por todas as requisições.

Então vamos criar uma configuração para que todas as requisições sejam para apenas uma url.

//pode ser $.ajaxSetup
jQuery.ajaxSetup({
  url: 'uma_url_qualquer.php'
});

Quando usarmos $.get(), $.post(), entre outros, não precisamos mais passar a URL pois já temos na nossa configuração. Usamos dessa forma então:

$.ajax({
  data: {'nome': 'Ruan'}
});
$.get({
  data: {'nome-do-meio': 'Carlos'}
});
$.post({
  data: {'sobrenome': 'Kovalczyk'}
});
//sei que Kovalczyk pode soar como um palavrão para muitos =)

Agora vamos setar configurações diferentes

jQuery.ajaxSetup({
   global: false,
   type: "POST",
   cache: false,
   //ate mesmo callbacks
   error: function(error) {
      alert(error);
   }
});

Te vejo na próxima

Diferença entre window.load e document.ready

Olá, o jQuery prove três métodos para trabalhar com o carregamento da página. São eles:

• load()
• ready()
• unload()

Hoje irei explicar qual a diferença entre o $(window).load() e o $(document).ready().

Essa diferença é bem simples. O mais conhecido $(document).ready() é utilizado para verificarmos se o DOM esta completamente carregado, caso ele esteja, podemos trabalhar tranquilamente com seus elementos, nesse caso, uma imagem não precisa estar completamente carregada, apenas precisamos ter o elemento da imagem no DOM.

Já o $(window).load() é utilizado quando precisamos que TODOS os elementos estejam carregados, ou seja, ele vai esperar todas as imagens, css, javascript e elementos externos estarem carregados para ser executado.

Qual utilizar?

Vai depender apenas da sua necessidade, no próximo post, eu irei dar um exemplo de uso do $(window).load().

Demo

Veja aqui um exemplo da diferença entre window.load e document.ready.(existe diferenças de comportamento entre navegadores, essa diferença é notada entre o comportamento do Firefox e do Chrome).