Script.aculo.us - Effect.Appear display: and background: solutions

Bart — Mon, 18 Sep 2006 10:57:00 -0500

There’s bit of a bug with Effect.Appear and IE. There’s a discussion open on it here.

Basically there are 2 issues discussed with Effect.Appear:

doesn’t work if the display: property is not set to ‘none‘
if the :background property is not set, the text is bolded while appearing, then switches to the chosen weight

The obvious remedy to both 1) and 2) is to set display: none; and background: #hex; before calling Effect.Appear. The problem with 2) occurs when you’re background is an image.

For my use, I needed to repeatedly call Effect.Appear using the Rails AJAX method periodically_call_remote. I’ve setup the following JavaScript function to handle 1) and 2). It can be used as a one time call before calling Appear, or repeated calls as in my use. See the quote fading in after a few seconds on the w2wwp implementation of my Simple CMS Rails app.

=> RHTML
  :complete => "myAppear('myDiv', '#ccc')" 

=> JavaScript
  function myAppear( mydiv, bckgrd)
  { 
    el = document.getElementById(mydiv); 
    el.style.background = bckgrd; 
    el.style.display = 'none'; 
    new Effect.Appear(mydiv);
  }

Bart G. Dev...: Script.aculo.us - Effect.Appear display: and background: solutions

Script.aculo.us - Effect.Appear display: and background: solutions