The layout has the two content blocks displayed one after the other. I use CSS to hide the secondary content and JavaScript to switch between the two. The trick came when working out the transition. We can't have it be too abrupt or the distraction level would be high. Luckily CSS provides us with a nice feature to fade the content blocks in/out ...
opacity
. True this property is CSS3, but some of the browsers already support it. Plus, on top of that most newer browsers at least provide their own proprietary alternative.I found the core of my transition script on Richard Rutter's blog (Onload image fades without Flash). The setup was a snap.
Of course, not all was bliss. I ran into a few problem with (drum roll please) IE.
First, the transition didn't work. For whatever reason, applying the opacity setting via JS had no affect. Turns out that IE seems to ignore the opacity setting when applied to an object that has no defined width and height [brianerror.net: Cross-browser BlendTrans Filter JavaScript]. Applying
height: 100%; width: 100%;
seems to solve the problem sufficiently without causing any collateral damage to the page design.Second, in IE7 any bolded text was becoming horribly distorted as the opacity was applied. It looks like IE7 is unable to accurately render the text if no background color is defined on an object to which opacity is applied, if that object contains bolded text, and if font-smoothing is turned on [jcxp.net forums: IE7 Beta 3 Download, Download!][microsoft connect: Textual Distortion with Microsoft Filters]. Applying a background color seems to solve this problem and has no detrimental affects, assuming there is no variable-colored background behind the object in question.