Javascript & jQuery

Problema degli anchor-link in sito con home-page OnePage

Un problema che mi si è posto durante la realizzazione di un sito in WordPress è stato il seguente:

1) L’Home-Page era in stile sito One-Page, quindi ogni voce del menu principale era un anchor-link strutturato come nell’esempio qui di seguito

<a href="#nameSection"></a>

ognuno dei quali rimandava all’elemento html con

<div id="nameSection">

2) Nelle pagine interne del sito il menu con gli anchor-link naturalmente non funzionava, facendo essi riferimento alle sezioni della Home.

3) Utilizzare l’url completo del sito unito all’anchor link bypassava si il problema, ma così scritti i link del menu avevano come effetto collaterale di ricaricare la pagina senza più scrolling.

La soluzione trovata alla fine è stata la seguente


jQuery( document ).ready(function() {
	var url = window.location.href;
	var sensor = url.indexOf("#");
	if(!((url == "http://www.feedback.it/") || (sensor > 0))) {
		var links = jQuery("#menu-primary-1 a");
		jQuery.each(links, function( index, value ) {
			jQuery("#menu-primary-1 a:nth-child(" + index + ")").attr("href", function() {
				console.log("href: " + this.href);
				var link = this.href;
				return "http://www.feedback.it/" + link.substr(link.indexOf('#'));
			});;
		});			
	}
});

Spiegazione:

Alla fine del caricamento della pagina (riga 1) assegno alla variabile “url” l’url della pagina corrente (riga 2) e alla variabile “sensor” l’esito della funzione “indexOf” alla stringa ottenuta nella variabile “url” sul carattere “#” (riga 3). Così facendo posso eseguire un controllo accurato sulla pagina attualmente caricata verificando se si tratti della home page contenente gli anchor-link o di una pagina interna (riga 4). Nel caso la pagina attuale sia una pagina interna procedo a cambiare i link nell’attributo href dei tag anchor di ogni voce del menu principale (riga 5-13). Alla variabie “links” assegno il numero di link da modificare (riga 5), tramite ciclo “each” (riga 6) cambio in progressione l’href di ogni link del menu (riga 7) assegnandogliene uno riferito all’home page seguito dall’anchor-link della relativa sezione.

Comandi jQuery utili: Azione “data”

Se doveste ritrovarvi nella situazione di dover memorizzare in qualche modo, durante l’esecuzione di un vostro script jQuery, delle informazioni a breve termine, ovvero che abbiano come ciclo di vita unicamente la durata dell’esecuzione dello script, potete usare l’azione data. Tale comando vi permette di utilizzare qualsiasi elemento della pagina HTML che state manipolando come una sorta di contenitore per i vostri dati. Basterà quindi, una volta selezionato l’elemento dai voi scelto, chiamare l’azione data specificando due paramentri. Il primo utile per assegnare un identificativo (un nome) all’elemento scelto (niente che abbia a che fare con l’id css) e il secondo per passare il valore da archiviare. Per recuperare i dati quindi si passerà solo il primo parametro, ovvero il nome dell’elemento dati. A seguire un esempio.

 // scrittura
 $(div).data('mydata', 5);
 // lettura
 var value = $(div).data('mydata');