Adding the Change Page Functionality

Adding the Change Page functionality

The next and previous page functions are added next. These use a switch statement to control which content page is loaded next, depending on which page is currently loaded. The current page is maintained in a global variable. The code for the next and previous page functions is shown in the following code block:

LAYERWIDTH = 500;
current_page = "part1.htm";

// pull in "next" page of article
function next_page() {
   switch(current_page) {
	case "part1.htm" :
		current_page = "part2.htm";
		break;
      case "part2.htm" :
		current_page = "part3.htm";
		break;
      default :
		current_page = "part1.htm";
	}
   wdvlObjs["content"].objChangeSource(current_page,LAYERWIDTH);
}

// pull in previous page of article
function prev_page() {
   switch(current_page) {
	case "part1.htm" :
		current_page = "part3.htm";
		break;
      case "part2.htm" :
		current_page = "part1.htm";
		break;
      default :
		current_page = "part2.htm";
	}
wdvlObjs["content"].objChangeSource(current_page,LAYERWIDTH);
}

Notice that the width of the layer is also maintained as a global constant value, and passed to the new object method.

If the page were tested at this point, the content would load according to which page was accessed, and would wrap correctly for both browsers. However, there would be a major difference in the output of the page for both browsers in that Microsoft clips content to the frame object and automatically provides left-right and top-down scrollbars for the frame. Netscape, however, wraps the content and displays all of the content along the length of the content, and the Web page reader needs to scroll the browser window. As this is not the effect I want, I need to add functionality to the Netscape layer to clip the content to the layer's specified length and to provide code-driven scrolling for the content. This also means that one more extension needs to be added to the cross-browser objects to control object clipping. The new extension is discussed in the next section.

Adding objChangeSource to the Cross-Browser Objects
Cross-Browser Objects: Creating a "load on demand" Web Page
Adding Clipping to the Cross-Browser objects