10 Utilissimi Frammenti di Codice jQuery per Il Vostro Sito Web

JQuery è sicuramente uno dei migliori strumenti che possono aiutarvi nello sviluppo del vostro sito web.

In questo articolo vi mostrerò alcuni frammenti di codice che potete inserire all’interno del vostro sito durante lo sviluppo, vi faciliterà sicuramente alcuni compiti.

1. Scorrimento verso un punto della pagina

Avrete notato che molti siti usano spesso inserire pulsanti nel footer per ri-portare l’utente a inizio pagina. Per fare questo vengono usate delle “#ancore”. Con questo frammento di codice renderete la salita più piacevole a vedersi, con un effetto di scorrimento verso l’alto.

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor">Back to Top</a></p>

$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});

Risorsa: http://snipplr.com/view/26739/jquery–smooth-scroll-to-anchor/

2. Ridimensionamento delle immagini

Anche se sarebbe più giusto ridimensionare le immagini lato server (usando PHP e GD per esempio), ogni tanto può essere utile farlo con jQuery.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();

		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Risorsa: http://snipplr.com/view/62552/mage-resize/

3. Caricare i contenuti dinamicamente

Avrete notato che su Twitter i contenuti che vengono creati sono caricati tramite un effetto di scorrimento verso il basso (come se fosse un’unica pagina, infinita). Per creare lo stesso effetto vi serve questo frammento di codice jQuery:

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Risorsa: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

Esempio: http://fatfolderdesign.com/ex/scroll_load/

4. Test per verificare la potenza di una Password

Quando si crea un form di registrazione dove l’utente deve inserire la password, è buona norma incoraggiare l’utente a scrivere una password più resistente e meno incline agli attacchi. Questo frammento di codice utilizza espressioni regolari per verificare se una password è abbastanza forte:

// HTML:
// <input type="password" name="pass" id="pass" />
// <span id="passstrength"></span>

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Risorsa: http://css-tricks.com/snippets/jquery/password-strength/

5. Pareggiare altezze dei DIV

Vi avevo già parlato di come fare per dare ai DIV la stessa altezza, soprattutto quando si vuole affiancare una sidebar di diverso colore al contenuto: Colonne con la stessa altezza tramite i CSS. Purtroppo il metodo con il solo utilizzo dei CSS è valido per le versione di IE superiori alla 7 (a meno che non si utilizzasse la ‘falsa colonna’). Grazie a questo frammento di codice jQuery potrete far funzionare il trucchetto anche su versioni di IE inferiori.

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Risorsa: http://css-tricks.com/snippets/jquery/equalize-heights-of-divs/

6. Rendere i file png trasparenti anche su IE6

Per quanto ormai IE6 non venga più utilizzato se non da una ristrettissima parte di persone, può ancora servire modificare la pagina per renderla compatibile anche con questa versione di IE. Questo frammento consentirà di rendere trasparente le immagini con estensione PNG, basta aggiungere una classe .pngfix a quelle immagini che volete mostrare con la trasparenza.

$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

7. Parsing con JSON tramite jQuery

Analizzare i dati JSON con jQuery non è affatto complesso. Eccovi un esempio:

function parseJson(){
	//Start by calling the json object, I will be using a 
        //file from my own site for the tutorial 
	//Then we declare a callback function to process the data
	$.getJSON('hcj.json',getPosts);

	//The process function, I am going to get the title, 
        //url and excerpt for 5 latest posts
	function getPosts(data){

		//Start a for loop with a limit of 5 
		for(var i = 0; i < 5; i++){
			//Build a template string of 
                        //the post title, url and excerpt
			var strPost = '<h2>' 
				      + data.posts[i].title
				      + '</h2>'
				      + '<p>'
				      + data.posts[i].excerpt
				      + '</p>'
				      + '<a href="'
				      + data.posts[i].url
				      + '" title="Read '
				      + data.posts[i].title
				      + '">Read ></a>';

			//Append the body with the string
			$('body').append(strPost);

		}
	}

}

//Fire off the function in your document ready
$(document).ready(function(){
	parseJson();				   
});

Cos’è JSON? Iniziare ad utilizzare JSON.

8. Come alternare i colori delle righe

A volte può tornare utile, ad esempio nelle tabelle, alternare i colori tra le righe. Ecco come fare utilizzando jQuery:

//jquery
  $('div:odd').css("background-color", "#F4F4F8");
  $('div:even').css("background-color", "#EFF1F1");

//html 
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>

9. Caricare le immagini più velocemente come su Facebook

Vi sarete accorti che su Facebook il caricamento delle immagini avviene molto più velocemente. Questo è dovuto al fatto che Facebook carica precedentemente le immagini nella cache del browser, velocizzandone così il caricamento alla chiamata. Ecco com’è possibile ottenere un comportamento simile:

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

Risorsa: http://www.nealgrosskopf.com/tech/thread.php?pid=77

10. Rendere l’intero DIV cliccabile

Capita molte volte di voler rendere l’intero DIV cliccabile insieme al link che avete inserito. Ecco un semplicissimo frammento jQuery da aggiungere al vostro codice:

// HTML:
// <div class="myBox">
//     blah blah blah.
//    <a href="http://google.com">link</a>
// </div>

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Risorsa: http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Tratto da: CatsWhoCode.com