Ano novo, vida nova e nova versão do jQuery também. Hoje foi o dia do lançamento da nova versão do jQuery. Estamos na versão 1.4 agora.
Para seu lançamento a equipe do jQuery preparou um site 14 Days of jQuery que consiste em falar sobre a nova versão do jQuery em 14 dias. O lançamento foi feito ao vivo (pela internet) da AOL em Dulles, com direito a perguntas e respostas.
O jQuery já está no seu 4º aniversário e esta versão conta com bastante código, testes e documentação. É só ver como ficou o novo site da documentação do jQuery 1.4

Como sempre, existem duas versões:

• jQuery Minified (23kb Gzipped)
• jQuery Regular (154kb)

Mas você também pode usar o Google, caso não queira incluir a jQuery no seu site (servidor).

• http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

Vou fazer um apanhado das novas características.

Desempenho de métodos populares

Alguns dos métodos populares do jQuery foram reescritos, com isso teve um ganho de performance significante em comparação com a versão anterior.

No jQuery 1.4 foi reduzida a complexidade dos métodos mais populares.

Funções fáceis de setar

Agora algumas funções aceitam outras funções como parâmetro:

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), e .toggleClass().

Algumas apenas como segundo parametro:

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), e .toggleClass().

Ex:

// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
  return html.replace(/&amp;/gi,'<span class="amp">&amp;</span>');
});

// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

AJAX

Parametros aninhados (array)

Agora é permitido passar arrays por parâmetro via Ajax (para os programadores PHP e Ruby on Rails. Agora {foo: ["bar", "baz"]} é serelializado assim: “foo[]=bar&foo[]=baz”. No jQuery 1.3 era serelializado assim: “foo=bar&foo=baz”.

Contexto para uma requisição Ajax

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        jQuery(this).addClass("done");
    }
});

Atributos

Performance do .css() e do .attr()

CORE

Rápida construção de elementos

Quando se cria um elemento com a função jQuery() agora você pode adicionar atributos e eventos algumas vezes.

