Placeholder – Plugin jQuery

Eae galera…

Vou colocar um plugin aqui muito util que é aquilo de colocar um texto no input e quando o usuario clicar no input o texto sai e se ele deixar o input em branco o texto volta… já dei até um tutorial disso que muita gente reclamo que acabou não funcionando.

Você pode baixar o plugin nesse link http://objetoweb.com/placeholder.js

Para usar é muito fácil…

Primeiro coloque a jquery no seu html e depois faça o link para este plugin

No seu input você irá adicionar o atributo text=”Qualquer texto” ficando assim

<input type=”text” name=”input” text=”Input com texto” />

E pronto mto simples rs

Quem fez o plugin foi o meu amigo http://newjquery.wordpress.com/ visitem!

Até!

JQuery – Navegação entre elementos – Traversing

Bom dia ae.

Falar aqui sobre navegação entre elementos pelo jQuery apartir de um evento.

Apartir do $(this) você pode ir para praticamente qualquer lado dentro de uma listagem, uma tabela ou no que você estiver mexendo e a biblioteca oferece algumas funções para facilitar essa navegação e as funções são:

.prev() ou .prev(“.class”): Pega o elemento anterior ou o anterior q tenha a classe “class”;

.next() ou .next(“.class”): Pega o próximo elemento ou o próximo que tenha a classe “class”;

.prevAll() ou .prevAll(“.class”): Mesma ação do prev mas não se limita ao anterior ele retorna todos q ele encontrar ou todos com a classe;

.nextAll() ou nextAll(“.class”): Mesma ação do next mas não se limita ao próximo ele retonar todos q ele encontrar ou todos com a classe;

.prevUntil(“.class”): Pega todos os anteriores ao $(this) até chegar a uma classe ou um elemento;

.nextUntil(“.class”): Pega todos os próximos ao $(this) até chegar a uma classe ou um elemento;

Ai existe um truque para saber você que quer usar o nextUntil() ou o prevUntil() para saber qual lado o seu código deve apontar para a classe que você precisa

if($(this).nextAll().is(“.class”)){
$(this).nextUntil(“.class”);
}else{
$(this).prevUntil(“.class”);
}

Esse é o if q você vai precisar para saber qual lado andar com o essas funções

É isso rapaziada qualquer coisa comenta ae ou caso você use uma forma mais eficiente compartilhe o conhecimento

Até

Dica HTML – Espaço em branco no rodapé do Chrome

Dae pessoal

Eu tive um problema com o Chrome hoje não sei se vocês já tiveram também.

Só no Chrome apareceu um espaço gigante que não é nenhum elemento ou qualquer coisa imaginavel.

A resposta que eu descobri foi excesso de floats no código css.

Eu resolvi tirando o float e trocando por display:inline-block, um salvador de vidas, no último elemento.

Caso você tenha outra solução comenta ae =]

Até

Conflito JQuery com outras bibliotecas de javascript

Eae pessoar.

Bom as vezes quando você precisar fazer manutenção em algum site que já use uma biblioteca javascript que você não tem o dominio mas tem medo de usar o jQuery para não dar problema em toda a estrutura de javascript que o site já tenha (acabo de acontecer comigo e deu um problema lazarento, rs)

A solução é muito mais simples que você pode ter imaginado.

Troque todas os “$” por “jQuery”, faça a chamada da nossa biblioteca maravilhosa antes da chamada de qualquer outra e coloque “jQuery.noConflict();” antes do código que você precisa implementar.

Fiz isso em uma url que eu não vou linkar aqui e deu tudo certinho.

Espero que funcione para vocês também.

Até.

Jquery – Transição slide infinita

Eae rapaziada

Como eu coloquei no post anterior uma transição infinita em alfa agora vou colocar uma com slide é bem simples aqui eu to passando a ação de dois botões e também um exemplo com set interval.

O exemplo pode ser visto na mesma página do post anterior que eu coloquei nos comentários.

Bom vamos lá a ação do botão voltar fica a seguinte:

$(“id do botão”).click(function(){ // id do botão que vai fazer a ação
var img = $(“ul.total li:last”).clone(); // copio o ultimo elemento
$(“ul.total li:last”).remove(); // removo ele
$(“ul.total”).prepend(img); // adiciono no começo da ul
$(“ul.total”).css({“marginLeft”:”-280px”}); // deixo a ul na posição dois no caso 280px q é o tamanho de cada elemento
$(“ul.total”).animate({“marginLeft”:”0″},500); // volto a ul pra posição incial fazendo o movimento de transição
return false;
});

Já a ação do botão de ir para frente fica assim:

$(“id do botão”).click(function(){// id do botão que vai fazer a ação
$(“ul.total”).animate({“marginLeft”:”-280″},500,function(){ // movimento a ul para a segunda posição
var img = $(“ul.total li:first”).clone(); // copio o primeiro elemento
$(“ul.total li:first”).remove(); // removo ele
$(“ul.total”).append(img); // adiciono no final da ul
$(“ul.total”).css({“marginLeft”:”0px”}); // volto a ul pra posição inicial
});
return false;
});

O automático eu uso a ação do botão ir para frente a diferença é a ausencia do evento:

setInterval(function(){
$(“ul.total”).animate({“marginLeft”:”-280″},500,function(){ // movimento a ul para a segunda posição
var img = $(“ul.total li:first”).clone(); // copio o primeiro elemento
$(“ul.total li:first”).remove(); // removo ele
$(“ul.total”).append(img); // adiciono no final da ul
$(“ul.total”).css({“marginLeft”:”0px”}); // volto a ul pra posição inicial
});
},5000); // intervalo de 5 segundos

