Um dos grandes desafios para a produção de um site é que ele funcione nos diversos navegadores de forma uniforme, ou seja não dê problemas ou “quebre”, outro grande desafio que está ligado a isso é usar fontes personalizadas de forma mais simples e fácil. Para isso podemos utilizar uma propriedade chamada @font-face, com ela podemos instalar fontes direto no servidor onde o seu site está hospedado e fazer com que ela seja exibida nos navegadores sem o uso de javascript ou flash.

Com isso podemos então botar a mão na massa e ver como funciona, primeiramente você deve achar uma boa fonte existe vários sites que disponibilizam fontes grátis e pagas, mais abaixo vou falar sobre direitos autorais de fontes.

Com a fonte em mão coloque-a em uma pasta ou na raiz do seu servidor para nosso exemplo vou usar a fonte Loopi você pode baixa-la no site www.dafont.com de forma gratuita.  Neste exemplo vou coloca-la dentro da pasta “fontes”, assim minha estrtura de pastas fica:

fontes/Loopi.otf
index.html

No CSS do arquivo index.html (ou na sua folha de estilo o arquivo.css) você deve “chamar” a fonte com o seguinte trecho de código:

@font-face {
    font-family: Loopi;
    src: url(fonte/Loopi.otf);
}

Com isso sua fonte está instalada no seu site, o atributo font-family determina o nome que você quer dar a sua fonte, você pode chamar como quiser, mas se for um nome composto deve-se usar aspas, por exemplo se a fonte se chama Henry Morgan Hand logo o atributo de font-family deve ser “Henry Morgan Hand“.

E por fim é só colocar no seu seletor a família de fonte que colocou o seu site, assim:

h1{ font-family:Loopi, sans-serif; }

Note que eu coloquei mais uma fonte, ou seja se a fonte não for carregado (Loopi) qualquer fonte Sem toSerfa, como Verdana ou Arial, será colocada no lugar, também temos outros atributos no fonte face,veja este exemplo:

@font-face {
    font-family: Loopi;
    src: url(fonte/helvetica.otf);
    src: local(helvetica.otf);
    font-weight: 400;
}

Aqui determinamos que se fonte no servidor não for carregada o navegador vai buscar no sistema do usuário a fonte e ainda coloca-la em negrito, o valor de 400 é um valor dentre os que este atributo tem que vão des de 100 a 900, normal, bold e outros,veja aqui mais sobre este atributo.

Bem bacana não, agora fique esperto em algumas dicas abaixo para que possa dar tudo certo no seu site.

Formatos de fontes aceito

Compatibildiade

Aqui vai uma boa notícia os navegadores Internet Explorer na versão 7, 8 e 9 aceitam o @font-face porém apenas as extensões EOT, você pode achar vários conversores on-line e eu recomendo este da Font Squirrel que converte em um punhado de formatos para  web, já os navegadores Safari, Firefox, Crhome e Opera aceitam fonts em TFF e OTF.

Direitos Autorais da Fonte

Aqui uma dica muito importante, nem toda fonte na internet é de graça, você deve ficar atendo a licença da fonte pois isso pode acarretar para seu projeto sanções jurídicas sobre o uso da fonte, por isso sempre de uma conferida nos arquivos da fonte que baixar que em geral tem um aquivo em TXT que mostra o tipo de licença dela, mas nada impede de você comprar a fonte e usa-la veja nos sites associados da Da Font onde comprar.

Onde achar fontes bacanas de graça

Existe vários sites de fontes por ai, eu recomento dois deles para poder baixar fontes, um é o dafont.com onde você poderá filtrar o tipo de fonte não apenas pelo tipo (caligráfica, serifada, display, etc..) como pelo tipo de licença, veja que na busca tem um link escrito “More Options” ai você pode colocar fontes free, além de poder escrever um trecho do seu texto para ir testando a fonte.

Outro ótimo repositório de fontes com  licença gratuita é o próprio Google que tem em seu projeto de Google Web Fonts uma enorme biblioteca de fontes onde você pode não só baixar como usa-las onde line uma verdadeira API de fontes ao estilo Google, aqui você vai poder escolher o tipo de fonte entre escritas a mão, sem serifa, com serifa e display , apos escolher na barra azul logo em baixo você clica em “use” e vai ver um medidor de tempo de carregamento da fonte, tipo de negrito que ela suporta (font-weight), coloca-la sem instalar no seu servidor ou baixa-la no link acima do medidor.

