Help me validate this code please

Soldato
Joined
1 Sep 2005
Posts
10,001
Location
Scottish Highlands
I've got a piece of code on my website for integrating my twitter feed. It works very nicely, and removes @replies etc. However it doesn't validate as html strict which I would like it to. I think the problem is that there is a DIV within the javascript which isn't allowed, but it needs to be there. Is there any way of getting around this problem? The script takes the twitter content from my twitter account, arranges it as specified in the template line, then outputs it into the tweet div.

Code:
<script type="text/javascript" charset="utf-8">
	getTwitters('tweet', { 
	id: 'Alasdair_Fowler', 
	count: 3, 
	enableLinks: true, 
	ignoreReplies: true, 
	clearContents: true,
	template: '<div id="tweetline"><span class="name"><img height="20" width="20" src="%user_profile_image_url%" alt="user profile" /> <a href="http://twitter.com/%user_screen_name%">%user_name%</a> said: </span> <span class="message">"%text%"</span> <span class="twittertime"><a href="http://twitter.com/%user_screen_name%/statuses/%id%">%time%</a></span></div>' 
	});
</script>

Code:
<div id="tweet">
	<div id="tweetloader">
 	          <img src="/Miscimages/twitterload.gif" alt="twitter loader" />
           </div>
</div>
 
Yes - wrap the JavaScript in HTML comments, like so...

Code:
<script type="text/javascript" charset="utf-8">
<!--
	getTwitters('tweet', { 
	id: 'Alasdair_Fowler', 
	count: 3, 
	enableLinks: true, 
	ignoreReplies: true, 
	clearContents: true,
	template: '<div id="tweetline"><span class="name"><img height="20" width="20" src="%user_profile_image_url%" alt="user profile" /> <a href="http://twitter.com/%user_screen_name%">%user_name%</a> said: </span> <span class="message">"%text%"</span> <span class="twittertime"><a href="http://twitter.com/%user_screen_name%/statuses/%id%">%time%</a></span></div>' 
	});
-->
</script>
 
PHP:
<script type="text/javascript" charset="utf-8">
//<![CDATA[
	getTwitters('tweet', { 
	id: 'Alasdair_Fowler', 
	count: 3, 
	enableLinks: true, 
	ignoreReplies: true, 
	clearContents: true,
	template: '<div id="tweetline"><span class="name"><img height="20" width="20" src="%user_profile_image_url%" alt="user profile" /> <a href="http://twitter.com/%user_screen_name%">%user_name%</a> said: </span> <span class="message">"%text%"</span> <span class="twittertime"><a href="http://twitter.com/%user_screen_name%/statuses/%id%">%time%</a></span></div>' 
	});
//]]>	
</script>
 
Last edited:
out of interest MK, are you any nearer to solving the problem with opera mis-ordering the output of dates? Just looking into this myself...
 
out of interest MK, are you any nearer to solving the problem with opera mis-ordering the output of dates? Just looking into this myself...

Nope, I really don't understand why opera is doign that at all. Anyone else know why this is happening? I have another script that works out the date of a posted tweet and outputs a relative date;

Code:
function formatDate(date) {
            var ds = date.toDateString().split(/ /),
                mon = ds[1],
                day = ds[2],
                dayi = parseInt(day),
                year = date.getFullYear(),
                thisyear = (new Date()).getFullYear(),
                th = 'th';
            
            // anti-'th' - but don't do the 11th, 12th or 13th
            if ((dayi % 10) == 1 && day.substr(0, 1) != '1') {
                th = 'st';
            } else if ((dayi % 10) == 2 && day.substr(0, 1) != '1') {
                th = 'nd';
            } else if ((dayi % 10) == 3 && day.substr(0, 1) != '1') {
                th = 'rd';
            }
            
            if (day.substr(0, 1) == '0') {
                day = day.substr(1);
            }
            
            return mon + ' ' + day + th + (thisyear != year ? ', ' + year : '');
        }
(That's only a small part of the full js file btw.)

And it works great in Firefox and IE as the output looks like;
9:16pm May 17th
But in Opera it reorders the output to;
9:16pm 17 Mayth

Wtf is that all about? Any ideas why it is doing that?
 
For some reason, Opera's implementation of date.toDateString() returns the date in a slightly different format. The output from date.toUTCString() seems to be consistent across Firefox 3, IE 8 and Opera 9.6, but the day and month parts of the string are reversed (when compared to toDateString()). The following should work...

Code:
function formatDate(date) {
            var ds = date.toUTCString().split(/ /),
                day = ds[1],
                mon = ds[2],
                dayi = parseInt(day),
                year = date.getFullYear(),
                thisyear = (new Date()).getFullYear(),
                th = 'th';
            
            // anti-'th' - but don't do the 11th, 12th or 13th
            if ((dayi % 10) == 1 && day.substr(0, 1) != '1') {
                th = 'st';
            } else if ((dayi % 10) == 2 && day.substr(0, 1) != '1') {
                th = 'nd';
            } else if ((dayi % 10) == 3 && day.substr(0, 1) != '1') {
                th = 'rd';
            }
            
            if (day.substr(0, 1) == '0') {
                day = day.substr(1);
            }
                                    
            return mon + ' ' + day + th + (thisyear != year ? ', ' + year : '');
}

Alternatively, you could use getDate() and getMonth() rather than parsing the output from one of the to...String() functions...

Code:
function formatDate( date )
{
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    var thisyear = ( new Date() ).getFullYear();
    
    var months = new Array( 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' );
    
    var suffix = 'th';
    if ( day == 1 || day == 21 || day == 31 )
    {
        suffix = 'st';
    }
    else if ( day == 2 || day == 22 )
    {
        suffix = 'nd';
    }
    else if ( day == 3 || day == 23 )
    {
        suffix = 'rd';
    }
    
    return months[month] + ' ' + day + suffix + ( thisyear != year ? ', ' + year : '' );
}

Hope this helps.
 
Back
Top Bottom