Oggi vi mostrerò un’altra funzione in javascript molto utile.

Questa funzione vi restituisce un array con le coordinate x ed y delle barre di scorrimento.

Leggete l’intero articolo per vedere la funzione.

// questa funzione restituisce un array con la posizione x,y dello scroll

function getPageScroll() {

var xScroll, yScroll;

// ---> RICAVO LE COORDINATE x ED y DEGLI SCROLL <--- //

// self.pageYOffset : indica la coordinata y di dove si trova la barra dello scroll verticale
// self.pageXOffset : indica la coordinata x di dove si trova la barra dello scroll orizzontale
// (non valido per explorer 6)

// document.documentElement.scrollTop  : indica la coordinata y di dove si trova la barra dello scroll verticale
// document.documentElement.scrollLeft : indica la coordinata x di dove si trova la barra dello scroll orizzontale
// (valido per explorer 6)

if (self.pageYOffset) {
    yScroll = self.pageYOffset;
    xScroll = self.pageXOffset;
}else if (document.documentElement && document.documentElement.scrollTop) {
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
    }else if (document.body) {
                yScroll = document.body.scrollTop;
                xScroll = document.body.scrollLeft;
    }

arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}

Salve cari lettori di good2know.it, oggi vorrei fornirvi un’utile funzione javascript che vi restituisce le dimensioni reali della pagina e della finestra visualizzata.

Leggete l’intero articolo per vedere la funzione.

// la funzione restituisce in un array
// la larghezza e l'altezza della pagina reale(scroll compreso) e la larghezza e l'altezza della finestra visibile

function getPageSize() {

 var xScroll, yScroll;

 // ---> RICAVO LE DIMENSIONI DELLA PAGINA <--- //

 // window.innerHeight : altezza della finestra visibile
 // window.innerWidth  : larghezza della finestra visibile

 // window.scrollMaxY  : dimensioni massime dello scroll verticale
 // window.scrollMaxX  : dimensioni massime dello scroll orizzontale

 // document.body.offsetHeight : altezza di default del browser
 // document.body.offsetWidth  : larghezza di default del browser

 // se esiste l'altezza della finestra e lo scroll verticale(quindi esiste anche la barra x lo scorrimento)
 // xScroll è la somma dello scroll orizzontale e della larghezza della finestra
 // yScroll è la somma dello scroll verticale e dell'altezza della finestra

if (window.innerHeight && window.scrollMaxY) {
    xScroll = window.innerWidth + window.scrollMaxX;
    yScroll = window.innerHeight + window.scrollMaxY;
}else if (document.body.scrollHeight > document.body.offsetHeight){
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
}else{
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
}

 var windowWidth, windowHeight;

 // ---> RICAVO LE DIMENSIONI DELLA FINESTRA <--- //

 // self.innerHeight : altezza di default della finestra
 // self.innerWidth  : larghezza di default della finestra
 // (dimensioni non valide per Explorer 6)

 // document.documentElement.clientWidth  : larghezza di default della finestra
 // document.documentElement.clientHeight : altezza di default della finestra
 // (dimensioni valide per Explorer 6)

if (self.innerHeight) {
    if(document.documentElement.clientWidth){
        windowWidth = document.documentElement.clientWidth;
    }else{
        windowWidth = self.innerWidth;
    }
    windowHeight = self.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
}else if (document.body) {
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
}

//per le pagine con l'altezza totale minore dell'altezza della finestra del browser
if(yScroll < windowHeight){
     pageHeight = windowHeight;
}else {
     pageHeight = yScroll;
}

//per le pagine con larghezza totale minore della larghezza della finestra del browser
if(xScroll < windowWidth){
    pageWidth = xScroll;
}else{
    pageWidth = windowWidth;
}

//creo l'array e lo ritorno
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
}

La funzione restituisce un array con le dimensioni.

Oggi vorrei parlarvi di Flip! un plugin per jQuery che fa ruotare o “flippare”  contenuti ed elementi.

L’installazione è semplice, di seguito un mini-tutorial su installazione ed utilizzo.

Installazione

Aggiungete la libreria jQuery nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.flip.js“></script>

ed anche il file css del plugin :

<link rel="stylesheet" type="text/css" href="reset_html5.css"/>
<link rel="stylesheet" type="text/css" href="flip_099.css"/>

Come si usa?
Per avviarlo basta inserire il codice javascript :

$("#mydiv").flip({
    direction:'tb'
});

Opzioni del plugin

Le opzioni che si possono inserire sul plugin sono:

- la direzione dell’animazione :

• direction :  ‘tb’ ; top-bottom, cioè da sopra a sotto
• direction : ‘bt’ ; bottom-top, cioè da sotto a sopra
• direction : ‘lr’ ; left-right, cioè da sinistra a destra
• direction : ‘rl’ ; right-left, cioè da destra a sinistra

- il contenuto da visualizzare dopo l’animazione :

• content : ‘contenuto’

- il colore da visualizzare dopo l’animazione :

• color : ‘#ff0000′

- la velocità dell’animazione in millisecondi :

• speed : 1000

