26jan2012
Nos últimos meses, tenho usado bastante o efeito de carousel.
Como todo programador, me incomodo de ter que ‘me repetir’. Ou ter que repensar uma lógica que já resolvi uma vez.
Nem sempre ‘temos tempo’ de parar, analisar e otimizar oque estamos fazendo.
Porém, devemos fazer isso.
Fiz vários tipos de carouseis, porém por serem diferentes um dos outros, e alguns possuirem algumas peculiaridades, configurações extras, estilizações fora dos padrões, acabei fazendo os meus próprios códigos, e não usando nenhum plugin pronto.
Nesse post, vou deixar o start de um plugin de jQuery, que rapidamente fiz aqui.
Muitas melhorias precisam ser feitas, como:
-> possibilitar scroll vertical
-> não limitar a marcação a ser usada
-> permitir uso do easing..
e por ai vai.. nisso, eu acabaria recriando o cycle(ou chegando perto do efeito Hz dele). Não é essa a intenção.
Até agora é para ser simples mesmo, e muito mais simples de usar também.
Como todos os meus efeitos, esse não foge do meu padrão: resolvi as partes mais complicadas no css.
O js é simples. O instanciamento ainda mais.
É isso, sem mais, segue o código, e logo abaixo a demonstração.
A grande ‘sacada’, é deixar o plugin se virar com a animação, (setas prev e next), e termos uma chamada simples e limpa assim:
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
=) Vejam como fiz:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/* carousel */
jQuery.fn.carousel = function( settings ){
var $this = jQuery( this );
var defaults = {
prev: '.nav-left',
next: '.nav-right',
pos: 0,
speed: 1000
}
settings = jQuery.extend(defaults, settings);
var lis = $this.find('li');
var width_li = lis.eq(0).width()+ parseInt( lis.eq(0).css('marginLeft') )+parseInt( lis.eq(0).css('marginRight') );
var ul = $this.find('ul');
var prev = $this.find( settings.prev );
var next = $this.find( settings.next );
ul.css({width: (width_li*lis.length)+'px'});
/* .nav-left */
prev.click(function(){
if( settings.pos>0 ){
settings.pos--;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* .nav-right */
next.click(function(){
if( lis.length-1>settings.pos ){
settings.pos++;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* funcoes privadas */
_move = function( ul, pos, width_li, speed ){
var new_left = -1*pos*width_li;
ul.animate({left:new_left+'px'},settings.speed);
}
return $this;
};
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#slide { width: 460px; height: 300px; }
#slide li { width: 460px; height: 300px; }
#slide2 { width: 140px; height: 105px; padding: 10px 25px; background: #000; }
#slide2 li { width: 140px; height: 105px; }
hr { margin: 50px; }
/* css do plugin */
.carousel { position: relative; }
.overflow { overflow: hidden; height: 100%; position: relative; }
.carousel ul { position: absolute; top: 0; left: 0; }
.carousel li { float: left; }
.nav { position: absolute; top: 50%; z-index: 3;
background: url('images/nav.png') no-repeat;
width: 36px; height: 36px; margin-top: -18px;
cursor: pointer;
}
.nav-left { left: 10px; }
.nav-right { right: 10px; background-position: right top; }
.nav-left:hover { background-position: left -36px; }
.nav-right:hover { background-position: right -36px; }
/* css do plugin */
</style>
</head>
<body>
<div id="slide" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
<hr />
<div id="slide2" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/mini1.jpg" alt="" /></li>
<li><img src="images/mini2.jpg" alt="" /></li>
<li><img src="images/mini3.jpg" alt="" /></li>
<li><img src="images/mini4.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
</body>
</html>
Link deste post
25jan2012
Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; }
</style>
<script type="text/javascript">
function sizeIframe( w, h )
{
document.getElementById('yt').width = w;
document.getElementById('yt').height = h;
}
window.onload = function(){
sizeIframe( document.body.offsetWidth, document.body.offsetHeight-30 );
}
</script>
</head>
<body>
<iframe width="420" height="315" src="http://www.youtube.com/embed/tvaPMNq4Ey0" frameborder="0" allowfullscreen id="yt"></iframe>
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 600, 480 )" />
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 420, 315 )" />
<input type="button" name="mudar" value="300x240" onclick="sizeIframe( 300, 240 )" />
</body>
</html>
É isso. Me diga se vc usar.
Link deste post
Tags: embed
25jan2012
Boas,
A idéia aqui, foi chegar próximo do efeito de “Exibir mais” do youtube:
Escondido:
A mostra:
Ok ?
Uma parte do conteúdo fica a mostra, e clicando no botão aparece o restante.
O primeiro passo é resolver o efeito no css. Todos os efeitos são apenas css. O javascript manipulando css. jQuery só entra para facilitar essa manipulação, porém é importante ressaltar, que toda a lógica e o efeito em si, ficou no css.
Depois de conseguir resolver tanto o estado aberto, qnto o fechado, usando apenas css e html, sem nenhuma linha de js, fazer o comportamento fica super simples.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
.content { margin: 0 auto; width: 500px; }
#panel { position: relative; width: 500px; margin: 0 auto; }
#content { }
.hidden { height: 100px; overflow: hidden; }
#toggle { width: 488px; height: 20px; padding: 5px;
background: #fff; border: 1px solid #ccc; cursor: pointer;
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#toggle').click(function(){
jQuery('#panel').toggleClass('hidden');
});
});
</script>
</head>
<body>
<div id="panel" class="hidden content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet
luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt
eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.</p>
<p>Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo.
Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.</p>
<p>Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. </p>
</div><!-- /content -->
</div><!-- /panel -->
<div id="toggle" class="content">toggle</div>
</body>
</html>
Link deste post
Tags: esconde mostra
24jan2012
"After building some useful piece of software, one has to decide how to best deploy it. In UNIX, the standard way to do that is by publishing the source code in .tar.gz format and requiring users to compile it.
In Debian there is an alternative: using a .deb package. With a .deb package, a single dpkg -i <package>.deb installs the software.
This article explains how to create and support a .deb package for a simple software maintained in git, by tracking the packaging scheme in a specific branch on the same repository."
http://lpenz.github.com/articles/debgit/index.html
Permalink
| Leave a comment »
Link deste post
24jan2012
Bom, eu já tinha lido O Design do Dia a Dia, e quase sem querer acabei tendo em mãos pedindo uma indicação sobre oque ler, o “próximo” livro do Donald A. Norman.
Muito bom esse livro também. Podemos lê-lo como um complemento do outro.
Uma decisão tem que dar a sensacão de que é boa.
O pensamento vai sendo construido ao longo do livro.
Emoções norteiam as nossas escolhas. Primeiro inconscientemente, e muito depois de forma lógica, decidimos oque queremos, e oque vamos fazer.
Olhar o Design das coisas sob essa perspectiva, te faz refletir, como que algo além de ser bonito, usável, tb pode ser agradável.
Ou então como temos coisas que nos agradam, nos fazem sentir bem, mas não as usamos.
Realmente um mundo se abre, qndo vc nota que por mais que algo seja prático, não usamos se for feio, se não nos fizer sentir bem. E se algo for realmente bonito, e nos transmitir boas sensações, usaremos, apesar dos defeitos.
Norman nos apresenta nesse livro, 3 tipos de Design: Viceral, Comportamental e Reflexivo.
Vale muito a pena. Eu indico.
Link deste post
Tags: donald norman
23jan2012
Talvez esteja faltando algo “simples”, situações “cotidianas”, ou sei lá oque.
Estou vendo muitas pessoas no fórum com a mesma dúvida: “usar o objeto Deferred do jQuery”, “pegar o retorno de uma requisição ajax”, e coisas relacionadas.
Eu sempre indico o ótimo tutorial do Maujor:
http://www.maujor.com/blog/2011/02/01/o-objeto-deferred-da-jquery-1-5, porém talvez por ser tão completo, e ter tantas informações, alguns iniciantes podem não estar “entendendo”.
Vou deixar alguns exemplos práticos(todos com o mesmo resultado), de algumas formas de usar o Deferred:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
/* retorna undefined */
jQuery('#ajax_form_undefined').submit(function(){
var form = jQuery( this );
var ret = envia_form_nao_funciona( form );
alert( ret );
return false;
});
/* enviando ajax_form com done */
jQuery('#ajax_form').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.done(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form2 com then */
jQuery('#ajax_form2').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.then(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form3 com success */
jQuery('#ajax_form3').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.success(function( dados ){
alert( dados );
});
return false;
});
});
function envia_form_nao_funciona( form )
{
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function( dados ){
return dados
}
});
}
function envia_form( form )
{
return jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
});
}
</script>
</head>
<body>
<h2>Exemplo do que "não funciona"(retorna undefined)</h2>
<form method="post" action="processa.php" id="ajax_form_undefined">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome1" /></label>
<label>Email: <input type="text" name="email" value="email1" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com done</h2>
<form method="post" action="processa.php" id="ajax_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome2" /></label>
<label>Email: <input type="text" name="email" value="email2" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com then</h2>
<form method="post" action="processa.php" id="ajax_form2">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome3" /></label>
<label>Email: <input type="text" name="email" value="email3" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com success</h2>
<form method="post" action="processa.php" id="ajax_form3">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome4" /></label>
<label>Email: <input type="text" name="email" value="email4" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
</body>
</html>
Convém lembrar que “precisamos” do deferred por causa do assincronismo das requisições, ou seja, o objeto ajax, envia para o servidor, o servidor processa, e o objeto ajax trás o retorno, sem refresh, porém também, sem que o restante do script aguarde esse retorno.
É essa diferença entre “sincrono” e “assincrono”. Note que enviando em modo sincrono async: false,, eu consigo “pegar o retorno” do ajax.
jQuery(document).ready(function(){
/* retorna undefined */
jQuery('#ajax_form_sincrono').submit(function(){
var form = jQuery( this );
var ret = envia_form_sincrono( form );
alert( ret );
return false;
});
});
function envia_form_sincrono( form )
{
var ret = '';
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
async: false,
success: function( dados ){
ret = dados;
}
});
return ret;
}
E ai ? qual dos dois usar ? sincrono ? ou assincrono com o deffered ?
Não sei, isso depende da sua aplicação, e é assunto para um próximo post talvez.
Usou ? comente.. este é o “meu pagamento” pelo que escrevo: o teu comentário.
Link deste post
Tags: deferred
20jan2012
I just returned from vacation and was reviewing some photos in my cel phone when I found some old photos from a previous trip to SF. In the airport there was an exhibition about TV sets and some old remote controls got my attention. Here’s a picture of them:
Old TV remote control
Checkout the number of buttons in the remote control. The maximum is 4. There are some remotes with only one button. When I was a kid I remember the first TV bought in my house with a remote control that had only 2 buttons, one for volume and other for changing channel. That simple! That was around 1975. At the time, the technology for making a remote control was too expansive, so it could not be too complicated and have too many buttons, otherwise it would be too expansive to be sold in the market. That was the restriction that drove the simplicity of those 1st generation remote control. Now we don’t have that restriction and we get remotes that can accomplish much more tasks but are way more complex. Take a look at the picture below (and I even picked a not-so-complex one!):
Digital TV Remote Control
So maybe next time we want to design something more simple, we can think of imposing some restrictions to the design process! 
Link deste post
20jan2012
Eu havia postado, como enviar um formulário com ajax, aproveitando o callback submitHandler do jQuery.validate.
Porém, se vc não estiver usando esse plugin, e quiser apenas usar o ajax do jQuery, o seguinte basta:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#ajax_form').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "processa.php",
data: dados,
success: function( data )
{
alert( data );
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="" id="ajax_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="" /></label>
<label>Email: <input type="text" name="email" value="" /></label>
<label>Telefone: <input type="text" name="telefone" value="" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
</body>
</html>
Primeiro eu importo a lib jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Nada de novo até aqui.
Faço corretamente, e disparo a minha função no evento onsubmit do formulário:
jQuery('#ajax_form').submit(function(){
Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.
O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false; que envio na linha 19
return false;
Daí em diante, não tem segredo, é o mesmo miolo que usei para enviar com o jQuery.validate.
De graça, o método .serialize(), cria a query string com os dados do formulário, e usamos essa variavel para enviar a função ajax.
Ali no success: function( data ) (linha 13), é o callback que será disparado, assim que a requisição retornar(status 200 e tal).
Bom, é isso =)
Comentem, compartilhem. Sei que é um assunto já bastante “batido”, porém não me custava deixar um código bem escrito, até para tentar minimizar os efeitos dos maus tutoriais.
Link deste post
19jan2012
Apenas repositório mesmo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var combo = jQuery("select[name='combo']");
jQuery("input[name='selecionar']").click(function(){
var button = jQuery( this );
combo.find("option").each(function(){
if( jQuery( this ).text()==button.val() )
{
combo.val( jQuery( this ).val() );
}
});
});
});
</script>
<select name="combo">
<option value="2">Selecione</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<input type="button" name="selecionar" value="Item 1" />
<input type="button" name="selecionar" value="Item 2" />
<input type="button" name="selecionar" value="Item 3" />
Link deste post
Tags: combobox, select
19jan2012
Muito bom o plugin jQuery de lightbox do brasileiro Leandro Vieira:
leandrovieira.com/projects/jquery/lightbox/
é verdade que o projeto está ‘sem atualizações’, mas também nem precisa.
O plugin cumpre o papel dele, funciona perfeitamente e para um simples modal de imagens funciona muito bem, obrigado.
Precisei ontem, de uma galeria, onde várias classes seriam as disparadoras. Este html:
<ul class="fotos">
<li class="lightbox"><a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Primeira Diretoria Eleita da ABTF">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a><p>Primeira Diretoria Eleita da ABTF</p>
<div style="display: none;">
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 4">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox"><a href="images/banner-presidentes-da-abtf.jpg" title="Presidentes da ABTF">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a><p>Presidentes da ABTF</p>
<div style="display: none;">
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox last"><a href="images/banner-diretoria-atual.jpg" title="Diretoria Atual">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a><p>Diretoria Atual</p>
<div style="display: none;">
<a href="images/banner-diretoria-atual.jpg" title="Imagem 2">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a>
</div><!-- /none -->
</li>
</ul><!-- /fotos -->
Não achei nenhuma configuração de galeria no plugin.
Então ao disparar da maneira básica:
jQuery(document).ready(function(){
jQuery('.lightbox a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
O que o plugin fez, foi juntar todas as imagens numa única galeria de 9 imagens no total.
Mas na verdade, eu queria que cada LI, fosse um album separado dos demais.
Sendo a primeira galeria, com 4 imagens, a segunda com 3, e a ultima com 2 imagens.
Bom, eu poderia muito bem trocar de plugin, usar um fancybox, ou sei lá.. porém apenas pelo desafio, resolvi de uma maneira bem simples essa situação de: criar galerias diferentes para uma mesma classe html, com o plugin jQuery.lightBox:
jQuery(document).ready(function(){
jQuery('.lightbox').each(function(){
$( this ).find('a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
});
Dessa forma, o plugin vai rodar um grupo(cada li), um de cada vez, e vai separou como eu queria.
é isso. =)
Link deste post
Tags: lightbox
