September 25, 2012

Hiding Blog Post Rearrangement

Changing the order of Blogger blog posts using JavaScript, such as with the Post Reversal Script, has the drawback that the posts need to be loaded before they can be rearranged. The result is an unsightly load of posts in one order followed by a delayed apparent reload of the posts in the intended order.

The reloading effect can be masked by hacking the template to hide the widget containing the blog posts and only display it after the posts have been rearranged. The code for accomplishing this is simple but, unfortunately, must be placed at two remote positions in a blog's template.

To hide the posts, add the following to the stylesheet code toward the top of the template, such as before the line "/* Content" or some other line beginning with "/*":
/* Start Post Rearrangement Hiding CSS */
#Blog1 {visibility:hidden;}
/* End Post Rearrangement Hiding CSS */
Then to show the posts after they have been rearranged, add the following script just after whatever post reordering script you have added to your template and just before the closing BODY tag:
<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->
Viewing the blog, you should initially see an empty area where the posts normally appear followed by the posts appearing in the intended order.

An alternative to the empty area is to add a background image to the container underlying the blog post widget. The image could be, for example, a TV test pattern or a "Please wait..." message. The CSS code for this is shown below, where url-to-an-image-file is the URL to an image you have uploaded to Blogger or that is located elsewhere on the net.
/* Start Post Rearrangement Hiding CSS */
#main {
  background-image: url( url-to-an-image-file );
  background-repeat: no-repeat;
}
#Blog1 {
  visibility:hidden;
}
/* End Post Rearrangement Hiding CSS */
Then to show the posts, use the following script. The background image is removed here in case the blog post container is transparent, in which case the underlying container's background image would be visible behind the blog posts.
<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("main").style.backgroundImage = "none";
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->
Depending on the speed of a viewer's browser, the selected image will be displayed while the posts are being rearranged, followed by the posts appearing in the intended order.

September 11, 2012

King Bug Fix for Vulcan 3D Chess

While testing a prototype game save feature for Vulcan, I ran into a nasty little bug. I would move my king off of it's attack board, the program would start 'thinking', and then it would crash. The crash was at an assertion indicating that the program couldn't find my king anywhere on the board.

After much investigation, which among other things included rerunning the same move a zillion times and adding an ASCII print of the entire board at a couple of points just before the crash, the problem became apparent. I found that the program had 'imagined' that its queen had captured my king as part of it's 'thinking' process. From there, tracing back through a long chain of function calls turned up the bug. There seemed to be nothing to keep the program from considering moves where one of its pieces would capture the king. Adding an additional condition to an existing 'if' statement squashed the bug.

I've gotta say, I got lucky in the timing of finding this bug. It would have taken a lot longer to fix without having already implemented an ability to return to the game state just before the crash.