Wise Hacker: 2005

Tuesday, November 15, 2005

Better-Looking Blogger Preview

As many of you already know, there is a bug in Blogger Preview. Fonts are two big, borders slam up against the left edge of the screen, widths are wrong... in short, the browser is operating in quirks mode when it should be operating in standards mode. I have informed Blogger Support of the problem, but until they fix it, here's a workaround. In your template's style sheet, after the body rule, if, for example, you have a font size value of "small":

body.0 {
   font-size: x-small;
}

In other words, choose the next smaller font-size value keyword (x-small for small, small for medium, medium for large, etc. You don't need to do this if you're using pt or px values, as these will not trigger a difference in visible size.(By the way, that's "dot zero", not "dot O".) Likewise, if you're having trouble in preview mode with alignment issues, insert this code after the #content rule:

.0 #content {
   width: 100%;
}

Now add a "zero" (0) class attribute to the <body> tag:

<body class="0">

If parts of your page still look strange on preview, or if borders aren't showing up in the right place, write the above rule for your #wrap or similar div that surrounds your #content and place it after your #wrap rule with a .0 #wrap selector.

You can usually tell which things to patch. Most templates have multiple declarations in some rules, and some of these have embedded empty comments. Go up to the first declaration without /* */ and clone it in your .0 rule.

God bless!

Edit: changed "% %" to correct comment syntax of "/* */"

Friday, April 01, 2005

Blinking Text on Internet Explorer?

Up until now, the <blink> tag was only available on Netscape and its close cousins. NO MORE! For all you IE users out there who are feeling disenfranchized, I have found the answer!!!

Just put this text in your document’s header and, Voila! you have the blink tag!

<style type="text/css">
<!--
* blink
{
 visibility: expression((Math.floor(new Date().getTime()
                        /500)%2)?"visible":"hidden");
}
/* Code has been formatted to fit your screen.
   You may delete the line break and extra space
   in the CSS expression with no change in function. */
-->
</style>
<script type="text/javascript">
<!--
setInterval("document.recalc()",1);
-->
</script>

This, as you can plainly see, really works! I know, the date says April first. But trust me: this is all the code I used.

Sunday, March 06, 2005

Correction to getElementsByClass()

The old getElementsByClass() function listed under "Reverse Archives" works only on Internet Explorer. I’ve written a new one using DOM syntax, so if you want cross-browser support, use this code instead:

function getElementsByClass(nm,nd)
{
 var n=new Array(0);
 if(!nd)
 {
  nd=document.body;
  if(nd.className==nm)
   n.push(nd);
 }
 with(nd)
 {
  for(var i=0; i<childNodes.length; i++)
  {
   if(childNodes[i].nodeType==1)
   {
    if(childNodes[i].className==nm)
     n.push(childNodes[i]);
    if(childNodes[i].childNodes.length)
     n=n.concat(getElementsByClass(nm,childNodes[i]));
   }
  }
 }
 return n;
}

Monday, January 31, 2005

Reverse Archive Listings Revisited

It’s easy this way. You don’t have to collect the lines in an array and physically writeln() them into the page; instead, shuffle the elements of the list that has already been loaded.

Here’s how: right after your archive list in your template, which should be between <MainOrArchivePage> </MainOrArchivePage> tags in your sidebar, insert this code immediately before the closing </MainOrArchivePage> tag:

<script type="text/javascript">
<!--
var a=getElementsByClass("archive-list");
var l=a[a.length-1].childNodes;
for (var x=0; x<l.length/2; x++)
{
 var n=l[x].innerHTML;
 l[x].innerHTML=l[l.length-x-1].innerHTML;
 l[l.length-x-1].innerHTML=n;
}
/***************************************/
/* Old getElementsByClass() DEPRECATED */
/* -- see new post above.              */
/***************************************/
function getElementsByClass(nm)
{
 var n=new Array(0);
 with(document)
 {
  for(var i=0; i<all.length; i++)
   if(all[i].className==nm)
    n.push(all[i]);
 }
 return n;
}
-->
</script>

This should reverse the order of your archives, so that the most recent appears and the top, and the least recent at the bottom. And that’s how you reverse your archives!

Thursday, January 20, 2005

Smart Comment Counts

Ever looked at your comment count and asked, “1 Comments? What does that mean?” Well, there just happens to be a fix for that grammatical error; with a little bit of JavaScript and DHTML (DOM), you can make dumb counts a thing of the past. In fact, you can make your comment link say anything you want it to. I’ve chosen to put “Comment on this” in place of “0 comments”, for example.

Here’s how it’s done: right after the closing </Blogger> tag, insert this code:

<style type="text/css">

<!--

.hidden {display:none;}

-->

</style>

<MainOrArchivePage>

<script type="text/javascript">

<!--

var n=document.links;

for(var i=0; i<n.length; i++)

with(n[i])

{

 if(innerHTML=="0 comments")

  innerHTML="Comment on this";

 else if(innerHTML=="1 comments")

  innerHTML="1 comment";

}

-->

</script>

</MainOrArchivePage>

<ItemPage>

<script type="text/javascript">

<!--

var h=document.getElementsByTagName("H4");

with (h[h.length-1])

{

 if(innerHTML=="0 Comments:")

  className="hidden";

 else if(innerHTML=="1 Comments:")

  innerHTML="1 Comment:";

}

-->

</script>

</ItemPage>

Then republish your blog, and watch your counts get smarter!

Note: Some templates don’t disable the comment link on the Item Page. You can do that by searching your template for <p class="post-footer"> and then looking for the <BlogItemCommentsEnabled> ... </BlogItemCommentsEnabled> tags inside that paragraph. Simply place an opening <MainOrArchivePage> tag to the left of the opening tag, and a closing </MainOrArchivePage> tag to the right of the corresponding closing tag. Now your comment link will not display on a post page.

Wise Hacker

Tuesday, November 15, 2005

Better-Looking Blogger Preview

Friday, April 01, 2005

Blinking Text on Internet Explorer?

Sunday, March 06, 2005

Correction to getElementsByClass()

Monday, January 31, 2005

Reverse Archive Listings Revisited

Thursday, January 20, 2005

Smart Comment Counts

About Me

All Posts

Labels

Blog Archive

Other Blogs