Para maiores informações o Google também desenvolveu um hot-site sobre o assunto acesse http://www.font-face.com/ e veja mais detalhes sobre a técnica ou mesmo a Própria W3c que trata sobre o assunto.

Qualquer dúvida postem ai pessoal, até a próxima.

Fontes de pesquisa:
http://tableless.com.br/font-face-fonts-externas-na-web/
http://www.font-face.com/
http://www.google.com/webfonts

Para fazer o efeito vamos seguir os seguintes códigos abaixo:

1- Preparando o html

<form id="form1" name="form1" method="post" action="">
     <input type="text" id="busca" value="Busca..." />
</form>

Preste bastante atenção no id e no value do input que você colocou porque vamos utilizar ele mais afrente.
O id que estamos utilizando chama  busca value Busca… .

2- Instancie o seu jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

2- Criando a função  ”inputEfeito”

Pessoal essa e a função que vai fazer o efeito dentro do imput copie e cole ela abaixo do jQuery

<script type="text/javascript">

function inputEfeito(nome,valor,corFoco,corPerdeFoco,sizeFoco,sizePerdeFoco){
       $(nome).focus(function(){
               if($(this).val() == valor){
                      $(this).val("");
                      $(this).css("color",corFoco);
                      $(this).animate({width:sizeFoco});
               }
        });
       $(nome).blur(function(){
               if($(this).val() == ""){
                      $(this).val(valor);
                      $(this).css("color",corPerdeFoco);
                      $(this).animate({width:sizePerdeFoco});
               }
        });
}

</script>

Repare que estamos usando duas funções dentro de “inputEfeito” a primeira a “focus” que é quando o usuário da o foco para o input.

E a segunda função é  ”blur” quando o input perde o foco.

3-Chamando Função “inputEfeito”

<script type="text/javascript">

inputEfeito("id do campo","nome do campo","cor quando tiver foco","cor quando perde o foco","tamanho inicial do input","tamanho final do input");

</script>

ex:

<script type="text/javascript">
    inputEfeito("#busca","Busca...","#999999","#000000","50px","100px");
</script>

Mas antes de falar deles vamos ao conceito básico seletores em CSS são os elementos que compõe sua marcação de HTML como por exemplo o seletor de links é o atributo <a> e a ele podemos dar estilos, caminho, relações, e etc. Os pseudos elementos são elementos criados “entorno”  do elemento ou seja se declaramos que um elemento de link tem um texto antes, o navegador irá “escrever” este texto antes do do seletor.

Os pseudos seletores não são compatíveis no explorer 6 que a ainda uma grande fatia do mercado de navegadores mas já no explorer 7 e 8 tem amplo suporte a esta técnica.

Veja na tabela abaixo os pseudo seletores aceitos pelos navegadores

Agora que sabemos mais sobre seletores e seus pseudos vamos brincar um pouco com o before e after, neste exemplo imaginamos que criamos toda nossa folha de estilo e aplicamos em várias páginas, ai você me diz que precisa colocar na frente de cada título um elemento gráfico como uma “setinha“, ok você vai me dizer: é só desenhar e coloca no background do título colocando um padding-left da largura da imagem. Porém seu título já tem um background de imagem e ai o que fazer?

Você pode utilizar o pseudo seletor “after” e ali acrescentar esta imagem como funciona? Veja no exemplo abaixo

