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.

Salve a tutti i lettori di good2know.

Oggi volevo proporvi una delle nuove proprietà css3 per creare box(div) con sfondi multipli senza dover dichiarare milioni di classi.

Qui potete vedere una demo.

La sintassi è molto semplice.

.box {
   width: 400px;
   background:   url(images/bg-top.png) top no-repeat,
                 url(images/bg-bottom.png) bottom no-repeat,
                 url(images/bg-repeated.png) repeat-y;
}

Ovviamente questa specifica funziona perfettamente per quasi tutti i browser, eccetto che per Internet Explorer(e quale se no? )

In aiuto però ci viene Jason Johnston con il suo Css3PIE (Css3 -  Progressive Internet Explorer), una libreria javascript che ci viene in aiuto per applicare gli stili css3 anche per Internet Explorer.

Come si usa Css3PIE ?

Scaricate la libreria e scompattatela in una cartella che volete (io in genere la tengo nella cartella js dei javascript).

In alcuni casi dovrete aggiungere al file .htaccess la riga:

AddType text/x-component .htc

Questo perchè Internet Explorer non restituisce il content-type corretto per il file .htc che useremo.

Ora nella proprieta del css andrete ad aggiungere la proprietà behavior e -pie-background, quindi il css diventerà così:

<pre>width: 400px;
background:   url(images/bg-top.png) top no-repeat,
              url(images/bg-bottom.png) bottom no-repeat,
              url(images/bg-repeated.png) repeat-y;
<pre>-pie-background:   url(images/bg-top.png) top no-repeat,
              url(images/bg-bottom.png) bottom no-repeat,
              url(images/bg-repeated.png) repeat-y;</pre>
</pre>
behavior: url(path/to/PIE.htc);

Ora il box avrà gli sfondi ripetuti anche su Internet Explorer.

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.