A montagem do exemplo segue o seguinte padrão:

<div class=”galeria”>
<a href=”#” id=”botao direito”>></a>
<a href=”#” id=”botao esquerdo”><</a>
<ul class=”total”>
<li><img src=”#”/></li>
<li><img src=”#”/></li>
</ul>
</div>

As li devem ser no minimo 2.

O css fica a critério da sua necessidade assim como o quanto a galeria irá se movimentar no caso aqui 280px.

É isso comentários são sempre bem vindos e respondo sempre que posso.

Tem o meu twitter @superjacaman

Dúvidas usem comentem aqui que eu ajudo a entender mas espero que tenha ficado claro.

Até

Jquery CSS – Transição infinita em alfa

Eae rapaziada.

Mostrar aqui um pequeno efeito bem útil com a querida jquery que é um tipo de transição bem utilizada e fácil de fazer que é a transição infinita de elementos em uma estrutura ul li por exemplo em alfa.

Primeiro vamos a montagem.

O que você vai precisar é bem simples.

<ul class=”galeriaalfa”>
<li><img src=’ultima imagem’ /></li>
<li><img src=’segunda imagem’ /></li>
<li><img src=’primeira imagem’ /></li>
</ul>

O css é bem simples também

ul{position:relative;}
ul li{position:absolute;top:0;left:0;}

E o JS

setInterval(function(){
var img3 = $(“.galeriaalfa li:last”).clone();
$(“.galeriaalfa li:last”).fadeOut(400,function(){
$(“.galeriaalfa”).prepend(img3);
$(“.galeriaalfa li:last”).remove();
});
},5000);

A cada 5 segundos a galeria será fará o efeito de alfa no ultimo elemento e depois do efeito vai pegar esse elemento e jogar para o começo da ul

Como acho que deu para perceber eu montei a sequencia de imagens do ultimo para o primeiro por causa do efeito que eu expliquei na linha acima.

Bom e isso simples né?

É muito útil.

Sigam me @superjacaman

Dica – Como evitar cache em qualquer chamada de arquivo

Eae rapaziada.

Todo mundo que programa para web já sofreu ou sofre com o bendito cache.

Existe uma forma para podermos driblar o cache fazendo com que o browser faça sempre o download do arquivo que está decidido a ficar no cache e nunca mais sair de lá

Primeiro passo o arquivo deve ter a extensão .php e o servidor tem que ler php claro rs

Agora onde vc estão fazendo o link para o arquivo você faz o seguinte, por exemplo:

<link rel='stylesheet' type='text/css' media='all' href='estilo.css?<?php echo microtime();?>'/>

Bom acho que não tem segredo né. O que você vai fazer é chamar o arquivo como se tivesse passando uma variavel que é um microtime q sempre muda então para verificar essa variavel o browser sempre vai baixar o arquivo fazendo assim programadores felizes =]

Até mais

 

JQuery CSS – Script para select customizavel

Eae rapaziada.

Colocar aqui um script para select customizavel

O Uso dele é simples coloque a classe selectcustom no select que você quiser que seja diferente dos outros

Que o js vai ler toda a pagina e montar os selects customizados.

Ele já faz uma montagem html padrão e tem as funcionalidades programadas.

Você deve montar como se fosse um select normal com name e caso queira alguma das option com selected.

É possivel usar em forms.

A página deve puxar além da jquery o js e o css que estão linkados aqui neste post.

CSS

JS

É isso, dúvidas usem os comentários abaixo.

Exemplo:

http://sucessoemvendas.com/processos.php

Até.

Classe de upload e redimensionamento PHP

Eae pessoal to postando aqui uma classe de upload e redimensionamento em php de fácil uso.

* Essa classe faz o upload de imagens, redimensiona, salva o nome do arquivo com uma data e sempre no formato jpg.
* Os dados configuraveis são o caminho na variavel caminho e tamanhos o quanto for necessário na variavel tamanho que é uma array seguindo o exemplo:
* “p”=>”30X50″ * Primeiro o nome que será colocado no caminho da imagem logo antes da extensão
* e o tamanho que é de 30 de altura por 50 de largura
* os dados de tamanho são separados por virgula seguindo o exemplo acima como em:
* “p”=>”30X50″,”m”=>”60X60″
* e por ae vai.
* As imagens são redimensionadas proporcionalmente pela maior dimensão da imagem e no caso de uma imagem quadrada pela maior dimensão do dado da variavel por exemplo:
* uma imagem de 1000 por 500 e a variavel de tamanho com 100 por 50 ela será redimensionada da seguinte maneira
* a altura de 1000 fica com o tamanho de 100 e a largura de 500 vai assumir o tamanho proporcional a 100
* uma imagem de 100 por 100 e a variavel de tamanho com 70 por 60 ela será redimensionada da seguinte maneira
* a altura de 100 fica com o tamanho de 70 e a largura de 60 vai assumir o tamanho proporcional a 100

download aqui

Problema ie live submit jquery

Eae.

Para quem como eu já teve problema com o ie no evento $().live(“submit” do jquery e quase desistiu do que tava fazendo a solução é simples.

Segundo os tickets de bug da jquery se antes do evento $().live(“submit” tem um $().live(“click” o $().live(“submit” acaba sendo ignorado e não funciona de forma nenhuma.

A solução é colocar o $().live(“submit” antes de tudo logo depois do $(document).ready

Eu fiz aqui e funcionou sem problemas.

Até.