Category Archives: script ajax

raccolta script ajax

Plugin jQuery effetto Pulse!

Questo plugin jQuery permette di aggiungere l'effetto pulse sui testi ma anche sulle immagini.

Per applicare l'effetto all'immagine basta inserire questo codice javascript all'interno della vostra pagina HTML:

$('#png-photo').pulse({
    backgroundColors: ['#eeae00','#ffdf5e'],
    speed: 500
});

Demo + Codice sorgente: http://enhance.qd-creative.co.uk/demos/pulse/

Checkbox stile iPhone in jQuery!

Se volete dare un tocco di stile alle vostre checkbox allora cliccate sui link qui sotto.

Demo: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

Codice sorgente: http://cloud.github.com/downloads/tdreyno/iphone-style-checkboxes/iphone-style-checkboxes.zip

Costruire un motore di ricerca di documenti con jQuery

In questo articolo, troverete una demo e il codice sorgente per creare un motore di ricerca di documenti con il framework jQuery.

Ecco la demo: http://nettuts.s3.amazonaws.com/352_documentSearch/demo/index.html

Il codice sorgente: http://nettuts.s3.amazonaws.com/352_documentSearch/demo.zip

E il tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/build-a-web-20-document-search-engine/

Controllare in javascript se un elemento esiste

Questa funzione permette in modo molto semplice di verificare se esiste o meno un elemento.

function elementExists(id) {
	var el = document.getElementById(id);

	if (el != null) {
		return true;
	}

	return false;
}

if (elementExists('column')) {
	// Column exists
}

Creare Carosello infinito in jQuery!

Nel link che trovate sotto troverete un "Carosello" che clicla all'infinito in stile Apple. Il trucco per farlo girare all'infinito Ŕ che bisogna clonare gli ultimi oggetti visibili, in questo modo si avrÓ l'effetto "infinito".

Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html

Evidenziare le righe o colonne di una tabella automaticamente

Questo semplicissimo script, facile da utilizzare, permette di dare uno stile alle tue tabelle evidenziandole automaticamente.

Demo + Codice Sorgente: http://cssglobe.com/lab/tablecloth/

Riconoscimento del testo in jQuery!

Questo script jQuery permette di riconoscere il testo che scrivete nella casella.

Qui di seguito la Demo: http://anantgarg.com/fancygestures/

Qui invece la documentazione: http://anantgarg.com/2009/05/21/jquery-fancy-gestures

jQuery Hotkeys, controlla i tasti con jQuery!

Questo plugin jQuery permette di creare funzioni che vengono attivate quando si individua la chiave o la combinazione di tasti definita.

Demo: http://jshotkeys.googlepages.com/test-static-01.html

Documentazione + Codice sorgente: http://code.google.com/p/js-hotkeys/

Tabs jQuery

In questo tutorial vedremo come creare dei tabs con l'utilizzo del framework jQuery:

  • Per prima cosa copiate e incollate dentro il tag "body" questo codice

<div class="tabs">
<!-- tabs -->
<ul class="tabNavigation">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>

<!-- tab containers -->
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>

  • All'interno del tag "head" incollate questo:

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>

Demo dello script: http://jqueryfordesigners.com/demo/tabs.html