Propongo di seguito un interessante effetto in javascript e css3 che permette di creare un effetto di rotazione a qualsiasi contenuto.

La proprietà che utilizzeremo è transform: rotate(90deg) .

Di seguito una demo.

Ricordiamoci che non tutti i browser permettono l’utilizzo delle proprietà transform CSS3.

Quindi controlliamo che browser ha il client e impostiamo le proprietà di conseguenza.

Per farlo utilizziamo una funzione di jQuery che ci permette di sapere quale sia il browser in uso.

<br>var cssPrefix = "";<br>if ($.browser.mozilla){<br> cssPrefix = "moz";<br> } else if ($.browser.safari){<br> cssPrefix = "webkit";<br> } else if ($.browser.opera){<br> cssPrefix = "o";<br> } else if ($.browser.msie){<br> cssPrefix = "ms";<br> }<br>

Successivamente impostiamo un intervallo di tempo a 20 millisecondi che chiama una funzione che fa cambiare la posizione, rispetto l’originale, del nostro elemento.

<br>window.setInterval(function(){<br>   if(cssPrefix) {<br>      d += speed * dir;<br>   }<br>   rotate(cssPrefix, d);<br>}, 20);<br><br>function rotate(cssPrefix,d){<br>   d += speed * dir;<br>   $('#rays').css('-'+cssPrefix+'-transform','rotate('+d+'deg)');<br>}<br>

Ricordo che purtroppo questo scriptino non funzione su Internet Explorer in quanto non supporta la proprietà css transform.

Da web developer quale sono ho sempre desiderato poter personalizzare gli input dei form, magari con stili o sfondi particolari.

Da oggi si può, con un metodo che utilizza Javascript e i fogli di stile CSS.

E’ un metodo valido per quasi tutti browser, eccetto l’ormai moribondo Internet Explorer 6.

Di seguito trovate il link al pacchetto zip contenente un esempio, i file javascript da scaricare e il foglio di stile associato.

Input personalizzati

Per far girare questo script basta inserire all’interno del tag input la classe “styled”.

<input class="styled" type="checkbox" />

Come lavora?

Il file javascript sostituisce all’interno della pagina html tutti gli elementi che hanno la classe “styled” con un tag span con gli stili assegnati nel CSS, agganciando in automatico anche gli eventi legati al mouse.

Per far lavorare al meglio lo script, con checkbox, radio e select personalizzati bisogna specificare 3 variabili all’interno del file javascript che riguardano le altezze dei checkbox e dei radio e la lunghezza del tag select.

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

Anche per modificare gli stili dei tag basta modificare il foglio di stile.

.checkbox, .radio {

width: 19px;

height: 25px;

padding: 0 5px 0 0;

background: url(checkbox.gif) no-repeat;

display: block;

clear: left;

float: left;

}

.radio {

background: url(radio.gif) no-repeat;

}

.select {

position: absolute;

width: 158px;

height: 21px;

padding: 0 24px 0 8px;

color: #fff;

font: 12px/21px arial,sans-serif;

background: url(select.gif) no-repeat;

overflow: hidden;

}

Esempi

Qui trovate un esempio.

Qui trovate l’articolo intero di Ryanfait.

Modalità d’utilizzo

Lo script è sotto licenza Creative Commons.

Basta lasciare il titolo, il nome e il sito web all’interno del file JavaScript.

Oggi leggendo tra le news del blog di html.it ho afferrato questa notizia che per forza dovevo riproporvi.

Internet Explorer 9 è disponibile in anteprima, seppur si tratta di una fase di test.

Le premesse per avere un browser veloce, affidabile, versatile e,  soprattutto per i web developer come me, conforme agli standard css e javascript.

Iniziamo parlando del supporto Javascript, una delle pecche che Microsoft si trascina dal lontano IE 5 e che è stato un flop nella versione 8 in termini di prestazioni.

Il motore javascript di IE è sempre basato su WebKit SunSpider.

Le prestazioni sono migliorate notevolmente, riducendo i tempi di esecuzione, come riportato di seguito nel grafico.

IE9 ha dato un ottimo risultato anche al più rigoroso AcidTest 3.

Passiamo alle novità più pratiche.

Internet Explorer 9 supporta l’HTML 5, gestendo ottimamente gli eventi del DOM e gli stili dello stesso.

Con HTML5 c’è la possibilità di utilizzare il CSS3 e quindi miglior gestione dei testi,font e bordi (anche i bordi arrotondati)  .

-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-style: solid;
border-width: 6px;
padding: 48px;

Sono stati inseriti anche i selettori di attributo :

input:not(:enabled)
p:only-child

Oltre alle novità sulle prestazioni di javascript e sull’utilizzo di HTML5 c’è stata una totale revisione del motore grafico WebKit con il supporto al linguaggio SVG.

Le premesse per un ottimo browser ci sono tutte, in un momento in cui Explorer sta venendo surclassato da Firefox e da Chrome.

Potete visitare la pagina dell’anteprima qui, mentre qui potrete scaricare la versione in demo.

Fonte : Blog HTML.it

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 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.

Molto spesso viene richiesto da un cliente di creare del testo “flashoso”, per attirare l’attenzione del visitatore.

Si tratta delle classiche gif che andavano sul web negli anni 90, e che qualcuno ancor’oggi utilizza per i propri siti, molto spesso amatoriali.

Ci può dare una mano javascript e le funzioni ricorsive.

Quella che vedete qui sotto è una piccola funzione ricorsiva che ho creato, e che fa cambiare il colore del testo dinamicamente.

<script language=”javascript” type=”text/javascript”>
function animazione_testo(tipo){

id=document.getElementById(“testo_animato”);

if(tipo==1){
id.style.color=”#0066CC”;
tipo=2;
}
else{
if(tipo==2){
id.style.color=”#e30033″;
tipo=1;
}
}

setTimeout(animazione_testo(tipo),30000);

}
</script>

<body onload=”animazione_testo(1);”>

<a href=”#” id=”testo_animato”>Testo che cambia dinamicamente</a>

</body>

L’utilizzo di funzioni ricorsive(che richiamano se stesse), è molto utile in questo caso.

Naturalmente si possono inserire più colori, aumentando le condizioni della variabile tipo.

Addirittura utilizzando la funzione Math.random(), i colori potranno cambiare casualmente.

Nei prossimi articoli vedremo come poter implementare anche queste funzioni.