Il Blog di Stefano

mercoledì 27 luglio 2011

jQuery: semplice e veloce slideshow (base)

Girovagando per la rete, mi sono imbattuto in questo codice per creare una veloce slideshow con il framework jQuery.

Ovviamente fare il copia e incolla non è nel mio stile quindi ho apportato qualche piccola modifica nel codice (niente di speciale, tempistiche e stile degli elementi).

Questo perché, se utilizzate direttamente il codice originale, verrà mostrato un effetto non voluto: durante la transizione delle immagini, se ne vedono due in una volta che sembra che facciano a botte tra di loro per mostrarsi (ok, fate prima a provare di persona per capire cosa intendo).

Per la cronaca, l'autore del codice originale lascia all'utilizzatore finale il compito di aggiungere tutto lo stile CSS. E così ho fatto :-)

Qui di seguito il listato della slideshow personalizzata. Iniziamo con la testata del file html (standard), dove andremo ad inglobare jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova Slideshow</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Proseguiamo con il cuore del codice:

<script>
$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow :first-child').fadeOut(1500).next('img').fadeIn(1500).end().appendTo('.slideshow');}, 2400);
});
</script>

Io ho aggiunto la tempistica del fadeOut e del fadeIn (1 secondo e mezzo).
Applichiamo uno stile css adeguato ai nostri scopi: slideshow centrato, sovrapposizione delle immagini per evitare effetto "litigio", eccetera:

<style type="text/css">
body {
 margin:0;
 padding:0;
 text-align:center;
}
.slideshow {
 margin:0 auto;
 padding:0;
 width:618px;
 height:246px;
 border:1px solid #eeeeee;
}
.slideshow img { 
 display:block;
 position:absolute;
}
</style>

E finiamo in bellezza con il codice html dello slideshow (e del resto della pagina)

</head>
<body>
 <div class="slideshow">
  <img src="1.jpg"/>
  <img src="2.jpg"/>
  <img src="3.jpg"/>
 </div>
</body>
</html>

martedì 26 luglio 2011

jQuery: eliminare una riga di una tabella (con richiesta ajax)

Poco tempo fa ho avuto la necessità di sviluppare un piccolo programma di protocollo. Caratteristica base era che ogni documento protocollato poteva avere più mittenti e più destinatari: la cancellazione degli stessi, così come la modifica, doveva avvenire in modo trasparente e veloce, ossia... tramite ajax :-)
Ricercando nel web, mi sono imbattuto in questa soluzione, facilmente adattata alle mie esigenze:

function cancellaMittente(id,num_progressivo,anno_progressivo){
 if (confirm('Sicuro di voler eliminare questo mittente?')) {
  jQuery.post('cancella_mittente.php', {id: +id, num_progressivo: + num_progressivo, anno_progressivo: +anno_progressivo },
  function(){
   jQuery("#mittente_"+id).fadeOut("slow");
  });
 }
}

Questa funzione verrà richiamata ogni volta che si vorrà eliminare un determinato mittente ed eseguirà le operazioni:

