[Moo] Writing an AJAX news ticker

[dawnj2sb]

I am trying to create a news ticker for our site. None of the examples
I've seen have everything I need. I like what Fx.Marquee has to offer,
but I also need the news
1) to come from an XML file
2) should loop, not just stop at the end of the list
3) should pause during a mouseover

Given this list I thought it would be easier to write my own
class....except that I have never written one before. So it's been a
bit aggravating.

I have an AJAX request creating a news DIV from an XML file:

var newsArray = [];
var newsContainer = $('newsContainer');

var getNews = function(){
      newsArray.erase();
      var feedUrl = '//dms/corporate/resources/xml/corpNewsFeed.xml';
      var request = new Request({url:feedUrl, method:'get',
            onSuccess : function(data, xml){
                nodes =
xml.documentElement.getElementsByTagName("newsItem");
                if (nodes.length > 0) {
                    for (i = 0; i < nodes.length; i++) {
                                var newsItem = new Element('div', {
                                        'id' : 'newsItem' + i,
                                        'class' : 'newsItem',
                                        'html' :
nodes[i].getElementsByTagName("value")[0].childNodes[0].nodeValue
                                }).inject(newsContainer);
                    };
                                newsArray = $$('div[class=newsItem]');
                                loopNews(newsArray);
                }else{newsContainer.set('html',"There are no news
items today.");}
            },
            onFailure: function(error){alert("Error: " + error);}
        }).send();
    };

(I would write this using jsfiddle, but the instructions are not clear
about how to upload my XML file which is currently local.) And I tried
to create something that would take each item in that news list and
morph it (can't get them to go across page, just fade in) and also
continue looping them:

var loopNews = function(array){
                for(k = 0; k < 999; k++){
                        newsContainer.erase();
                        for (j = 0; j < array.length; j++) {
                        var morphObject = new Fx.Morph(array[j],
{link:'chain',duration:5000});
                                morphObject.start({
                                        opacity: [0,1]
                                });
                        }
                }
        };

This is my final attempt after many changes. Since I can't get my own
version to work, I was wondering if there was any insight on how I
could extend the Fx.Marquee class afterall to do what I need? This is
a lot to ask I know. But maybe if we can  just start with the first
steps to get my brain rolling...

I figure it's something like:

var fxmq = new Fx.Marquee(newsContainer, {
        duration: 500,
        showEffect: {
                top: [0,0],
                left: [-100, 0],
                opacity: [0,1]
        },
        hideEffect: {
                top: 20
        },
        revertEffect: {
                top: [-30, 0],
                left: [0,0]
        }
});

var getNews2 = function(){
        newsArray.erase();
        var feedUrl = '//dms/corporate/resources/xml/
corpNewsFeed.xml';
        var request = new Request({url:feedUrl, method:'get',
            onSuccess : function(data, xml){
                nodes
=xml.documentElement.getElementsByTagName("newsItem");
                if (nodes.length > 0) {
                    for (i = 0; i < nodes.length; i++) {
                        //this assumes there is no starting message
within the containing DIV because it all comes from an XML file
                        fxmq.announce({
                                message:
nodes[i].getElementsByTagName("value")[0].childNodes[0].nodeValue,
                                delay: 2500,
                                revert: false
                        })
                        ....and somehow chain all these together and
continually loop them
                    };
                }else{newsContainer.set('html',"There are no news
items today.");}
            },
            onFailure: function(error){alert("Error: " + error);}
        }).send();
    };