Jun 11
Volevo segnalarvi questo divertentissimo utilizzo di google maps.
Guidare liberamente all’interno della vostra città, percorrere con una mini vettura le strade che percorrete ogni giorno.
Segnala presso:
Jan 23
Vuoi avere degli effetti carini su testo div e altro all’interno del tuo sito?
Ecco la libreria che fa per te : SimpleJs
Segnala presso:
Jan 20
Premetto che mi trovo a scrivere questo post grazie ad una segnalazione ricevuta via mail da un lettore.
Penso che sia utile fare un’altra premessa il seguente sito utilizza una piattaforma opensource e molto conosciuta chiamata WordPress e l’effetto applicato sulle immagini è dato da un plug-in chiamato thumbnail-viewer.
la seguente premessa è stata fatta in quanto nella segnalazione che ho ricevuto mi veniva richiesto come facevo ad applicare questo effetto sulle immagini.
Detto questo vorrei presentare un piccolo HowTo su come applicare un effetto molto simile sul proprio sito e senza l’ausilio di questo plug-in .
Una delle librerie più conosciute che permette di avere questo effetto sulle immagini è LightBox
Questo HowTo utilizza infatti questa libreria.
Step 1
Scaricate la libreria da qui scompattatela ed inseriti tutti i file nelle relative directory del vostro sito
Step 2
Lightbox 2 usa come librerie Prototype e scritpaculous, quindi dovrete includere anche esse nella pagina. a questo punto potete inserire all’interno del vostro header e più in particolare tra i tag <head> </head> le seguenti righe
(seguendo l’ordine)
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>Step3
Inserire sempre tra i tag <head> </head> il foglio di stile
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Step 4
Assicurarsi che i file prev.gif , next.gif, loading.gif, close.gif si trovino nella stessa directory citata nel file lightbox.css
Step 5
A questo punto andiamo ad applicare questo effetto aggiungendo un tag rel ad ogni immagine es.
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Opzioni
Questa libreria ci mette a disposizione anche un utile opzione e cioè quella di poter ragruppare le immagini in gruppi es.
<a href="images/image-1.jpg" rel="lightbox[montagna]">image #1</a><a href="images/image-2.jpg" rel="lightbox[montagna]”>image #2</a>
<a href="images/image-3.jpg" rel="lightbox[montagna]”>image #3</a>
Tengo a precisare che questa non è l’unica libreria che permette questo effetto, infatti prossimamente scriverò altri HowTo utilizzando appunto altre librerie ed altri frameworks Javascript
Segnala presso:
Sep 19
Dopo la semplice guida ad ajax, questa volta tocca a Fx.Style, una classe del Framework mootools che permette di animare gli oggetti dom tramite css.
Fare effetti con questa tecnica è molto semplice ad esempio per fare un spostamento da destra a sinistra si procede come segue:
1: var effectchange = new Fx.Style(‘examplex’, ‘left’, {duration:500});
2: effectchange.start(10, 100);
Che sta a significare, prendi l’elemento con id uguale a examplex e modifica il parametro left da 10 a 100 e la transazione durera 500 ms, questo causerà uno spostamento, clicca qui per visualizzare lo spostamento
Ciao
Come vedete lo spostamento è molto fluido.
Al posto di left è possibile utilizzare anche un altro attributo.
Come opzioni possono essere passate anche altre cose ecco un semplice esempio con le opzioni più utili:
1: var effectchange = new Fx.Style(‘examplex’, ‘left’, {
2: duration:500,
3: onComplete: function(){
4: alert(‘Animazione terminata’);
5: },
6: onStart: function(){
7: alert(‘Animazione iniziata’);
8: }
9: });
10: effectchange.start(0, 100);
Segnala presso:
Sep 10
Vi segnalo una lista di ben 50 Frameworks in diversi linguaggi, la lista è di Max Kiesler, una riflessione che fa pensare è che da quando è stato coniato il termine Ajax sono nati tantissimi Framework (quasi uno al mese!!).
Comunque vi lascio alla lista completa, anche se per me il migliore resta MooTools.
Segnala presso:
Sep 10
Conoscete i bookmarklet? io, fino a poco tempo fa, no.. beh vi elenco quelli che mi hanno impressionato maggiormente, basta cliccare sui link per vederli in azione (dovete aggiornare la pagina dopo averne testato uno):
- contentEditable divertitevi a modificare le dimensioni degli input, immagini e ad aggiungere testo;
- layout grid Andy Budd ha modificato questo bookmarklet per visualizzare un’ immagine di una griglia in pixel posizionata davanti al contenuto della pagina, dietro, fissa. via andybudd
- accessibility modifica il css della pagina rendendola ad alto contrasto;
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement ('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+ 'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
;void(el=d.getElementsByTagName('body'));void(el%5B0%5D.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='fixed');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}
Funzionano su tutti i browser con javascript abilitato, quindi potrebbero tornare utili in molte situazioni;
Segnala presso: