Oggi ho trovato un bellissimo script per montare una sequenza di immagini come sfondo di un DIV…utile.
Per personalizzarlo basta indicare il selettore giusto nella chiamata jquery. Read more…
Link Condividi su Social Network in puro HTML
Per i CMS già sviluppati tipo WordPress, Joomla, CMS Made Simple, ecc. esistono centinaia di plugin già pronti che permettono la condivisione dell’articolo e/o la pagina del nostro sito con i social network o servizi di bookmarks.
Di seguito riporto una lista con i parametri per i link in HTML da utilizzare per i social network più conosciuti.
Banner fisso e sovrapposto a piè di pagina
Scriptino di esempio di come inserire un banner a piè di pagina e fisso con l’opzione per non mostrare più. (salvando un biscotto =)
il codice
<!-- BOTTOM BAR start -->
<div id="bottombar">
<a href="LINK" target="_blank" style="margin:0; padding:0"><img src="FILEIMMAGINEDELBANNER" width="960" height="200" border="0" style="margin:0; padding:0"></a>
<div id="bottombtn"> <a onclick="javascript:killbar();" href="javascript:void();">Non mostrare più</a> | <a onclick="javascript:hidebar();" href="javascript:void();">Chiudi [x]</a></div>
</div>
<!-- BOTTOM BAR end -->
<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
var DoPop=readCookie('ENpopover');
if (!DoPop){
var delay='8'; // How many seconds before window opens
setTimeout('showbar()',delay*1000);
}
function showbar(){
document.getElementById('bottombar').style.display = "block";
}
function killbar(){
document.getElementById('bottombar').style.display = "none";
createCookie('ENpopover',0,365);
}
function hidebar(){
document.getElementById('bottombar').style.display = "none";
}
</script>
a questo si aggiungono un paio di regole css
#bottombar { background:transparent; position:relative; margin:0;display: none; position: fixed; bottom: 0; padding:0; width:980px; height:200px; z-index:1000}
#bottombtn a { color:#fff; padding:0 10px; margin:0}
#bottombtn { text-align:right; background:#000; position:absolute; bottom:0; right:0;color:#fff; text-align:right; padding:6px 0; margin:0; }
Effetto di selezione e blur su campi di un form in jquery
Altro piccolo esempio per migliorare l’effetto grafico dei form Html
<script type="text/javascript">
$(function () {
$(":text").bind("focus blur", {"background-color" : "#FFFFCC"}, function (event) {
if (event.type == "focus") {
$(this).css(event.data);
} else {
$(this).css("background-color","");
}
});
});
</script>
Tempi di caricamento della pagina e del DOM
Una bellissima pagina di esempio in Jquery per verificare i tempi di caricamento della pagina e del DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Guida jQuery - Core</title><link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style type="text/css">
#contenitore div {
background-color:#ccc;
margin:10px 0;
padding:3px;
}
#domready,#windowLoad {
font-weight:bold;
}
</style>
<script type="text/javascript">
var date = new Date(); //oggetto data generico
var start = date.getTime(); //timestamp attuale
$(function () {
var date1 = new Date();
date1secs = date1.getTime();
$("#domready").text(date1secs - start); //millisecondi per caricare il DOM
});
window.onload = function () {
var date2 = new Date();
date2secs = date2.getTime();
$("#windowLoad").text(date2secs - start); // millisecondi per caricare la pagina completa
if (date2secs > date1secs) {
$("#windowLoad").css("color","red");
}
};
</script></head>
<body>
<h1>Esempi della funzione $ - DOM ready</h1>
<p> </p>
<p>DOM caricato in: <span id="domready"></span> ms</p>
<p>Documento caricato in: <span id="windowLoad"></span> ms</p>
<p>Premi "aggiorna" per un nuovo test</p>
<p> </p>
<img src="http://farm3.static.flickr.com/2206/2231903771_5f260e460a_o_d.jpg" alt="Un'immagine di Venezia" width="300" /><br />
<small><a href="http://www.flickr.com/photos/llamnuds/2231903771/" target="_blank">credits</a></small>
<p> </p>
<h3>Codice:</h3>
<p> </p>
<pre>var date = new Date(); //oggetto data generico<br />var start = date.getTime(); //timestamp attuale<br /><br />$(function () {<br /> var date1 = new Date();<br /> date1secs = date1.getTime();<br /> $("#domready").text(date1secs - start); //millisecondi per caricare il DOM<br />});<br /><br />window.onload = function () {<br /> var date2 = new Date();<br /> date2secs = date2.getTime();<br /> $("#windowLoad").text(date2secs - start); // millisecondi per caricare la pagina completa<br /><br /> if (date2secs > date1secs) { //se il DOM viene caricato prima dell'intero documento<br /> $("#windowLoad").css("color","red"); //allora colora il tempo di caricamento del documento in rosso<br /> }<br />};<br /></pre>
</body></html>
Scriptare angoli arrotondati con Curvycorners
Oggi per l’ennesima volta ho arrotondato qualche Div nelle pagine di un sito web.
Come usare lo script è veramente semplice basta includere il file
<script type="text/javascript" src="curvycorners.js"></script>
ed inserire le regole CSS che servono come ad esempio
.round { -webkit-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; }
il file da includere è questo
il sito è: http://www.curvycorners.net/
Template per presentare layout web
Oggi ho scripto una paginetta web mescolando un pò di HTML, CSS, PHP e JS in salsa JQUERY per facilitarmi la pubblicazione di bozze di layout fatte per i clienti.
Spesso mi ritrovavo a montare ogni volta una pagina di questo tipo partendo da zero. Mi sono deciso di farne un template da riutilizzare… se lo trovate utile e ci pubblicate qualcosa…fatemi vedere ^^ sono curioso. Read more…
Arduino Controllo Remoto e invio SMS senza GSM Shield
Questo Sketch spiega come far funzionare Arduino sia in ascolto che in uscita dopo che un determinato evento si è verificato.
In parole povere Arduino rimane in ascolto di una stringa http che abbia come parte finale ATT=1 quando questo evento si verifica, viene attivato l’invio di un GET con i valori dei sensori e degli attuatori.
Il GET raggiunge una pagina in PHP che elabora la richiesta ed inserisce i parametri di Arduino in Google Calendar come Nuovo Evento. Google Calendar fornisce un servizio di notifica via SMS ogni volta che un Nuovo Evento viene aggiunto al nostro calendario CONDIVISO. In questa maniera avremo una notifica dello stato di Arduino via SMS ogni volta che un determinato evento si verifica. Tutto a costo 0 senza GSM Shield e senza spese telefoniche.
Usare le pseudo-classi dei link per effetti grafici
Oggi ho scriptato un pò con i CSS e trovato una simpatica soluzione per usare le pseudo-classi dei link…credo utilizzerò questo sistema per i classici tasti back.
<style type="text/css">
<!--
body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
.tags { text-align:center}
.tags a{ margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff;
text-decoration:none; height:24px; position:relative; display:block; width:50%; margin:0 auto
}
.tags a:before{ content:""; float:left; position:absolute; top:0;
left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;
border-style:solid; border-width:12px 12px 12px 0;
}
.tags a:after{ content:""; float:left; position:absolute; top:0;
right:-12px; width:0; height:0; border-color:transparent transparent transparent #0089e0;
border-style:solid; border-width:12px 0 12px 12px;
}
.tags a:hover{background:#555;}
.tags a:hover:before {border-color:transparent #555 transparent transparent;}
.tags a:hover:after{border-color:transparent transparent transparent #555;}
-->
</style>
<div class="tags"><a href="#">Back</a></div>
Centrare verticalmente un testo dinamico in un DIV
Dopo qualche tentativo non compatibile con tutti i browser ho finalmente trovato la soluzione che cercavo…ecco la soluzione:
<div class="outerContainer">
<div class="innerContainer">
<div class="element"><a href="#">testo dinamico</a></div>
</div>
</div>
e queste le righe di CSS
.outerContainer
{
display: table;
height: 180px;
overflow: hidden;
width: 200px;
background-color: #EBEBEB;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.outerContainer .innerContainer
{
display: table-cell;
vertical-align: middle;
width: 180px;
margin: 0 auto;
text-align: center;
}
<!--[if IE]>
<style type="text/css">
<!--
.boxcdl { position: relative; }
.boxcdl div { position: absolute; top: 50%;left:0; width:100% }
.boxcdl div p { position: relative; top: -50%; left:0; }
-->
</style>
<![endif]>
L’esempio è ricavato da questa demo di Andy-Howard.com