Note Post-it

Fino a pochi mesi or sono, utilizzare i pop-up per segnalare eventi ed offerte speciali era la norma, attualmente si preferisce utilizzare un sistema più discreto.
In questo articolo ne vedremo l'uso.

Tutto il codice necessario verrà? realizzato in un file post-it.js, che potrà? essere collegato con il comando:

<script type="text/javascript" src="post-it.js"></script>

Vediamo il codice necessario al suo funzionamento:

 // impostazione della tipologia del browser
 var ie4=document.all;
 var ie6=document.getElementById;
 var ns4=document.layers;
 var ns6=document.getElementById && !document.all;

 // impostazione delle variabili per il movimento
  var finale =120;
  var inizio=-400;
  var corrente=-400;
  var bounce=100;
  var i=0;

// funzione necessaria alla chiusura della casella
 function chiudi(){
    if (ie4) eval("document.all.box.style.top=inizio;");
    if (ns4) eval("document.box.top=inizio;");
    if ((ns6)||(ie6)) document.getElementById('box').style.top=inizio;
}

// funzione necessaria allo spostamento
 function sposta(){
    dy=Math.round(finale-corrente)/2;
    corrente += dy;
 if ((dy<1)&&(dy>-1)) {
     i+=1;
     bounce = -(bounce/i);
     finale += bounce;
  }
  if (ie4) eval("document.all.box.style.top=corrente;");
  if (ns4) eval("document.box.top=corrente;");
  if ((ns6)||(ie6)) document.getElementById('box').style.top=corrente;

  if (i<20) setTimeout("sposta()", 10);
 }

 // scrivo il box con la pubblicità? da mostrare in javascript
 document.write("<div id="box" name="box" style="position:absolute; top:"+ inizio +"px; left: 200px; width:220px; padding: 10px; background: #fff; border:1px solid #036; font: 8pt verdana,Arial,Helvetiva,sans serif">");
 document.write("<div align="right"><a href="#" onClick="chiudi()">Chiudi</a></div>");
 document.write("Lorem ipsum ...");
 document.write("</div>");

//  l'animazione parte dopo 5 secondi dal caricamento della pagina
setTimeout("sposta()", 5000);

Vediamo il risultato

Scarica il codice completo