Category: script ajax

Applicare il riflesso a un’immagine con MooTools e jQuery!

On 12.05.09, In ajax, immagini, javascript, jquery, links, by daniele

…

Un contact form con stile!

On 09.26.09, In ajax, jquery, links, script ajax, by daniele

…

Live search con ajax e PHP!

On 09.24.09, In ajax, guide per il web, mysql, php, php, script ajax, script php, tutorials, by daniele

…

Imparare ad utilizzare i cookie con javascript

On 09.15.09, In guide per il web, javascript, script ajax, by daniele

 
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<link type="text/css" rel="stylesheet" href=""/>
	<script>
 
	$(document).ready(function () {
 
		//for debugging purpose, so that you can see what is in the menu cookie
		$('#debug').html('Cookie Content : ' + readCookie('menu'));
 
		//if cookie menu exists
		if (readCookie('menu')) {
 
			//loop through the menu item
			$('#menu a').each(function () {
				//match the correct link and add selected class to it
				if ($(this).html() == readCookie('menu')) $(this).addClass('selected');
			});
		}
 
		$('#menu a').click(function () {
 
			//Set the cookie according to the text in the link
			createCookie('menu', $(this).html(),1);
		});
 
	});
 
	/* Cookie Function …

Incrementare e decrementare i valori di un input con MooTools!

On 09.15.09, In guide per il web, javascript, script ajax, by daniele

CODICE CSS

 
label                               { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
input[type=text]                    { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
form div                            { overflow: hidden; margin: 0 0 5px 0; }
.button                             { margin: 0 0 0 5px; text-indent: -9999px; cursor: pointer; width: 29px; height: 29px; …

Effetto Page Peel con MooTools!

On 09.09.09, In guide per il web, immagini, javascript, script ajax, by daniele

CODICE XHTML

 
<div id="page-flip">
	<a href="http://www.sastgroup.com/feed"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a>
<div id="page-flip-message"></div>
</div>

CODICE CSS

 
#page-flip { position:relative; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }

CODICE MOOTOOLS

 
(function($,$$) { window.…

[jQuery] Creare uno slide dei prodotti in stile Apple

On 09.06.09, In guide per il web, javascript, script ajax, slider, by daniele

 
<script src="jquery.js" type="text/javascript"></script>
 
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>

CODICE HTML

 
<div class="sliderGallery">
<ul class="items">
<li>Item one</li>
<li>Item two</li>
<li>Item three, etc...</li>
</ul>
<div class="slider">
    <!-- the handler to action the slide -->
<div class="handle"></div>
 
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>

CODICE CSS

 
.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    width: 960px;
}
.sliderGallery UL …

Link Alert con MooTools

On 09.04.09, In editor, guide per il web, javascript, script ajax, by daniele

 
var LinkAlert = new Class({
 
	//implements
	Implements: [Options,Events],
 
	//options
	options: {
		container: document.body,
		extensions: {},
		offsets: { x:6, y:-15 },
		preloadImages: true,
		protocols: {},
		sticky: false,
		onShow: function(el,image) {
			this.image.setStyle('display','');
		},
		onHide: function(el,image) {
			this.image.setStyle('display','none');
		}
	},
 
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.extensions = new Hash(this…