.titulo{
	background:url(imagem.png) repeat-x bottom;
	padding:5px;
	font-size:14px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

.titulo:after{
	width:30px;
	height:30px;
	background:url(setinha.png) no-repeat;
	content:" ";
}

Veja que  o nosso seletor “.titulo” recebe antes dele uma caixa de 30x30px com uma imagem de fundo sem conteúdo. Esta ferramenta possibilita você criar elementos ou textos antes de cada seletor que tiver o estilo que criar, no caso acima o “.titulo” .

Neste artigo do Codrops veja como eles trabalharam além do efeito do After e Before outras propriedades como o Routate.

clique aqui para ampliar.

Neste fim de semestre auxiliei um amigo meu a fazer seu trabalho de TCC (Trabalho de conclusão de curso) que era um site onde ele propôs uma navegação não muito convencional, onde cada link escorregaria para o conteúdo tanto na horizontal como na vertical. Até aqui procuramos alguns plugins que ajudaram mas não eram de fácil aplicação e instalação como este jQuery ScrollTo resolvi fazer algo mais simples que resolveria o problema, veja ai como ficou e logo abaixo o que eu fiz.

A primeira coisa foi definir o tamanho do site bem como o que teria dentro dele, veja no esquema abaixo como isso isso funcionou

Observe que o body vai variar de acordo com o seu monitor mas o que vamos estudar aqui é a rolagem do .site-palcoGeral e como ele vai ser visto dentro do .conteudo-geral ai você pode esconder  ou não as “laterais”, veja o CSS do esquema acima.

body{ margin:0px; padding:0px;width:100%; height:100%; overflow:hidden; border:1px solid #339900; }
.conteudo-geral{
	width:980px;
	height:600px;
	/*overflow:hidden;*/
	margin:auto;
	position:relative;
	border:1px solid #FF0000;
}
.site-palcoGeral{
	position:absolute;
	top:-2716px;
	left:-2374px;
	border:1px solid #FF0;
	width:6060px;
	height:3400px;
	border:1px solid #F0F0F0;
}
.site-palco{
	width:6060px;
	height:3100px;
	position:relative;
}
.site-geral{
	width:900px;
	height:520px;
	padding:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	border:1px solid #000000;
}
.site-home{left:2374px;top:2716px;}
.site-001{left:3344px; top:2716px;}
.site-002{left:2374px; top:1748px;}
.site-003{left:2373px;top:932px;}

/* Menu */
.conteudo-menu{
    position: absolute;
	left:0px;
	top:0px;
	z-index:10;
	padding:10px;
}
.conteudo-menu{
	position:relative;
}

E agora veja o HTML

<div class="site-palcoGeral">
    <div class="site-palco">
        <div class="site-geral site-home"><a name="item1" id="item1"></a>Home</div>
        <div class="site-geral site-001"><a name="item2" id="item2"></a>001</div>
        <div class="site-geral site-002"><a name="item3" id="item3"></a>002</div>
        <div class="site-geral site-003"><a name="item4" id="item4"></a>003</div>
    </div>
</div>

<div class="data-menu">
    <div class="conteudo-menu">
        <a href="#" class="linkHome">Home</a>
        <a href="#" class="link001">Link 001</a>
        <a href="#" class="link001">Link 002</a>
        <a href="#" class="link002">Link 003</a>
    </div>
</div>

Aqui o menu fica por fora para que você possa ver como funciona e por fim o jQuery, não se esqueça de chamar a biblioteca, aqui está referenciando da biblioteca do google

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
			$('.linkHome').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-2374px'});
				return false;
			});

			$('.link001').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-3344px'});
				return false;
			});

			$('.link002').click(function(){
				$('.site-palcoGeral').animate({top:'-1748px', left:'-2374px'});
				return false;
			});

			$('.link003').click(function(){
				$('.site-palcoGeral').animate({top:'-932px', left:'-2373px'});
				return false;
			});
		});

    </script>

Veja como funciona, ao clicar no item do menu, aqui chamado pela classe que ele representa eu uso o Animate que muda a posição do “.site-palcoGeral”  para encaixar o conteúdo em seus respetivos pontos, veja no desenho abaixo a representação.

Bom é isso aí qualquer dúvida poste ai, es e quiser sugerir acesse o link aqui e poste alguma duvida que tenha e na medida que eu puder responder postarei aqui no blog, até mais!

html { margin-top: 28px !important; }

E com isso um espaço no topo do blog, procurei por ai e achei neste aqui uma solução, basta você ir na pasta dos eu tema que fica em: “wp-content/themes” elá dentro procure a pasta do seu tema, logo ache o arquivo “functions.php”, caso não tenha crie-o,agora acrescente as duas linhas de códigos abaixo:

function my_function_admin_bar(){ return false; }
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

Caso crie o arquivo coloque assim:

<?php
        function my_function_admin_bar(){ return false; }
        add_filter( 'show_admin_bar' , 'my_function_admin_bar');
?>

E pronto, acredito que isso seja para algum uso da atualização de barra de navegação, ou de usuários, bom depois procuro com mais afinco sobre o tema, até mais.

Vantagens

Este plugin permite que você possa exibir imagens, textos e links dentro de um “slide” que pode ficar passando para os lados ou usando outro plugin fazer alguns efeitos.

