Adding objChangeSource to the Cross-Browser Objects

Adding objChangeSource to the Cross-Browser Objects

To add a new method to the cross-browser objects is no more complicated than adding a new property to the object constructor that references the method function pointer. A function pointer is the same as the name of the function, without the parameters and without the "function" specifier. The code to extend the Navigator cross-browser object is:

this.objChangeSource = objChangeSource; // add to object constructor

function objChangeSource(sourcefile, width) {
   this.obj.load(sourcefile, width);
}

The first line of the code is added to the object constructor function and the new method is added at the bottom of the file, though it can be added anywhere within the cross-browser JavaScript source file. The Netscape layer function load is used to load the new source. The reason load is used is that it allows you to specify a width for the container, which then forces the contents to wrap to fit this width.

The addition of the function to the IE cross-browser object is not quite as simple. In part 1when the object was created it was created to point to the object's style object, rather than directly to the object passed to it. I also stated in this article that this would need to be changed for the part 3 code. The reason for this change is that the "src" attribute used to load the new content into the Web page is not referenced directly from the style object, but from the object itself. So, based on this the object needs to be changed and each of the functions that reference the object need to be changed. The following code block shows the change to the object constructor, one of the existing functions, objGetTop, and the new object method:

// object constructor change
function wdvlNewObject(obj) {
	this.obj = obj;   // rather than this.obj = obj.style

// element's top position
function objGetTop () {
	return this.obj.style.pixelTop;
}

function objChangeSource(sourcefile,width) {
  var name = this.name;
  this.obj.src = sourcefile;
}

The reason that I deliberately built-in a necessary change into the IE cross-browser object is to demonstrate that the object can be changed, significantly, yet still work with existing as well as new pages. This demonstrates the real power of using JavaScript objects to handle browser, as well as browser version, differences.

Notice that the IE version of objChangeSource does not use the width parameter. As the parameter is necessary for the Netscape version of the code, and the same method is called for both browsers, it is necessary to duplicate the width parameter for the IE specific function. It is then just ignored within the IE code.

The functions to change the inset source are created next.

Cross-Browser Objects: Creating a "load on demand" Web Page
Cross-Browser Objects: Creating a "load on demand" Web Page
Adding the Change Page Functionality