Unobtrusive spry help

Question

Trying to make some spry unobtrusive to w3c validation. Very
little experience in java programming and can't figure out how to
fix it.
I got some testimonials displaying on our homepage, rotating
randomly. The spry:region and spry:repeat both don't validate and
can't 'extend' document type to include cause of the text appearing
at the top of the page.
Here is the <div> giving me problems. I just don't know
how to break it out into a seperate .js
<div spry:region="dsquotes" spry:repeat="dsquotes"
id="QOTDRegion">
<div class="quote">
<div id="quotebox">
<div
id="testimonial"><em>{testimonial}</em></div><br
/>
<div id="from"> - {from}</div></div>
<a href="testimonials.php" title="Testimonial Page Link"
target="_self" class="style18">To see all the testimonials click
here</a><br /><br />
<br />
<h1 class="style11"> <!--#exec
cmd="date"--></h1>
<br />
</div>
</div>
Any help would be appreciated. Thanks in advance.

Answer 1

Yea. I have seen that and have tried several ways to piece it
all together, but I am using borrowed code that I don't completely
understand to start with and although I think I understand what is
being done, it doesn't want to work when I try it.
This is within the main page of the document which rotates
the testimonials:
<script language="javascript" type="text/javascript">
<!--
var dsquotes = new
Spry.Data.XMLDataSet("/comments/comments.xml","/Quote_List/quote");
rotateInterval = 7500;
function rotateQOTD(){
//don't go any further is there aren't any quotes
if (!quotes|| quotes.length<1)
return;
//create a variable that will point to the current quote
element
var curEle;
/*we are add a current index property to our quotes only
once since the next time
the function is called it will exist*/
if (typeof quotes.curIndex == "undefined")
quotes.curIndex = quotes.length - 1;
else
curEle = quotes[quotes.curIndex];
//here we increment the current index by one using mod
quotes.curIndex = (quotes.curIndex+1)%quotes.length;
var nextEle = quotes[quotes.curIndex];
//run the fade effect on the current and next element and
prepare the timer to run on the next element.
if (curEle)
Spry.Effect.DoFade(curEle, { from: 100, to: 0 });
Spry.Effect.DoFade(nextEle, { from:0, to: 100, finish:
function(){ setTimeout(function(){ rotateQOTD(); },
rotateInterval); } });
function dateLoadedCallback(notificationType, notifier, data)
//this observer function is called for every type of
notification but we are only interested in the onPostUpdate
if (notificationType =="onPostUpdate"){
//we grab the number of quote div's (this is only available
after the data is finished loading)
quotes = Spry.$$(".quote");
//call our rotate function
quotes.curIndex = Math.floor(Math.random()*quotes.length);
rotateQOTD();
//set up an observer to run on the databound region
Spry.Data.Region.addObserver("QOTDRegion",dateLoadedCallback);
-->
</script>
And this is where its displayed on the page :
<div spry:region="dsquotes" spry:repeat="dsquotes"
id="QOTDRegion">
<div class="quote">
<div id="quotebox">
<div
id="testimonial"><em>{testimonial}</em></div><br
/>
<div id="from"> - {from}</div></div>
<a href="testimonials.php" title="Testimonial Page Link"
target="_self" class="style18">To see all the testimonials click
here</a><br /><br />
<br />
<h1 class="style11"> <!--#exec
cmd="date"--></h1>
<br />
</div>
What would seem obvious would be to remove :
<div spry:region="dsquotes" spry:repeat="dsquotes"
id="QOTDRegion">
and replace with <div id="QOTDregion">
and then put this inside .js file being loaded :
Spry.Utils.addLoadListener(function()
// Attach the spry namespaced attributes unobtrusively.
Spry.$$("#QOTDregion").setAttribute("spry:region",
"dsquotes");
Spry.$$("#QOTDregion").setAttribute("spry:repeat",
"dsquotes");
Spry.Data.initRegions();
However this does not work and I don't know why.
I have also tried moveing all load of the data and all the
functions for rotating it into the .js file as well, but this
didn't work either, again, not sure why.
</div>