Botões de próximo e anterior, para passar o slides

Outra vantagem é a manipulação simples do CSS, com ele você pode editar muita coisa que vai deste o tamanho a posição dos botões.

Desvantagens

Vejo neste plugin apenas dois probleminhas que com alguns plugins passei dificuldade em ter compatibilidade e neste plugin não há o efeito de fade, que em algusn sites fica bem melhor do que “escorregar”.

Este plugin não tem a paginação automática,  uma lista de quantidade de itens abaixo do slide, onde você clicar e é levado ao slide.

Mão a massa

Agora vou mostra como é fácil usar e configurar este plugin, vamos começar com o HTML que será nosso slide, vou fazer algo simples apenas como demonstração, veja:

<ul id="carousel" class="estilo-carousel">
    <li>Slide um</li>
    <li>Slide dois</li>
    <li>Slide três</li>
</ul>

Note que com este plugin dentro de cada “LI” você pode colocar imagens , textos e links

Agora baixe o plugin juntamente com o jQuery e depois chame-os na sua página, atenção na ordem pois em javascript isso influencia  e muito.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>

E depois chamamos  a função que vai fazer 50% da mágica:

<script type="text/javascript">
    $(function(){
        $("#carousel").jcarousel();
    });
</script>

Agora ao CSS que faz os outros 50%, eu defini que meu slide terá uma largura de 400px e de altura 200px

