1. Ask an answerable question.
2. Put your best attempt on jsfiddle.net
3. Get TONS of help.
:D
On Oct 18, 2010, at 10:32 AM, dawnj2sb wrote:
> 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();
> };
