Some jQuery Snippets

Non ci sono assolutamente dubbi che negli ultimi tempi ci sia stato un grande rilancio del linguaggio Javascript . Devo dire che è anche abbastanza divertente programmare Javascript, perchè con poche istruzioni di codice è possibile già da subito vedere i primi risultati e la curva di apprendimento è abbastanza morbida. Unico problema restano al momento le incompatibilità dei browser che rendono il lavoro di testing assai noioso. Ecco qui alcuni semplici snippet di codice che ho appreso durante lo sviluppo degli ultimi due progetti realizzati con jQuery, sperando che possano di essere di aiuto.

Assign a function to a variable

In alcuni casi puoi avere la necessità di applicare e rimuovere un’azione. La scelta migliore è quella di assegnare la funzione ad una variabile per avere il massimo delle possibilità di gestione.

var itemBtn = function() {
// some action
}; 

$("#item").click(itemBtn);

Remove or replace a piece of string with Javascript

In alcuni casi, sopratutto se stai lavorajdo con Ajax o come nel mio caso con la libreria jQuery.address potresti avere bisogno di modificare la url di destinazione. Grazie al metodo replace puoi modificare o rimuovere parte di una stringa per modificarla a tuyo piacimento.

var str = "/option=id=2&Itemid=2";
str.replace(/\//, "");
alert(str) // str = option=id=2&Itemid=2;

Find target of a multiple selection

Mi sono trovato nel caso di dover lanciare 2 funzioni simili, ma uguali in molte variabili, da una selezione multipla. Grazie a questo snippet puoi ricavare il target esatto della tua selezione.

$('#header a, #nav a').click(function (event) {
var $this = $(this);
if ($this.parents("#header").length > 0) {
alert("action inside #header");
}
if ($this.parents("#nav").length > 0) {
alert("action inside #nav");
}
return false;
});

Add # to all internal link

Hai bisongo di aggiungere uno slash o modificare tutti i link interni della pagina.
$("a").attr("href", function(i, href) {
if( window.location.hostname === this.hostname ) {
return href + "#";
}
});

Back button action

Grazie all’evento unload puoi definire un’azione specifica al click del back button.

$(window).unload( function () {
// code here
);
});

Find all elements after a selection

Devi selezionare tutti gli elementi div presenti nella pagina, dopo la selezione #wrapper.

var divs = $('#wrapper').nextAll().find('div');
divs = divs.add('#wrapper ~ div');

Get and set scrollTop position

Grazie alla funzione scrollTop puoi ricavare l’attuale posizione di scroll della pagina o se desideri definirne anche il valore.

$(window).scrollTop()
$(window).scrollTop(value)

Immediatly call a function

Hai crato il tuo evento e vuoi subito lanciare la funione.

$("#itemBind").click(function(){
$(window).scroll(400); }).click();
// .click() will execute this handler immediately

Hover and Out with easing

Semplice hover e out con easing per i tuoi pulsanti. In questo caso viene usato il plugin jQuery.color per animare il colore in uso.

$("a").stop().hover(function () {
$(this).stop().animate({
color: "#262626"
}, {
queue: true,
duration: 500,
easing: "quartEaseOut"
})
}, function () {
$(this).animate({
color: "#FFFFFF"
}, {
queue: true,
duration: 500,
easing: "quartEaseOut"
})
});

Hide and show items sequentially

Creata una selezione vado a nascondere gli elementi della mia selezione e successivamente li rendo visibili in modalità sequenziale.

$mySelection.each(function (i) {
$(this).css("opacity", "0");
$(this).delay(i * 100).css({
opacity: "0",
visibility: "visible"
}).animate({
opacity: "1"
}, {
queue: true,
duration: 100,
easing: "quartEaseIn"
})
});

If user agent is not Mobile

Istruzione utile per applicare delle azioni a tutti i dispositivi diversi da quelli elencati.

if(
(!navigator.userAgent.match(/iPhone/i)) &&
(!navigator.userAgent.match(/iPod/i)) {
// code here
}

Check if an element esist

Semplice istruzione che verifica se un elemento esiste o no nella pagina, grazie al parametro lenght.

if ($('#item').length != 0) {
// code here
}

Center an element

Funzione per posizionare un elelemento al centro della nostra pagina.

jQuery.fn.centerMe = function () {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this;
}
$('#item').centerMe();

Simple Ajax

Caricamento di un elemento di una determinata pagina tramite Ajax

jQuery.ajax({
type: "GET",
url: link,
data: link + "&tmpl=barebones",
success: function(html){
jQuery("#fullcontent").html(html);
console.log("success")
}
});