Hi,

I'm creating a list with buttons that show and hide some of the list elements to create the effect of scrolling. I've built an scrollList object so I can apply this to any list. When you create the object and pass it the id of the <ul> and how many items of the list you want to be displayed. It will add the scroll down and scroll up links and add an Event.observe to them (I'm using the Prototype library).

This code creates the object
Code:
var main_news_articles;
main_news_articles = new scrollList('main_news_articles', 5);
main_news_articles.init();
The problem I am having is with the callback functions of the onclick event of the links (scrollUp and scrollDown). The this keyword within these functions is refering to the link and not the object.

To try and solve this I've made the title attribute of the link the same as the variable name of the scrollList object. I can reference the scrollList object like so...

Code:
/* Call back functions */
/* eval(this.title) in the following is the title of the link 
clicked to fire this event. The title is the name of the 
object so in this case this.title is 
equal to 'main_news_articles' */

this.scrollUp = function(){
        /* start and end are the indexs of where to start and stop displaying the list (see full object below) */
	eval(this.title).start--;
	eval(this.title).end--;
        /* displayList redraws the list */
	eval(this.title).displayList();
}
	
this.scrollDown = function(){
        eval(this.title).start++;
	eval(this.title).end++;
	eval(this.title).displayList();
}
... but not in Internet Explorer (I'm using IE6).

So can I make eval(this.title) reference my object or am I going about the this keyword in callbacks problem wrong? Any help appreciated massively. I've included the complete object below.

Thanks

Here is the scrollList class
Code:
function scrollList(id, num) 
{
	this.init = function(){
	
		this.getList();
		new Insertion.Before(this.id, this.updiv);
		new Insertion.After(this.id, this.dwndiv);
		this.displayList();
	}
	
	this.getList = function(){
		var ul = $(this.id);
		var list = ul.getElementsByTagName('li');
		this.list = list;
		
	}
	
	this.scrollUp = function(){
		eval(this.title).start--;
		eval(this.title).end--;
		eval(this.title).displayList();
	}
	
	this.scrollDown = function(){
		eval(this.title).start++;
		eval(this.title).end++;
		eval(this.title).displayList();
	}

	this.displayList = function(){
		this.displayLinks();
		for (i=0;i<this.list.length;i++)
			{
			if (i >= this.start && i <= this.end)
			{
				$(this.list[i].id).show();
			} else {
				$(this.list[i].id).hide();
			}
		}
	}
	
	this.displayLinks = function(){
		if (this.start == 0){
			$(this.scr_up_div_id).update(this.up_non_link);
		} else {
			$(this.scr_up_div_id).update(this.uplink);
			Event.observe(this.scr_up_link_id, 'click', this.scrollUp);
		
		}
		if (this.end == (this.list.length - 1)){
			$(this.scr_dwn_div_id).update(this.dwn_non_link);
		} else {
		
			$(this.scr_dwn_div_id).update(this.dwnlink);
			Event.observe(this.scr_dwn_link_id, 'click', this.scrollDown);
		}
	}
	
	this.id = id;
	this.num = num;
	this.ul = null;
	this.list= null;
	this.start = 0;
	this.end = (this.num - 1);
	this.scr_up_link_id = this.id + '_up_link';
	this.scr_up_div_id = this.id + '_up_div';
	this.uplink = '<a title="' + this.id + '" id="' + this.scr_up_link_id + '" href="#">up</a>';
	this.up_non_link = '<span>up</span>';
	this.updiv = '<div id="' + this.scr_up_div_id + '"></div>';
	this.scr_dwn_link_id = this.id + '_dwn_link';
	this.scr_dwn_div_id = this.id + '_dwn_div';
	this.dwnlink = '<a title="' + this.id + '"  id="' + this.scr_dwn_link_id + '" href="#">down</a>';
	this.dwn_non_link = '<span>down</span>';
	this.dwndiv = '<div id="' + this.scr_dwn_div_id + '"></div>';
	this.dir = '';
	
}