Recentemente ho controllato il codice HTML di alcuni siti Web che ho realizzato, ponendo particolare attenzione sulla validazione w3c.
Poichè in una di queste pagine era presente il tag <marquee> (piuttosto datato ed incompatibile con molti browser), non è stato possibile validarla. Quindi ho deciso di sostituire il tag in questione con un piccolo scrip client side che svolgesse le stesse funzioni del vertical marquee.
Per prima cosa ho creato un file *.js, chiamato marquee.js, il cui contenuto è il seguente:
/* This scrip and many more are available free online at The JavaScrip Source :: http://javascrip.internet.com Created by: Mike Hudson :: http://www.afrozeus.com */
/* To change the values in the setupLinks function below. You will notice there are two arrays for each of Titles and Links. Currently there are 3 items in each array, but you can easily expand on that by adding to the array. For example, to add a 4th record, you would simply include the following 2 lines at the end of setupLinks function:
arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascrip.internet.com/new/";
arrTitles[1] = "Don't miss anything - check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascrip/diaries/";
arrTitles[2] = "Want to learn JavaScrip? Start at the beginning.";
}
var m_iInterval; var m_Height; //onload = wl; var iScroll=0;
var arrLinks; var arrTitles;
var arrCursor = 0;
var arrMax; onload=wl;
function wl() {
m_iInterval = setInterval(ontimer, 10);
var base = document.getElementById("jump_base");
m_Height = base.offsetHeight;
var divi = parseInt(m_Height/5); m_Height = divi*5;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var td3 = document.getElementById("td3");
td1.height = m_Height-5;
td2.height = m_Height-5;
td3.height = m_Height-5;
arrLinks = new Array(); arrTitles = new Array();
setupLinks();
arrMax = arrLinks.length-1;
setLink();
}
function setLink() {
var ilink = document.getElementById("jump_link");
ilink.innerHTML = arrTitles[arrCursor];
ilink.href = arrLinks[arrCursor];
}
function ontimer() {
var base = document.getElementById("jump_base");
iScroll+=5;
if (iScroll>(m_Height*2)) {
iScroll=0;
arrCursor++;
if (arrCursor>arrMax)
arrCursor=0;
setLink();
}
if (iScroll==m_Height) {
pause();
m_iInterval = setTimeout(resume, 4000);
}
base.scrollTop=iScroll;
}
function pause() {
clearInterval(m_iInterval);
}
function resume() {
m_iInterval = setInterval(ontimer, 10);
}
Successivamente, ho aggiunto il seguente codice al foglio di stile:
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
Infine, nella pagina HTML ho digitato:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Vertical Scroll</title> <scrip type="text/javascrip" src="vertical.js"></scrip> </head> <body> <div align="center"> <center> <div id="jump_base" onmouseover="pause()" onmouseout="resume()"> <table> <tr> <td id="td1"> </td></tr> <tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr> <tr><td id="td3"> </td></tr> </table> </div> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScrips provided<br> by <a href="http://javascripsource.com">The JavaScrip Source</a></font> </div><p> </center> </div> </body> </html>
Come avrete certamente notato, il codice riportato in questo post non è farina del mio sacco ma può tornarvi certamente utile.
Per eventuali chiarimenti e personalizzazioni del codice contattatemi.
A presto.
