Look and Feel of blog (#4b) Look and Feel of blog (#4b)

Not really a change in look and feel, just a small programming change. I figured that I was searching the post DIVs for ID a bit, and optimized that, in preparation for publishing how to perform navigation.

In my previous version, I had an array of post DIVs (PostDivs) indexed from zero(0) to the number of DIVs -1. I used that for navigation. Thus, if I were in post#4, next would be #5, previous would be #3, first would be #0, and last would be PostDivs.length-1.

But how do you get to the post# within the PostDivs array? As noted earlier, I use ONMOUSEOVER attached to the Post DIVs to save off the DIV ID for later use. Then, when I need to find next, previous, etc., I look that ID up.

In a previous implementation, I used the getElementById builtin function to do this. It worked just fine. But it was a simple matter to set up a reverse array, indexed by ID instead of post#. I used tabIndex attribute in the DIV element to store the index, and the ID was already stored in the id attribute of each post DIV element. Thus, it was simple to go back and forth between the two modes of accessing the post DIV elements. The two arrays are:

PostDivs[index] - post DIVs by index
PostDivIDs[pid] - post DIVs by ID

Thus, the global variables are:

var PostClassNone = "Post-None";
var PostClassFoot = "Post-Foot";
var PostClassChop = "Post-Chop";
var PostClassFull = "Post-Full";
var PostGlobalDiv = "Post-Div";
var PostDivs = null;
var PostDivIDs = null;
var PostDivID = "";

The central code is:

function SetGlobalDivs()
{
if(!PostDivs)
  {
  PostDivIDs = new Array(0);
  PostDivs = document.getElementsByName(PostGlobalDiv);
  if(!PostDivs.length)
    {//IE Kludge
    PostDivs = new Array(0);
    var divs = document.getElementsByTagName("DIV");
    for (var i=0; i<divs.length; i++)
      if (divs[i].name == PostGlobalDiv)
        PostDivs.push(divs[i]);
    }
  for (var i=0; i<PostDivs.length; i++)
    {
    var div = PostDivs[i];
    PostDivIDs[div.id] = div;
    div.tabIndex = i;
    }
  }
return(PostDivs);
}
function FindDivIndex(divid)
{
var div;
if (div = FindDiv(divid))
    return(div.tabIndex);
else return(-1);
}
function FindDiv(divid)
{
SetGlobalDivs();
return(PostDivIDs[divid]);
}

The navigation functions are:

function GoNext()
{
var index = FindDivIndex(PostDivID);
if (index < 0)
  GoToDiv(0);
else if (index<PostDivs.length-1)
  GoToDiv(index+1);
}
function GoPrev()
{
var index = FindDivIndex(PostDivID);
if (index<0)
  GoToDiv(index-1);
}
function GoCopyright()
{
var div = document.getElementById("footer");
if ((div) && (div.offsetTop>0))
  self.scrollTo(0,div.offsetTop);
else self.scrollTo(0,document.offsetHeight+document.offsetTop);
}
function GoUp(){};
function GoTop() {GoToDiv(-1)};
function GoFirst(){GoToDiv(0)};
function GoLast() {GoToDiv(99999)};
function GoToDiv(index)
{
SetGlobalDivs();
if (index < 0)
  {
  self.scrollTo(0,0);
  PostDivID = "";
  }
else {
  var length = PostDivs.length;
  if (index >= length)
    index = length-1;
  var post = PostDivs[index];
  PostDivID = post.id;
  if (post.offsetTop>0)
    self.scrollTo(0,post.offsetTop);
  }
}
function SetDiv(divid)
{
PostDivID = divid;
}

The local display mode functions are:

function PostFull(postid){SetPostType(postid,PostClassFull)};
function PostChop(postid){SetPostType(postid,PostClassChop)};
function PostFoot(postid){SetPostType(postid,PostClassFoot)};
function PostNone(postid){SetPostType(postid,PostClassNone)};
function SetPostType(postid,postclass)
{
var post = FindDiv(postid);
if (post)
  {
  post.className = postclass;
  if (post.offsetTop>0)
    self.scrollTo(0,post.offsetTop);
  }
}

The global display mode functions are:

function GlobalPostFull(){SetGlobalType(PostClassFull)};
function GlobalPostChop(){SetGlobalType(PostClassChop)};
function GlobalPostFoot(){SetGlobalType(PostClassFoot)};
function GlobalPostNone(){SetGlobalType(PostClassNone)};
function SetGlobalType(postclass)
{
SetGlobalDivs();
for (var i=0; i<PostDivs.length; i++)
  {
  PostDivs[i].className = postclass;
  }
}