.estilo-carousel .jcarousel-direction-rtl{direction:rtl;}
.estilo-carousel .jcarousel-container-horizontal{width:400px;}
.estilo-carousel .jcarousel-container-vertical{height:938px;}
.estilo-carousel .jcarousel-item{width:400px;height:200px;}
.estilo-carousel .jcarousel-item-horizontal{margin-left:0;margin-right:10px;}
.estilo-carousel .jcarousel-direction-rtl .jcarousel-item-horizontal{margin-left:10px;margin-right:0;}
.estilo-carousel .jcarousel-item-vertical{margin-bottom:10px;}
.estilo-carousel .jcarousel-item-placeholder{background:#fff;color:#000;}
.estilo-carousel .jcarousel-next-horizontal{position:absolute;top:50px;right:0;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-prev-horizontal{position:absolute;top:50px;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-clip-horizontal,
.estilo-carousel .jcarousel-clip-vertical{width:400px;height:200px;}

Aqui uma versão otimizada, note que eu defino o tamanho do slide é no CSS, veja no exemplo abaixo como ficou, como disse é uma versão de testes simples, você pode abusar de sua ciatividade e modifica-lo como quiser.

Parâmetros

Que tal darmos uma incrementada com os parâmetros, existem pluguins que nos fornecem alguma ajuda na hora de montar o seu resultado final, neste por exemplo podemos definir a quantidade de itens, por hora ou falar dos mais básicos você pode conferir mais atributos aqui veja os que mais uso:

Outra Saída

Com base em um plugin algumas pessoas desenvolvem outro melhorando e incrementando, vejam este por exemplo, aqui o cara consegue trabalhar outros efeitos como o fade, mas tome cuidado pois alguns atributos e estilos são bem diferentes, este tem a vantagem deter a paginação automática.

Para que usar?

Esta função serve para que você possa resgatar dados de uma página externa sem que tenha que recarregar (“dar refresh”)  na página aberta, um exemplo seria ao clicar em um botão “pesquisar” normalmente a página seria recarregada e mostraria o resultado, com o ajax do jQuery ao clicar apareceria uma mensagem de carregando e em seguida o resultado apareceria sem recarregar a página.

Recomendações?

Tome muito cuidado com acentuação, aconselho a usar codificação UTF-8 para voltar valores, mas cuidado ao usar a função em excesso pois se o usuário desabilitar o javascript nada vai funcionar, recomendo para usar para coisas simples como retoranar um valor de itens no carinho, envio de e-mail, gravar dados no banco etc…

Como debugar?

Para debugar eu uso o Plugin Firebug do Firefox, porém em sua versão mais antiga ele pode nos fornecer o caminho,  existe outros plugins de jQuery que montar um local para debugar , fique a vontade para fazer sua pesquisa.

Mãos a massa!

Ok então como disse vamos criar uma página onde temos as imagens dos produtos e ao clicar nelas é adicionado ao carrinho que é mostrado em outra parte do site,  aqui vamos nós em um exemplo simples acompanhe

O estilo vou deixar da sua criatividade ok? Vamos ao HTML dos produtos veja:

<h3>Produtos</h3>
<a class="produtos" rel="1"><img src="001.jpg"><div class="data">iShape - R$ 230,00</div></a>
<a class="produtos" rel="2"><img src="002.jpg"><div class="data">Truck - R$ 80,00</div></a>
<a class="produtos" rel="3"><img src="003.jpg"><div class="data">Super Bool steal(4) - R$ 110 ,00</div></a>

Note que coloquei um atributo “rel” que pode ser o “Id” do produto para que você possa guardar isso no banco, sessão ou um cookie. E agora o HTML do carrinho

<div class="carrinho">
    Meu Carrinho
    <strong>Itens no carrinho:
    <span id="itensCarrinho">0</span></strong>
</div>

Nada de mais né? Veja que coloquei um “Span” com id “itensCarrinho” para que seja atualizado, agora veja o javascript que vai se conectar com outra página,não se esqueça de chamar o jQuery

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
	$(function(){
		$('.produtos').click(function(){
			//Pega o ID do produto
			var id = $(this).attr('rel');
			//Pega o valor atual de itens no carrinho
			var itens = $("#itensCarrinho").html();
			//Função ajax
			$.ajax({
				//Tipo de envio POST ou GET
				type: "POST",
				//Caminho do arquivo que processa o carrinho
				url: "guardaProduto.php",
				//Arquvios passados via POST neste caso, segue o mesmo modelo para GET
				data: "carrinho="+itens+"&id="+id,
				//Se der tudo ok no envio...
				success: function(resposta){
					//Colocar a resposta do aqruivo na div de intens do carrinho
					$("#itensCarrinho").html(resposta);
					alert('Item Adicionado');
				}
			});
		});
	});
</script>

Agora dando uma rápida passada temos o seguinte ao clicar em um dos seletores “produtos” grava-se a variável “id” que está no atributo “rel” e pega o valor atual do carrinho (atributo “itensCarrinho”), depois usamos a função ajax para passar via POST para o arquivo “guardaProduto.php” o “ID” e a variável “carrinho” que tem o valor dos itens atuais.

Agora veja o arquivo que recebe os dados da função click:

<?php
    $id = $_POST["id"];
    $carrinho = $_POST["carrinho"];
    /*
    * Se for necessário use a variável $_POST["id"]
    * para gravar no banco de dados,vou usar apenas a variável do carrinho
    */
    $atualiza = $carrinho+1;
    echo $atualiza;
?>

Veja que aqui é algo simples, você pode gravar no banco, em uma sessão,num cookie, etc.. use a criatividade de acordo com sua criatividade, veja abaixo o exemplo:

Bom é isso galera dúvidas postem ai, prometo nestas férias colocar muito mais coisas aqui, até mais!

Veja que aqui mostramos as 20 primeiras fotos, para isso vamos seguis os 3 passos a seguir:

1.Link do RSS

Precisamos do link de RSS () que pode ser localizado logo abaixo da página inicial de suas fotos como mostra a figura abaixo:

No nosso exemplo vou utilizar o meu RSS que no caso seria este link:

http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=rss_200

2. Modificando o Link

Para exibir as fotos vamos utilizar um método chamado Jason de leitura de dados, este método se parece com um XML, veja mais detalhes aqui,  com este método podemos listas as fotos e exibi-las com um loop simples.

Para isso altere o último parâmetro do link de RSS de rss_200 para json ficando assim o seu link:

http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=json

Pronto, se você colocar este link no seu navegador verá algo parecido com um XML isso é o Jason.

3.Fazendo o Loop

Este formato de RSS fornecido pelo Flickr exibe as últimas 2o fotos, agora ficou fácil basta fazer um loop onde vamos ler a quantidade de arquivos e vamos imprimir as fotos, veja o script abaixo:

<script>
    function jsonFlickrFeed(o){
        var i=0;
        while(o.items){
            document.write('<img src="' + o.items.media.m + '" alt="' + o.items.title +'">');
            i++;
        }
   }
</script>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=json"></script>

Veja que aqui usamos o tamanho médio da foto o Flickr separa as fotos em:

_b é o tamanho Grande
_t é a miniatura
_s é o tamanho de 75x75px
_m é o tamanho médio
Remover o _? significa que você escolheu o tamanho pequeno (_s)

Mas não se limitem apenas em exibir as fotos, você pode colocar os títulos, tags e até criar  uma aplicação com uso de jQuery, o “céu é o limite”!

É isso ai pessoal, dúvidas postem ai, até mais!

Seguinte, eu tinha a seguinte missão, criar um mega-menu, só que ele iria ter muita, muita informação mesmo, ia tipo ocupar a página inteira, o Adriano deu a ideia de colocar um campo para pesquisa de texto dentro desse mega-menu, o que eu achei fantástico porém sem saber a solução.

Depois de um bom tempo da proposta dessa ideia, peguei um livro de jQuery que eu já tinha a um bucado de tempo, por falar nisso podem comprar é muito bom mesmo, é da Novatec e chama-se jQuery, A Biblioteca do Programador JavaScript de Maurício Samy Silva (dono do site Maujor.com). Link para o livro: http://novatec.com.br/livros/jquery2/.

E este livro contém um capítulo apenas para seletores, dentre estes um mi chamou muito a atenção: o seletor seletorjQuery:contains(texto). Onde seletorjQuery seria o atributo dentro do qual você iria procurar, por exemplo $(‘#divExemplo’); :contains(texto) é uma função exclusiva da biblioteca jQuery e não é prevista na CSS3, que procura dentro do seletorjQuery qualquer ocorrência do texto digitado.

Bem vamos a um exemplo prático, que eu acho que será auto explicativo. Para que você possa executar esta pesquisa de conteúdo você só precisará da biblioteca jQuery, pura e simples.

Antes de qualquer execução de script jQuery, chame o jQuery…

<script type="text/javascript" src="jQuery.js"></script>

Agora que o seu jQuery está pronto para ser executado vamos criar uma table (Sou programador viu gente… me condena não… table salva minha vida até hoje) com um id tableFind que usaremos para pesquisar o texto, e um campo input text com id textFind onde digitaremos o texto a ser localizado.

<input type="text" id="textFind" />
<table id="tableFind">
  <tr>
    <td>faca</td>
    <td>bolo</td>
  </tr>
  <tr>
    <td>tempo</td>
    <td>dinheiro</td>
  </tr>
  <tr>
    <td>pão</td>
    <td>manteiga</td>
  </tr>
</table>

Depois desta bela table criada iremos gerar o código jQuery responsável pela busca. É importante ressaltar que assim como o JavaScript puro deve ser lido apenas depois do carregamento de toda a página com o metodo window.onload = function(){} o jQuery também deve seguir o mesmo raciocionio porém com duas formas básicas de se escrever a sintaxe:

A forma completa:

$(document).ready(function()
{
   ...faça isso...
});

e a forma reduzida:

$(function()
{
   ...faça isso...
});

Ambos os exemplos funcionam perfeitamente porém o primeiro possui um dom auto explicativo em sua página. Por este motivo usarei a forma completa de escrita.

Vou mostrar o código depois explico ele linha por linha:

<script>
  $(document).ready(function()
  {
    $("#textFind").keyup(function()
    {
      stringPesquisa = $("#textFind").val();
      $('table#tableFind tr td').css("background","");
      $('table#tableFind tr td:contains('+stringPesquisa+')').css("background","#FFFF00");
    });
  });
</script>

Acho que vocês já intenderam a essência do código, mas vamos lá. Estou usando o evento keyup do jQuery (em JavaScript puro é o evento onKeyUp, ele é acionado toda vez que eu seguro e solto uma tecla), que pega  o valor atual do meu input e o coloca dentro da variavel stringPesquisa.

Posteriormente eu localizo todos os td, dentro de tr, dentro de uma table com id tableFind e zero a sua propriedade background. Esta parte da função é extremamente importante para que eu possa realizar várias pesquisas a cada toque. Pois ela anulará a pesquisa do texto anterior e localizará o novo texto, dando dinamismo à pesquisa.

Agora começa o seletor :contains. Logo após localizo todos os td, dentro de tr, dentro de uma table com id tableFind que contém o texto digitado no input e adiciono a cor #FFFF00 (Amarelo/yellow) ao seu background, dando um efeito de marca texto.

Esse é o link para o exemplo funcionando:

Gente esse foi o meu primeiro post estou grato de mais pela oportunidade e espero que tenha sido util para vocês… Abraços…