Friday, August 18, 2006

New blog look and feel #2 New blog look and feel #2

A slight tweak tonite that only took two lines of Javascript, but is quite nice. It used to be that when I would open or close a post, the post stayed where it was, which was often someplace right in the middle of a post. The enhancement was to scroll to the top of a post whenever I opened, chopped, or closed a post. All I had to do was add:
self.scrollTo(0,post.offsetTop);
and the entire Javascript is now:
var PostClassNone = "Post-None";
var PostClassFoot = "Post-Foot";
var PostClassChop = "Post-Chop";
var PostClassFull = "Post-Full";
function SetPostType(postid,postclass)
{
var post = document.getElementById(postid);
if   (post)
   {
   post.className = postclass;
   if (post.offsetTop>0)
      self.scrollTo(0,post.offsetTop);
   }
}
function PostFull(postid)
 {SetPostType(postid,PostClassFull);}
function PostChop(postid)
 {SetPostType(postid,PostClassChop);}
function PostFoot(postid)
 {SetPostType(postid,PostClassFoot);}
function PostNone(postid)
 {SetPostType(postid,PostClassNone);}
I have a DIV around each entire post, with an assigned "ID" and "CLASS". The four possible classes are shown at the top of the Javacode. Then, down at the footer for each post, I assign anchors (A) to each of the four sets (corresponding to the four CLASSes) of three possible selections, with the anchor (A) invoking the appropriate one of the last four Javascript functions at the bottom of the listing, with the ID for the relevant DIV as its parameter. The CLASS of each DIV is initially set based on the type of display - regular posts get "Post-Chop", posts w/i comments get "Post-Full", and posts w/i an archive listing are assigned "Post-None". The rest of the job is done through CSS turning on and off displays of text within the DIV based on its current CLASS.

Labels:

12:43 AM Display: Full / Chopped / Footer

Display: Full / Chopped / None

Display: Full / Footer / None

Display: Chopped / Footer / None

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home >>