esecuzione di una richiesta ajax di tipo post al file cancella_mittente.php con parametro id (dell'anagrafica), num_progressivo e anno_progressivo (questi ultimi identificano il documento protocollato);
fadeOut, e quindi dissolvenza e cancellazione, della riga selezionata (la discriminazione è per id del tag, ad esempio mittente_1

Lato html invece la questione è semplice:

<tr id="destinatario_1">
   <td width="50">
      <a href="#" onclick="cancellaDestinatario(1,12,2011)">
      <img src="img/remove.png" /></a>
   </td>
   <td align="center">Pinco Pallino</td>
</tr>

Il file richiamato via post ajax avrà il compito di eliminare dal database la entry relativa all'id passato per parametro. Di seguito l'implementazione vera, con due parametri (num_progressivo e anno_progressivo) che per semplicità sono stati omessi nei listati precedenti:

<?php

require('engine/config.php');

if(is_numeric($_REQUEST['num_progressivo']) && is_numeric($_REQUEST['anno_progressivo']) && is_numeric($_REQUEST['id'])) {

$ris=$db->query("DELETE FROM ". $__TABLE_PREFIX."protocollo_mittente WHERE mittente_documento_num_progressivo='".$_REQUEST['num_progressivo']."' AND mittente_documento_anno_progressivo='".$_REQUEST['anno_progressivo']."' AND mittente_id_anagrafica='".$_REQUEST['id']."'");

}

?>

mercoledì 13 luglio 2011

C# - intercettare la pressione dei tasti funzione in un form

Brevissimo tips su come intercettare la pressione di un tasto "speciale" (ad esempio, tasti funzione, oppure Alt, Canc eccetera) in un form C#.
Per prima cosa, dobbiamo impostare a true l'attributo KeyPreview del form stesso, come si nota da figura:

A questo punto dobbiamo associare all'evento KeyDown del form una determinata funzione:

private void FormCassa_KeyDown(object sender, KeyEventArgs e)
{
   //Intercetto il tasto F2
   if (e.KeyCode == Keys.F2) MessageBox.Show("F2 Premuto");
}

Chiaramente se voglio intercettare F5, basta confrontare il tasto premuto con Keys.F5 . Tutto qua :-)

mercoledì 13 ottobre 2010

C# - Dimensionare una finestra figlia adattandola al contenitore padre MDI

Inizio con questo post una serie di interventi relativi al liguaggio C#. Sono semplicemente dei "tips" e non degli articoli riguardanti le basi del C# :-)

Poco tempo fa, mi sono chiesto: data una finestra che contiene altre finestre (MDI, ossia una finestra utilizzata come sfondo di un'applicazione con interfaccia a documenti multipli, multiple document interface), come posso fare aprire una finestra figlio che automaticamente si adatta alla grandezza del padre?

Semplice come bere un bicchier d'acqua: basta posizionarsi nel codice relativo all'evento "Load" della finestra figlio e scrivere:

this.Dock = DockStyle.Fill;

Facile e veloce :-)

mercoledì 8 settembre 2010

Una comoda classe php captcha

Oggi presento una comoda classe php captcha, proveniente da OpenCart . Essendo il progetto open source, possiamo analizzare come funziona ma soprattutto come usarla con tre righe di codice.
Prima di tutto vediamo il contenuto della classe:

<?php

class Captcha {



/**
* Classe captcha.php - da www.opencart.com
*/

protected $code;
protected $width = 35;
protected $height = 150;

function __construct() {
$this->code = substr(sha1(mt_rand()), 17, 6);
}
function getCode(){
return $this->code;
}
function showImage() {
$image = imagecreatetruecolor($this->height, $this->width);
$width = imagesx($image);
$height = imagesy($image);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$red = imagecolorallocatealpha($image, 255, 0, 0, 75);
$green = imagecolorallocatealpha($image, 0, 255, 0, 75);
$blue = imagecolorallocatealpha($image, 0, 0, 255, 75);
imagefilledrectangle($image, 0, 0, $width, $height, $white);
imagefilledellipse($image, ceil(rand(5, 145)), ceil(rand(0, 35)), 30, 30, $red);
imagefilledellipse($image, ceil(rand(5, 145)), ceil(rand(0, 35)), 30, 30, $green);
imagefilledellipse($image, ceil(rand(5, 145)), ceil(rand(0, 35)), 30, 30, $blue);
imagefilledrectangle($image, 0, 0, $width, 0, $black);
imagefilledrectangle($image, $width - 1, 0, $width - 1, $height - 1, $black);
imagefilledrectangle($image, 0, 0, 0, $height - 1, $black);
imagefilledrectangle($image, 0, $height - 1, $width, $height - 1, $black);
imagestring($image, 10, intval(($width - (strlen($this->code) * 9)) / 2), intval(($height - 15) / 2), $this->code, $black);

header('Content-type: image/jpeg');
imagejpeg($image);
imagedestroy($image);

}

}

?>

Utilizzare questa classe è alquanto semplice: poniamo infatti di dover usare una pagina php per la registrazione dell'utente chiamata register.php. Questa pagina avrà un form che invierà i dati alla pagina stessa, dopo il submit dell'utente.

Abbiamo bisogno di una ulteriore pagina, chiamata immagineCaptcha.php.
Tra i campi che andremo a controllare, ci sarà anche il codice captcha, salvato in una variabile di sessione. Per spiegarmi meglio, immagineCaptcha.php sarà così composto:

<?php

session_start();
include("captcha.php");
$c = new Captcha();

// Si salva il getCode in sessione
$_SESSION['code'] = $c->getCode();

$c->showImage();
?>

Nella pagina register.php, ci sarà sia il form che il controllo del form stesso:

<?php

session_start();

if(isset($_POST['email'])) {
//Form inviato
if($_SESSION['code']==$_POST['code']) {
//controllo captcha andato a buon fine
//qui funzione di registrazione
}
}
else {
//Mostro il form
?>

<form method="post" action="register.php">
<input type="text" name="email"/>
<input type="text" name="code"/>
<img src="immagineCaptcha.php"/>
<input type="submit"/>
</form>

<?php }

?>

giovedì 26 novembre 2009

Image Zoom con MooTools

Ho trovato un interessante articolo per creare un effetto "zoom": per intenderci, quello con una miniatura da cui si sceglie, con il mouse, l'area da ingrandire e l'immagine zoomata che riflette la scelta precedente.
Nella figura sottostante è possibile vedere l'esempio concreto: