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.
Spesso, però, si rende necessario verificare anche che il contenuto del sito Web sia effettivamente visualizzato dall’utente finale (cosa non sempre vera, soprattutto quando si ha un’infrastruttura costituita na N frontend che contattano N server API per “popolare” la pagina Web da offire ai client). Per questo motivo ho deciso di creare il seguente script, in grado di saggiare il contenuto del sito Web:
