Alternativa Javascript al vertical marquee

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.

Alternativa Javascript al vertical marqueeultima modifica: 2011-07-04T22:46:00+02:00da nazarenolatella
Reposta per primo quest’articolo

Un pensiero su “Alternativa Javascript al vertical marquee

Lascia un commento