- i gestori degli eventi dell’animazione :

• onBefore : codice ; quello che succede prima dell’animazione
• onAnimation : codice ; quello che succede durante l’animazione
• onEnd : codice ; quello che succede quando l’animazione è terminata

Oltre alla funzione di base flip() esiste la funzione revertFlip(), che esegue l’animazione in direzione opposta alla sua esecuzione.

Il plugin è stato realizzato da Luca Manno, web developer di Ex Machina in quel di Lugano (Svizzera).

Oggi vorrei presentarvi questo plugin, jQuery Magnifier.

Questo plugin permette lo zoom dell’immagine con un semplice effetto lente.

Di seguito una mini-guida all’installazione e all’uso.

Installazione

Aggiungete la libreria jQuery nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.magnifier.0.2.js“></script>

ed anche il file css del plugin :

<link rel=”stylesheet” type=”text/css” href=”css/jquery.magnifier.css” media=”screen”>

Come utilizzarlo

Ora abbiamo bisogno di due immagini uguali, una più grande ed una più piccola sulla quale fare lo zoom :

<a href=”img/large.jpg” rel=”magnify”>
<img src=”img/small.jpg alt=”My small image” width=”500″ height=”335″>
</a>

nel link all’immagine più grande bisogna inserire il tag rel=”magnify” per far funzionare lo script.

Ora bisogna inserire il codice javascript per far funzionare lo zoom con la lente :

jQuery(function($) {
$(‘a[rel*=magnify]‘).magnify();
});

Se si vogliono aggiungere delle opzioni, per adattare lo zoom come vogliamo noi basta inserire le opzioni nella funzion magnify(), così :

jQuery(function($){
$(‘a[rel*=magnify]‘).magnify({
lensWidth: 160, // width of the lens
lensHeight: 160, // height of the lens
link: true // clicking in the lens goes to the large image
delay: 500 // time to wait before the lens is shown
});
});

Le opzioni lensWidth e lensHeight indicano rispettivamente larghezza ed altezza dello zoom, l’opzione link : true invece inserisce il link all’immagine a quella più grande.

L’ultima opzione, il delay vuole il numero di millisecondi prima di visualizzare la lente.

Potete scaricare questo plugin qui.

Oggi vorrei parlarvi di jQZoom Evolution, un plugin jquery che permette lo zoom di un immagine più grande attraverso una sorta di “lente” su un immagine di anteprima.

Qui troverete alcuni esempi del funzionamento di jqzoom, e se continuate a leggere vi spiegherò come utilizzare il plugin.

Installazione

Il plugin necessita per prima cosa di jQuery , quindi scaricate la libreria ed inserite il collegamento all’interno dell’head della pagina html.

<script type=’text/javascript’ src=’js/jquery-1.2.6.js’></script>

Ora scaricate dalla pagina del progetto i file necessari per far funzionare il plugin ed aggiungete nell’head della pagina il riferimento alla pagina javascript.

<script type=’text/javascript’ src=’js/jquery.jqzoom-1.0.1.js’></script>

All’interno del pacchetto zip che scaricherete troverete anche il file css per lo stile del plugin, aggiungetelo sempre nell’head della pagina.

<link rel=”stylesheet” type=”text/css” href=”css/jqzoom.css” />

Come utilizzarlo

jQZoom necessita di due immagini, una più grande ed una più piccola. Quest’ultima, al passaggio della lente visualizzerà lo zoom dell’immagine più grande, quindi per il corretto funzionamento è consigliabile usare due immagini con le medesime proporzioni ( altezza – larghezza).

Di seguito il codice html per le immagini :

<a href=”images/BIGIMAGE.JPG” title=”MYTITLE”>
<img src=”images/SMALLIMAGE.JPG” title=”IMAGE TITLE” >
</a>

SMALLIMAGE rappresenta l’immagine che vogliamo zoomare mentre BIGIMAGE è l’immagine sulla quale sarà effettuato lo zoom vero e proprio.

Adesso, come è consuetudine per jQuery, dichiariamo all’interno del caricamento del DOM la funzione jqzoom() sulla classe di prima (MYCLASS), così :

$(document).ready(function(){
$(‘.MYCLASS).jqzoom();
});

Se si vuole si possono inserire alcune opzioni all’interno della funzione per adattare il plugin alle proprie esigenze, vediamo un esempio :

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: “right” //and MORE OPTIONS
};
$(‘.MYCLASS).jqzoom(options);
});

Le opzioni sono molte, di seguito un elenco e una descrizione di cosa attuano :

