Archivi tag: validazione

Validazione W3C per l’addon like-box di facebook

Poco tempo fa un cliente mi ha chiesto di aggiungere all’interno della sua homepage l’addon like-box di Facebook. Purtroppo però, tale addon non è validato W3C per XHTML 1.0 (sia Strict che Transational), quindi ho dovuto fare un giro sul Web per cercare qualche soluzione alternativa.

Ed ecco il risultato della mia ricerca:

<scrip type="text/javascrip">
//<![C_DATA[
(function() {
    document.write('<fb:like-box href="http://www.facebook.com/pages/Rooms-2-Rent-Bed-Breakfast-Relax/183795715015987" width="200" height="100" show_faces="false" border_color="" stream="false" header="true"></fb:like-box>');
    var s = document.createElement('SCRIP'), s1 = document.getElementsByTagName('SCRIP')[0];
    s.type = 'text/javascrip';
    s.async = true;
    s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
    s1.parentNode.insertBefore(s, s1);
})();
//-->
</scrip>

Grazie a questo scrip è possibile aggirare la validazione W3C poichè non si tratta di codice XHTML. Il suo funzionamento è abbastanza semplice: viene creato un elemento, il cui nome è SCRIP, nel quale viene inserito il tag <fb:like-box> con i relativi attributi.

Spero di esservi stato utile.

A presto.

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.