Category: javascript

Link Alert con MooTools

 
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

[jQuery] Usare l’opacitÓ per concentrarsi su un singolo elemento!

 
$(document).ready(function() {
	//area 1
	$('.fade-area-1').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
	//area 2
	$('.fade-area-2').children().hover(function() {
		$(this).siblings().stop().fadeTo(

Animazione opacitÓ con jQuery

CODICE HTML

 
<div id="forest-slot-1" class="opacity">
<h2>The Forest</h2>
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae. Sed eget nisl ipsum, quis eleifend lacus. Aenean at erat nulla, id semper velit.
</div>
<div id="forest-slot-2" class="opacity">
<h2>The Jungle</h2>
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae.
</div>
<div id="forest-slot-3" class="opacity">
<h2>The Wildlife</h2>
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin …

Lava Lamp menu in jQuery

CODICE HTML

 
<div id="lava">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">lava lamp menu</a></li>
<li><a href="#">queness.com</a></li>
<li class="selected"><a href="#">jQuery</a></li>
</ul>
 
	<!-- If you want to make it even simpler, you can append these html using jQuery -->
<div id="box">
<div class="head"></div>
</div>
</div>
 

CODICE CSS

 
	body {
		font-family:georgia;
		font-size:14px;
	}
	a {
		text-decoration:none;
		color:#333;
	}
 
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative;
		text-align:center;
		width:583px;
		height:40px;
	}
 
	#lava ul {
		/* remove the 

Troncare una stringa in jQuery

Creare un cartone animato con jQuery

image-architecture

Demo: http://robot.anthonycalzadilla.com/

Tutorial: http://css-tricks.com/jquery-robot/

Anteprima dei commenti con mootools

CODICE HTML

 
<div id="live-preview-form" class="lp-block">
 
 
		<strong>Your Name:</strong>
<input type="text" name="name" id="name" value="" class="input" />
 
		<strong>Your Email:</strong>
<input type="text" name="email" id="email" value="" class="input" />
 
		<strong>Your Website:</strong>
<input type="text" name="website" id="website" value="" class="input" />
 
		<strong>Your Comment:</strong>
		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
 
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-avatar"></div>
<div id="lp-name"></div>
<div id="lp-comment"></div>
</div>
 

CODICE CSS

 
.lp-block		{ width:400px; float:left; }
.lp-block input, .lp-block textarea { width:90%; }
#live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
 
#lp-name { font-weight:bold; }
#lp-avatar { float…

Convertire i secondi in formato time con PHP & JS

CODICE PHP

 
function formatTime($secs) {
   $times = array(3600, 60, 1);
   $time = '';
   $tmp = '';
   for($i = 0; $i < 3; $i++) {
	  $tmp = floor($secs / $times[$i]);
	  if($tmp < 1) {
		 $tmp = '00';
	  }
	  elseif($tmp < 10) {
		 $tmp = '0' . $tmp;
	  }
	  $time .= $tmp;
	  if($i < 2) {
		 $time .= ':';
	  }
	  $secs = $secs % $times[$i];
   }
   return $time;
}

Aggiungere record a una coda con jQuery

CODICE HTML

 
< !DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>jQuery Add to Queue</title>
</head>
<body>
<h1>jQuery Add to Queue</h1>
<form id="form" method="post" action="process.php">
  <label for="input">Add to queue:</label>
<input type="text" name="input" id="input"/>
<input type="submit" name="Submit" id="submit" value="Add!"/>
</form>
<h2>Queue: </h2>
<div id="queue"></div>
 
</body>
 

CODICE CSS

 
#queue {
	background-color: #CCCCCC;
	padding: 6px;
	border: 1px solid #000000;
}
#queue > div {
	background-color: #66CC66;
	border: 1px solid #FFFFFF;
	margin: 4px;
	padding: 4px;
	display: none;
}
 

CODICE JAVASCRIPT

 
$(document).ready(function

Cufon, qualsiasi font sulle vostre pagine web!

Simulare la gravitÓ con jQuery!

gravity_in_jquery

Demo: http://themeforest.s3.amazonaws.com/74_jquery/jquerygravitysource/index.html

Download: http://themeforest.s3.amazonaws.com/74_jquery/jquerygravitysource.zip

Condividi





Booking online




Categorie