• zoomType : ['standard','reverse'] ; questa è la variabile che decide se lo zoom è di tipo standard o reverse.
• zoomWidth : valore ; questo valore indica la larghezza del box con lo zoom
• zoomHeight : valore ; questo valore indica l’altezza del box con lo zoom
• xOffset : valore ; questo valore indica la posizione iniziale x della lente
• yOffset : valore ; questo valore indica la posizione iniziale y della lente
• position : ['right','left','top','bottom'] ; indica la posizione del box con lo zoom
• lens : ['true','false'] ; indica se si vedrà la lente oppure no
• imageOpacity : valore decimale ; indica l’opacità che assumerà l’immagine con lo zoomType settato a reverse
• title : ['true','false'] ; indica se si vedrà il titolo soprà il box con lo zoom
• showEffect : ['show','fadeIn'] ; indica con quale effetto si visualizzerà il box con lo zoom
• hideEffect : ['hide','fadeOut'] ; indica con quale effetto si nasconderà il box con lo zoom
• fadeInSpeed : ['fast','slow','medium'] ; indica la velocità di apparizione del box se showEffect è settato su fadeIn
• fadeOutSpeed : ['fast','slow','medium'] ; indica la velocità di scomparsa del box se hideEffect è settato su fadeOut
• showPreload : ['true','false'] ; indica se si vedrà il preload del plugin oppure no
• preloadText : ‘valore’ ; indica il testo da visualizzare durante il preloading
• preloadPosition : ['center','bycss'] ; indica la posizione che occupa il preload, se al centro o se settato nel css

Ulteriori modifiche di stile (colori,font,ecc.) avvengono nel file jqzoom.css.

Il plugin potete scaricarlo qui.

Un ringraziamento va all’autore Ing. Marco Renzi, che ha creato questa perla di plugin.

Per il secondo numero della rubrica “I ferri del mestiere” presentiamo 5 freeware per aumentare le prestazioni del vostro computer quando lavorate con più applicazioni, multitasking appunto.

Oggi presentiamo :

Cache My Work
VistaSwitcher
Lacuna Launcher
xNeat Clipboard Manager
eXpresso

Cache My Work

Cache My Work è un utility che permette di ricreare la cache del sistema dopo un riavvio del pc.

E’ molto utile perchè permette di non perdere il lavoro per la maggior parte dei programmi, prima però bisogna selezionare i programmi per il quale si vuole salvare la cache.

Puoi scaricarlo qui.

VistaSwitcher

VistaSwitcher è un’applicazione che emula in parte il sistema di scorrimento delle applicazioni di Vista.

Premendo Alt + TAB si aprirà una finestra (come l’immagine sopra) dove potrete scegliere dall’elenco quale applicazione e quale file aprire.

Potete scaricarlo qui.

Lacuna Launcher

Questa utility permette di creare un elenco di applicazioni da lanciare all’avvio scrivendole semplicemente su un foglio di notepad, come l’esempio qui sopra.

Potete scaricarlo qui.

xNeat Clipboard Manager

xNeat Clipboard Manager è un applicazione che permette, attraverso un menù contestuale di copiare del testo su più applicazioni semplicemente attraverso il click del bottone destro del mouse sulla finestra dell’applicazione nella barra delle applicazioni.

Potete scaricarla qui.

eXpresso

eXpresso è un applicazione che permette di assegnare velocemente un applicazione primaria ed una secondaria per aprire un file in base all’estensione.

All’avvio di eXpresso le estensioni vengono “resettate“, cioè bisogna decidere quale applicazione primaria e secondaria le aprirà.

Per tornare al sistema precedente basta chiudere eXpresso con il clic del mouse destro sull’icona nella tray icon.

Per aprire un file con l’applicazione primaria decisa con eXpresso basta un doppio clic, mentre per la secondaria basta premere Alt e doppio clic sul file.

Potete scaricarla qui.

Per oggi la rubrica “I ferri del mestiere” finisce qui.

Alla prossima

Il famoso portale di video lancia una nuova funzionalità Feather, per ora in versione Beta, riduce notevolmente i tempi di caricamento del buffer eliminando alcune funzioni possibili al player.

Per provarla basta cliccare qui e premere su Join “Feather” Beta.

Sempre dalla stessa pagina è possibile disattivare la funzione in stile piuma

Buongiorno cari lettori di Good2know, oggi sono disponibili 8 inviti per Google Wave ai primi 8 commentatori.

Scrivete nel commento il vostro indirizzo email, e vi arriverà subito l’invito via mail.

Venghino signori,venghino!

Proprio ieri sul blog ufficiale di google è uscito l’articolo riguardante una nuova applicazione per la ricerca di immagini, Google Image Swirl.

Google Image Swirl funziona in modo semantico, cioè inserendo una parola(es : bicicletta) verranno selezionate tutte le immagini con il termine bicicletta nel nome, fin qui nulla di diverso da Google Image Search.

La novità sta nel fatto che in base all’immagine verranno create dei sottogruppi, ad esempio in base alle foto in bianco e nero.

E’ bello notare che per una volta la grande G si è affidata ad Adobe Flash per gli effetti.

Fonte : The Official Blog Of Efrem

Favicon Generator Tool è un generatore di favicon gratuito, bisogna solo caricare un immagine di massimo 100 Kb nei formati jpg,png o gif.

In pochi secondi verrà creato il file favicon.ico da 16 x 16 pixel.

Per inserirla nel nostro sito/blog e visualizzarla nella barra degli indirizzi basta inserire all’interno dei tag <head></head> queste stringhe di codice :

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

dove http://example.com/favicon.ico è l’indirizzo della tua favicon.

Fonte : maestroalberto