Nesse tutorial vou mostrar como você pode mostrar em seu site, blog ou onde mais você quiser suas fotos do Flickr com a utilização da API do Flickr, jQuery, Ajax e JSON. Você não precisa de conhecimento avançado para entender esse tutorial, basta conhecimentos básicos de jQuery e JSON.
Não irei me adentrar muito em detalhes sobre o HTML e o CSS, pois ele ficam a seu critério, portanto, vamos diretamente ao JavaScript:
Hoje em dia existem vários plugins para isso, mas criei um exemplo bem simples em jQuery para que você possa mostrar seus updates do Twitter no blog sem a utilização de plugin, e de fácil customização. Basta dar uma olhada no exemplo que criei, copiar o código e na função twitterTimeline() substituir pelo seu nome de usuário e o número de Tweets que deseja mostrar. Exemplo:
twitterTimeline('nome_do_usuario', 80);
Customize como desejar.
Uma dica rápida para aqueles que adoram performance. Estive procurando uma alternativa de como carregar o botão de Retweet do Twitter via Ajax, na documentação oficial do site eles não mencionam nada do tipo, mas fuçando descobri uma dica de Jonathan Moore onde ele ensina de uma forma simples a carregar o botão via Ajax.
Alguns dias atrás a uma visita no Snipplr acabei achado um código bem interessante para se trocar URL’s do Youtube na página por player em Flash. Foi com base nesse código então que resolvi montar uma simples galeria de vídeos para explicar aqui e mostrar o funcionamento desse código que é bem simples.
Bom galera, procurei alguma solução para redimensionar a altura de um textarea pelo conteúdo e talvez por eu ser chato não gostei muito das que encontrei, :~ com isso, coloquei a mão na massa e saiu este código logo abaixo, acho que ficou legal. :)
/* OBS: Todos textarea tem que ter id */
(function($) {
$.fn.autosize = function() {
$(this).each(function(){
$(this).css({'overflow' : 'hidden'});
$('body').prepend('<div id="jQuery-autosize-' + $(this).attr('id') + '"></div>');
$('#jQuery-autosize-' + $(this).attr('id')).css({
'display' : 'none',
'word-wrap' : 'break-word',
'font-family' : $(this).css('font-family'),
'padding' : $(this).css('padding'),
'font-size' : $(this).css('font-size'),
'font-padding' : $(this).css('font-padding'),
'font-weight' : $(this).css('font-weight'),
'line-height' : $(this).css('line-height'),
'width' : $(this).width()
});
autosize($(this));
$(this).bind('keyup keypress change', function() {autosize($(this))});
});
};
function autosize(e) {
div_id = '#jQuery-autosize-' + e.attr('id');
val = e.val().replace(/\n/g, '<br />');
$(div_id).empty();
$(div_id).append(val + '<br /><br />');
e.css('height', $(div_id).height());
}
})(jQuery);
Acho que ficou simples e fácil de entender então não tem muito que explicar, é só salvar e incluir em sua página e usá-lo desta forma:
$(function(){$('textarea').autosize();});
Nesse tutorial você irá aprender a trabalhar com o módulo column das CSS3 e a como desenvolver plugins para jQuery:
Arquivos do tipo .chm são arquivos de ajuda do Windows semelhantes aos .hlp, porém são compilados utilizando fontes .html. Se você buscava até agora uma referência de consulta rápida para o Framework jQuery, está aí a solução, ótimo para aquelas horas em que você precisa consultar a ajuda do jQuery está sem internet. Se você utiliza Windows, basta baixar o arquivo, descomprimir o mesmo e utilizá-lo.
Caso você abra o arquivo e receba um aviso de página não encontrada ou algo do tipo, efetue os seguintes passos:
