Avoiding The Flicker

A major part of gracefully degrading The Project is hiding blocks on a page load by Javascript. For example suppose I have a set of radio buttons. Each radio button has a block associated with it. A block’s visibility depends on whether its radio button is checked. The idea is that if Javascript is enabled then those blocks could toggle its visibility via script. If Javascript is disabled then although those blocks would not be able to toggle, they also would not be hidden in the first place thus still being visible to the user.

Like all things initially the this seem fairly straightforward. Just add an onLoad() event to the block I want to hide and when the event is fired (ie. when the page is loaded) hide the block:

$('#block-you-want-to-hide').load(function()
{
   $(this).hide();
});

And of course something is wrong. When the page loads the blocks I want to hide appear for a split second then gets hidden. In other words the blocks ‘flicker’:

… between the point of your HTML that is to be hidden, and the point where your JavaScript library has been completely included and then found the element(s) to hide, there is a possible discrepancy which will result in “jumping” pages; i.e. you will get a flicker temporarily showing the content, and then hiding it.

Naively I thought that JQuery’s ready() function would take of this but surprisingly that’s not the case.

Anyways here’s the hack / fix that I found:

  1. Create a Javascript anonymous function which appends a css file to the document’s <head> element 
    (function ()
{
   var headElement = document.getElementsByTagName('head')[0];
   var headExists = (headElement != null);
   if (headExists)
   {
      var cssLink = document.createElement('link');
      cssLink.rel = 'stylesheet';
      cssLink.type = 'text/css';
      cssLink.href = 'your-flicker-hack.css';
      headElement.appendChild(cssLink);
   }
}());
  2. The external css file sets the blocks you want to hide 
    div#block-you-want-to-hide-on-load
{
   display: none;
}

OK I won’t even pretend that I understand how the above works or even why it works. All I know is that it works. Period. Full Stop.

September 2, 2008 | Filed Under CSS, JQuery, Javascript | Leave a Comment 

All I Wanted Was A Dashed Line

The Project has this shopping cart component which displays all the current items in your cart and nicely displays all the totals in a formatted manner:

See that dashed line? It doesn’t look so great across browsers. In particular in IE6/7 the dashed line comes up a little short:

I was hard-coding that dashed line in the HTML. It looked like this:

<td class="total">---------------------</td>

So I played around with the number of ‘-’ so that it would look half decent across all browsers. But I wasn’t satisfied because I knew my ’solution’ wasn’t the right one. So I talked to The Designer and he suggested that instead of putting dashes just set the top border to dashed:

<td class="total" style="border-top: dashed 1px #000000"></td>

So damn obvious. And it works like a charm…

July 23, 2008 | Filed Under CSS | Leave a Comment