Script scroller notizie

Javascript per realizzare dei box di notizie a scorrimento automatico.

JAVASCRIPT

// posizione iniziale
var dn_startpos=120;
// posizione finale
var dn_endpos=-200;
// Velocità dello scroller: un numero più alto indica una velocità inferiore
var dn_speed=50;
// ID da assegnare al box delle news nel codice HTML
var dn_newsID=’news’;
// classe che lo script aggiunge quando Javascript è dsisponibile
var dn_classAdd=’oraJS’;
// Messaggio del link che stoppa lo scroller
var dn_stopMessage=’Ferma’;
// ID del paragrafo generato
var dn_paraID=’DOMnewsstopper’;

/* Initialise scroller when window loads */
window.onload=function()
{
// check for DOM
if(!document.getElementById || !document.createTextNode){return;}
initDOMnews();
// add more functions as needed
}
/* stop scroller when window is closed */
window.onunload=function()
{
clearInterval(dn_interval);
}

var dn_scrollpos=dn_startpos;
/* Initialise scroller */
function initDOMnews()
{
var n=document.getElementById(dn_newsID);
if(!n){return;}
n.className=dn_classAdd;
dn_interval=setInterval(‘scrollDOMnews()’,dn_speed);
var newa=document.createElement(‘a’);
var newp=document.createElement(‘p’);
newp.setAttribute(‘id’,dn_paraID);
newa.href=’#’;
newa.appendChild(document.createTextNode(dn_stopMessage));
newa.onclick=stopDOMnews;
newp.appendChild(newa);
n.parentNode.insertBefore(newp,n.nextSibling);
n.onmouseover=function()
{
clearInterval(dn_interval);
}
n.onmouseout=function()
{
dn_interval=setInterval(‘scrollDOMnews()’,dn_speed);
}
}

function stopDOMnews()
{
clearInterval(dn_interval);
var n=document.getElementById(‘news’);
n.className=”;
n.parentNode.removeChild(n.nextSibling);
return false;
}
function scrollDOMnews()
{
var n=document.getElementById(dn_newsID).getElementsByTagName(‘ul’)[0];
n.style.top=dn_scrollpos+’px’;
if(dn_scrollpos==dn_endpos){dn_scrollpos=dn_startpos;}
dn_scrollpos–;
}

CODICE CSS

#news { } //personalizzare a piacere
#news.oraJS { height:160px;    overflow:hidden; position:relative; }
#news.oraJS ul { position:absolute; top:120px; left:0; margin:0 .5em 0 .5em; padding:0; }
#news.oraJS li { margin-bottom: 10px; }

CODICE HTML

<div id=”news”>
<ul>
<li>news 1</li>
<li>news 2</li>
</ul>
</div>

Flash e validazione XHTML

Il codice seguente va utilizzato per inserire nelle proprie pagine web filmati Flash e mantenere la validazione XHTML:

<object type=”application/x-shockwave-flash” data=”nome_filmato.swf”
width=”250″ height=”60″>

<param name=”movie” value=”nome_filmato.swf” />
<param name=”BGCOLOR” value=”#fff” />
<a title=”You must install the Flash Plugin for
your Browser in order to view this movie”
href=”http://www.macromedia.com/shockwave/download/alternates/”>Installa Flash</a>

</object>

Header per mail contenenti HTML

Codice per creare un header completo e funzionante per inviare mail via server PHP contenenti codice HTML. Testato su Microsoft Outlook e Mozilla Thunderbird.

$mailHeader = “MIME-Version: 1.0” . “rn”;
$mailHeader .= “Content-type:text/html;charset=iso-8859-1” . “rn”;
$mailHeader .= “From: $email <$email >n”;
$mailHeader .= “X-Sender: <$email >n”;
$mailHeader .= “Return-Path: <$email >n”;
$mailHeader .= “Reply-To: $email n”;
$mailHeader .= “X-Mailer: PHP Linux Mailern”;

La variabile $email contiene un indirizzo email, $mailHeader è la variabile che contiene tutto l’header.

Script di colorazione alternata automatica delle righe delle tabelle in HTML

Javascript per realizzare in automatico la classica colorazione alternata delle righe in una tabella HTML. Lo script realizza anche l’evidenziazione della riga al passaggio del mouse.

Script principale

function striper(parentElementTag, parentElementClass, childElementTag, styleClasses, hoverClasses) {
var i=0,currentParent,currentChild;
if ((!document.getElementsByTagName) || (!parentElementTag) || (!childElementTag) || (!styleClasses)) return false;
var styles = styleClasses.split(‘,’);
var stylesHover = styles;
if (hoverClasses) stylesHover = hoverClasses.split(‘,’);
var parentItems = document.getElementsByTagName(parentElementTag);
while (currentParent = parentItems[i++]) {
if ((parentElementClass == null)||(new RegExp(‘\b’+parentElementClass+’\b’).test(currentParent.className))) {
var j=0,k=0;
var childItems = currentParent.getElementsByTagName(childElementTag);
while (currentChild = childItems[j++]) {
k = (j+(styles.length-1)) % styles.length;
currentChild.className = currentChild.className+” “+styles[k];
if (hoverClasses) {
currentChild.onmouseover = new Function(“this.className+=’ “+stylesHover[k]+”‘;”);
currentChild.onmouseout = new Function(“this.className=this.className.replace(‘ “+stylesHover[k] + “‘,”);”);
}
}
}
}
}

Script da inserire nella pagina in cui si vuole colorare la tabella

<script type=”text/javascript”>
//<!–
function initStripers() {
striper(‘table’, ‘
nometabella’, ‘tr’, ‘pari,dispari’, ‘pariHover,dispariHover’);
}
window.onload = initStripers;
// –>
</script>

TABELLA HTML

<table class=”nometabella”>
<tr >
<td >Nome</td>
<td >Descrizione</td>
<td >Scarica</td>
</tr>
</table>

Codice CSS

.pari { padding-left: 10px; background-color: #F4F3EA ; color:#000000; text-align: left; border-bottom: 1px solid #9999CC; }
.dispari { padding-left: 10px; background-color: #FFFFFF; color:#000000; text-align: left; border-bottom: 1px solid #9999CC; }

.pariHover { background: #FDDA99; }
.dispariHover { background: #FDDA99; }