Wrox Programmer Forums
|
BOOK: Professional Ajax ISBN: 978-0-471-77778-6
This is the forum to discuss the Wrox book Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett; ISBN: 9780471777786
Important: For the new 2nd edition of this book, please post here instead: [url="http://p2p.wrox.com/forum.asp?FORUM_ID=307"]http://p2p.wrox.com/forum.asp?FORUM_ID=307[/url]
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Ajax ISBN: 978-0-471-77778-6 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 30th, 2006, 07:37 AM
Registered User
 
Join Date: Mar 2006
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Web Site Widgets - toggle on/off?

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
 
Old March 30th, 2006, 08:44 PM
jmcpeak's Avatar
Wrox Author
 
Join Date: Nov 2005
Posts: 87
Thanks: 0
Thanked 18 Times in 17 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Why would anyone use MS Widgets? David_0223 C# 2005 17 May 22nd, 2008 04:08 PM
Difference between web application and web site manojm39 ASP.NET 2.0 Basics 2 August 10th, 2007 09:06 AM
Publish Web Site & Copy Web Site angshujit ASP.NET 2.0 Basics 1 June 15th, 2007 09:21 AM
what is widgets paranthaman .NET Framework 2.0 1 February 25th, 2006 07:26 AM
Developing a web site not a web application mkerchenski ASP.NET 1.0 and 1.1 Basics 8 May 25th, 2004 09:03 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.