e-Learning Blog

I have a table-of-contents in  a course. The table of contents is a <div> that contains other <div>s. The table of contents can have so many items that it requires scrolling. I also have previous/next buttons that can switch from one item in the table-of-contents to the next. I had to make sure the current-item is always scrolled into view.

 The first part of this solution is to find the Y position of an item within the table of contents. I found a great public-domain function from firetree (the original code is from quirksmode).

Now, I had to write the scrolling code:

 // get the id of the TOC container
 var oSections = document.getElementById(‘tocContainer’);
 
 // get the y position of the TOC section container
 var nSectionsY = findPosY(oSections);
 
 // get the y position of the selected item
 var nItemY = findPosY(document.getElementById(sItem)); 
 
 // adjust the item height to be in the coordinate space of the container
 nItemY -= nSectionsY;
 
 // get the height of the container and pull off the “px” part on the end
 var nHeight = parseInt(oSections.style.height);
 
 // see if the complete item is greater than the height of the container
 if ((nItemY+21) > nHeight) {
  // it is, scroll the selected page into view
  oSections.scrollTop = nItemY;
 } else {
  // see if the item is showing given the current scroll position
  if (oSections.scrollTop > nItemY) {
   // it is not, scroll the item into view
   oSections.scrollTop = nItemY;
  }

Windows XP SP2 and Windows Vista will not let you run JavaScript from your local hard drive or CD-ROM. This restriction can make it difficult to distribute interactive web pages for use on a local computer. When you launch a HTML page with JavaScript on your computer, Internet Explorer 6 and 7 will tell you that the page contains Active Content. You have to authorize the page to run “Active Content” each time it is loaded or you have to change the default settings in “Internet Options…”

Microsoft has provided a work around for this problem. The HTML author can add the “Mark of the Web” (MOTW) to each HTML document. The MOTW is a comment line included in the HTML code. Here is a sample:

<!-- saved from url=(0014)about:internet -->