jQuery("<div/>", {
    id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

Novos métodos

.first() e .last(), que por conveniência são aliases ao .eq(1) e .eq(-1)
.toArray(), antigamente usava-se .get(), agora se pode usar o .toArray() – o .get() não entrou em desuso, aliás ele continua vivinho da Silva.

Bom este foi apenas um pequeno resumo das novas coisas que vem por ai, vá lá no site do lançamento do jQuery 1.4 e veja o que há de novo.

OBS: Em breve estaremos com o nosso portal de jQuery Brasil.
Faça uma visita em nossa lista. jQuery BR.

A um tempo atrás eu fiz um post sobre como limitar o tamanho de inputs com jquery. Hoje eu irei mostrar como limitar o tamanho de textareas com um simples código jquery.

Sabemos que inputs do tipo text tem a propriedade maxlength e também sabemos que textareas não tem, mas com um código jquery podemos trabalhar como se existisse maxlength em textareas.

Para fazermos isso é simples.

Precisamos de um textarea com maxlength.

<textarea maxlength="15" rows="5" cols="30" name="texto"></textarea>

Após devemos adicionar no seu javascript o seguinte código:

$("textarea[maxlength]").keypress(function(event){
	var key = event.which;

	//todas as teclas incluindo enter
	if(key >= 33 || key == 13) {
		var maxLength = $(this).attr("maxlength");
		var length = this.value.length;
		if(length >= maxLength) {
			event.preventDefault();
		}
	}
});

Exemplo:

Por hoje é só rsr. Feliz Natal a todos.

O limitInput é um plugin jquery desenvolvido pelo meu amigão Djalma Araujo. O cara além de ter uma das melhores hospedagens (pra mim é a melhor) ainda é desenvolvedor.

Mas o que faz isso?

Sabe o maxlength dos inputs (ou do textarea que não existe)? Então, este plugin trata esta “propriedade” com elegância.

Como faz?

Ex 1:

$("#limitInput-eg1").limitInput({
	//tamanho limite
	limit: 10,
	//permite ou nao escrever mais
	blockTyping: true,

	//traducao do texto que aparece quando ainda pode digitar
	charName: 'caracters',
	leftString: 'left',
	//texto que aparece quando passou o limite
	excededString: 'exceded'
});

Este exemplo limita a 10 caracteres digitados e bloqueia para que não seja mais digitado.
Digite:

Ex 2:

$("#limitInput-eg2").limitInput({
	//tamanho limite
	limit: 42,
	//permite ou nao escrever mais
	blockTyping: true,

	//traducao do texto que aparece quando ainda pode digitar
	charName: 'letras',
	leftString: 'restantes',
	//texto que aparece quando passou o limite
	excededString: 'excedidas'
});

Digite:
em pt

Visite o site do Djalma ou do plugin limitInput.

Um resumos segundo o próprio Jaydson:
“…Javascript é a linguagem de script mais popular da internet.
Porém, mesmo com toda essa fama, o Javascript ainda é incompreendido.
Segundo Douglas Crockford, um dos mestres da linguagem, essa incompreensão tem varias origens …”.

“…A palestra conta um pouco da história do Javascript, explicando o porque do prefixo JAVA no nome da linguagem entre outros detalhes. A palestra foca muito no desenvolvimento de Javascript profissional, como sugere o nome…”.

Agora veja os slides.

Javascript levado a sério.

Podemos fazer isso com array:

$(document).ready(function() {
	var arr = [ "a", "b", "c", "d", "e" ];
    $.each(arr,function(index, item) {
        $('#list').append($( "<li> O item: " + item + " está na posição: " + index +"</li>" ));
    });
});

Importante: isso não é o mesmo que $(‘DOMElement’).each().

Quer saber como faz?

Ahh, eu sabia que você quer saber como faz, pois é, eu não vou falar como faz aqui não, mais pode deixar eu te dou o caminho das pedras.

Dica: Você vai usar:

• Uma imagem
• Criatividade
• jQuery (nem precisava falar né)
• CSS
• addClass do (jQuery)

Mesmo assim ainda não sabe como fazer?

Então tá. Entra no site do meu colega Alexandre Lambertini da lista de jQuery Brasil e veja o post jQuery Effecs Focus Input in 3 Steps.

Se você não conseguir fazer me da um alô que eu te dou um toque (hauhaua).

Como?

$(document).ready(function() {
     $('#timepicker').jtimepicker();
});

<div id="timepicker"></div>

Site

Como?

<div id="rangeselection">
  <div class="highlight">
    <span class="rangestart"><span class="value"></span><span class="extra"> ...</span></span>
    <span class="rangestop"><span class="extra">... </span><span class="value"></span></span>
  </div>
</div>

<p>range: <span id="range"></span></p>

Código javascript.

function on_selection(range) {
    $('#range').html(range.toString());
};

$(document).ready(function() {
	$('#rangeselection').rangeselection({
		width: 400,
		height: 100,
		selectionrange: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
		callback: on_selection,
		num_labels: 10
    });
	/*width: tamanho
	height: altura
	selectionrange:  o que vai estar na range
	callback: chamada de resposta
	num_labels: quantidade de labels que vai ser mostrado*/

});

Agora vem o código CSS:

#rangeselection {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

.rangelabel {
    float: left;
    z-index: 100;
}

.rangelabelend {
    z-index: 100;
}

.rangestop {
    position: relative;
    float: right;
}

.rangestart {
    position: relative;
}

.legend_box {
    position: absolute;
    height: 10px;
    width: 10px;
    background: #ddd;
    z-index: -50;
}

.highlight {
    background: yellow;
    opacity: 0.5;
    position: absolute;
    width: 50px;
    height: 20px;
    z-index: -100;
}

Veja o DEMO.

Site

Mais vamos ao que interessa.

jqUploader é um plugin do jquery que te ajuda a fazer upload de arquivos mais elegantemente.

Como?

Como todos nós já sabemos, para fazer um formulário com um campo do tipo file, para uploads. Necessítamos que tenha um campo do tipo hidden com o tamanho máximo do arquivo.

<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />

Após você fazer o download do jqUploader e jogar ele no seu servidor de hospedagem, você terá as seguintes possibilidades:

OBS: Veja a documentação do jqUploader para saber todas as possibilidades.

Com um código como o debaixo você consegue fazer um formulário legal pra isso:

<form id="myUploadForm" enctype="multipart/form-data" action="upload.php" method="POST">
	<fieldset>
	<legend>Meu upload</legend>
		<label for="example1">Escolha um arquivo para: </label>
		<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
		<input name="example1"  id="example1"  type="file" />
	</fieldset>
	<input type="submit" name="submit" value="Enviar" />
</form>

Site

Isto é simplesmente para provar para vocês que o que eu digo aqui funciona e que isso é chato. Não sei até quando, mais um dia funcionou rsrs.

Site do plugin.

Galera, desculpem o atraso nos posts, mais é que eu tinha programado um ai e deu tudo errado rsrs, sem contar com outros problemas.

Mais estou de volta, aqui, neste exato momento, no presente do pretérito mais do que perfeito (fui saber que isso existia no curso de inglês oO) .

Vamos ao que vos interessa.

Scrol Follow é um plugin do jquery que faz com que um objeto (pode ser uma < div > – demorei mais ainda pq estava dando problema no meu layout nesta div que eu escrevi ai =/ que raiva) siga o scroll da página.
Como assim Ruan? Explico: Sabe aquelas propagandas chatas que ficam geralmente do lado direito da tela, ai quando tem um texto grande e você desce o scroll a maldita vai junto? Então, este plugin do jquery serve para isso.

Como?

1. Vai na página do plugin e baixa ele.
2. Vai no site do jquery UI e baixa apenas o core.
3. Deposita 10 pila na minha conta.

Após ter feito os 3 passo de cima (principalmente o 3º) você terá que seguir os passo aqui debaixo.

1º. Incluir os arquivos na página:

//pelo menos isso você já deveria saber
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

2º. Criar o HTML do elemento que irá seguir o scroll:

<div id="exemplo" style="border: 1px solid #000; position: relative; width: 300px;">
	<img src="/images/ducks.png" alt="Ducks" />
	<p>Isto é simplesmente para provar para vocês que o que eu digo aqui funciona, não sei até quando, mais um dia funcionou rsrs.</p>
	<p><a href="http://kitchen.net-perspective.com/open-source/scroll-follow/">Site do plugin.</a></p>
</div>

3º. Colocar no onload da página a chamada do plugin:

$( document ).ready(function (){
	$("#exemplo").scrollFollow();
});

Site