Web Site Widgets

jlundebro · March 30th, 2006, 07:37 AM

Hello there!

First of all, to the authors: thank you for an excellent book. I really enjoyed your style of writing and your examples are great.

I was checking out the web site widgets examples in chapter 8, more specifically the News Ticker, and I would like to build a site where I can toggle the display of such a "widget" by clicking a link, but I'm afraid my javascript is a bit rusty. Here's what I'm trying to do:

Code:

var newsTicker;
function toggleNewsTicker(){
  if(newsTicker == undefined){
    newsTicker = new NewsTicker();    
    newsTicker.add("http://www.roadrunnerrecords.com/blabbermouth.net/newsfeed.xml");
  }
  else{
    newsTicker.removeMe();
    delete newsTicker;
  }
};

And in newsticker.js:

Code:

NewsTicker.prototype.removeMe = function(){
  document.body.removeChild(this.tickerContainer);
};

Now, clearly I'm not releasing everything correctly because after 10-15 "toggles", the ticker scrolls very slowly and firefox' CPU usage is majorly increased. Any idea how I should do?

John

jmcpeak · March 30th, 2006, 08:44 PM

Howdy, John!

I'm glad you're liking the book =)

You are correct, not everything is released; however, the problem you're having stems from the design of the widget. I designed this widget to be an absolute basic news ticker. In order to achieve the functionality you require, you need to change a few things in newsticker.js. In hindsight, I should've added these things to the script (my fault haha).

First, let's make some changes to the NewsTickerFeed class. One of the reasons you're experiencing higher CPU usage and slower scrolling is because the NewsTickerFeed objects continue to update themselves via the setTimeout() method. When you toggle your newsTicker object and add a feed, each feed stays in memory and auto-updates itself. Therefore, you need a way to turn off the auto-update.

You can do this by clearing the timeout. First, add a property to the NewsTickerFeed class called timer:

Code:

function NewsTickerFeed(oParent,sUrl) {
    this.timer = null;
    //Removing the rest to save space.
}

This property is used to store the timeout ID returned by setTimout() in the poll() method:

Code:

NewsTickerFeed.prototype.poll = function () {
    //Removing the rest to save space

    this.timer = setTimeout(doSetTimeout, 90000);
};

Next, create a stopPolling() method. This method will allow you to stop the feed from automatically updating whenever you desire:

Code:

NewsTickerFeed.prototype.stopPolling = function () {
    clearTimeout(this.timer);
    this.timer = null;
};

The last change to this class is the addition of a method called dispose(). This method removes all references to HTML elements and other objects to ensure all pieces of the widget are removed:

Code:

NewsTickerFeed.prototype.dispose = function () {
    if (this.timer) this.stopPolling();
    if (this.container) {
        this.parent.ticker.removeChild(this.container);
        this.container = null;
    }

    this.parent = null;
};

There are a few changes you need to make to the NewsTicker class, as well. The first is the addition of the stopTick() method (as with the autoupdating of the separate feeds, the animation code continues to execute):

Code:

NewsTicker.prototype.stopTick = function () {
    clearTimeout(this.timer);
    this.timer = null;
};

Next, write a dispose() method. Like the one you wrote for NewsTickerFeed, this will prepare the widget to be removed from memory when the garbage collector does its thing:

Code:

NewsTicker.prototype.dispose = function () {
    for (var i in this.feeds) {
        this.feeds[i].dispose();
    }

    this.stopTick();

    this.tickerContainer.parentNode.removeChild(this.tickerContainer);
    this.ticker = null;
    this.tickerContainer = null;
};

One final change, the event handler for the mouseover event of the tickerContainer element (contained in the NewsTicker constructor):

Code:

this.tickerContainer.onmouseover = function () {
    oThis.stopTick();
};

This change just uses the stopTick() method to hault the animation instead of calling clearTimeout() (code reuse!).

With these changes, your toggleNewsTicker function will look something like this:

Code:

var newsTicker;
function toggleNewsTicker(){
    if(newsTicker){
        newsTicker.dispose();
        newsTicker = null;
    } else {
        newsTicker = new NewsTicker();
        newsTicker.add("http://www.roadrunnerrecords.com/blabbermouth.net/newsfeed.xml")
    }
}

I made a minor change to your code. As far as variables are concerned, the delete statement only works on variables that are not explicitly declared with the var keyword. Since you used the var keyword to declare newsTicker, you need to set it as null when you are finished using the variable.

You can find the updated .js file at http://www.wdonline.com/upload/newsticker.js

For some reason, PHP isn't wanting to work for me at the moment; so I havenât had a chance to test this code yet. If you get any errors, feel free to email them to me (go to my site. there's a contact link), and Iâll make sure to update the .js file.

Hope this helps!

------------------------
Jeremy McPeak
Author, Professional Ajax
http://www.wdonline.com