Rails spinoffs - Jun 2005 - flashing divs in IE with use of BlindUp and BlindDown

I''m having an issue with flashing divs in IE (firefox is fine and the
only other browser I''ve used)

My scenario is as follows.  I have 2 divs (initially hidden) and using
the BlindDown and BlindUp functions (possibly others) the divs flash
when starting to roll down in BlindDown (due to the Element.show call)
and also at the end of the BlindUp call (due to the Element.hide call)

I''ve provided a small snippet of ruby template code to show the issue
in IE.  Ignore the single/batch stuff, that''s just remnants from the
code I took this from.

Thanks

....

<%= javascript_include_tag ''prototype'' %>
<%= javascript_include_tag ''effects2'' %>

<script type="text/javascript">
var selected = ''''
function selectBatch()
{
  if (selected == ''single'')
Element.hide(''single'')

  selected = ''batch''
  new Effect2.BlindDown(''batch'')
}

function selectSingle()
{
  if (selected == ''batch'')
Element.hide(''batch'')

  selected = ''single''
  new Effect2.BlindDown(''single'')
}

function selectNone()
{
  if (selected != '''' || selected != ''none'')
Effect2.BlindUp(selected)

  selected = ''none''
}
</script>

Nav
<p>
<%= radio_button ''add'', ''type'',
''none'', {:onclick=>"selectNone()",
:checked => ''checked''} %> None
<%= radio_button ''add'', ''type'',
''batch'', {:onclick=>"selectBatch()"} %> Batch
<%= radio_button ''add'', ''type'',
''single'', {:onclick=>"selectSingle()"} %>
Single
</p>

<div id="batch" style="display:none">
Batch Section
</div>

<div id="single" style="display:none">
Single Section
</div>

Here''s a link showing the problem with the IE (version 6 specifically)
flashing issue I mentioned earlier...

http://sample.redlinesoftware.com/flash_test.html


On 6/24/05, Andrew Kaspick <akaspick@gmail.com>
wrote:
> I''m having an issue with flashing divs in IE (firefox is fine and
the
> only other browser I''ve used)
> 
> My scenario is as follows.  I have 2 divs (initially hidden) and using
> the BlindDown and BlindUp functions (possibly others) the divs flash
> when starting to roll down in BlindDown (due to the Element.show call)
> and also at the end of the BlindUp call (due to the Element.hide call)
> 
> I''ve provided a small snippet of ruby template code to show the
issue
> in IE.  Ignore the single/batch stuff, that''s just remnants from
the
> code I took this from.
> 
> Thanks
> 
> ....
> 
> <%= javascript_include_tag ''prototype'' %>
> <%= javascript_include_tag ''effects2'' %>
> 
> <script type="text/javascript">
> var selected = ''''
> function selectBatch()
> {
>   if (selected == ''single'')
Element.hide(''single'')
> 
>   selected = ''batch''
>   new Effect2.BlindDown(''batch'')
> }
> 
> function selectSingle()
> {
>   if (selected == ''batch'')
Element.hide(''batch'')
> 
>   selected = ''single''
>   new Effect2.BlindDown(''single'')
> }
> 
> function selectNone()
> {
>   if (selected != '''' || selected !=
''none'') Effect2.BlindUp(selected)
> 
>   selected = ''none''
> }
> </script>
> 
> Nav
> <p>
> <%= radio_button ''add'', ''type'',
''none'', {:onclick=>"selectNone()",
> :checked => ''checked''} %> None
> <%= radio_button ''add'', ''type'',
''batch'', {:onclick=>"selectBatch()"} %> Batch
> <%= radio_button ''add'', ''type'',
''single'', {:onclick=>"selectSingle()"} %>
Single
> </p>
> 
> <div id="batch" style="display:none">
> Batch Section
> </div>
> 
> <div id="single" style="display:none">
> Single Section
> </div>
>

looks like this is caused by IE not liking a width or height of 0

change your BlindDown to:

Effect.BlindDown = function(element) {
  $(element).style.height   = ''1px'';
  $(element).style.overflow = ''hidden'';
  Element.show(element);
  new Effect.Scale(element, 100,
    { scaleContent: false,
      scaleX: false,
      scaleMode: ''contents'',
      scaleFrom: 0
    }.extend(arguments[1] || {})
  );
}

the only change here is a start height of ''1px'' instead of 0
also change the start of Effect.Scale.setDimensions from:

setDimensions: function(width, height) {
    if(this.options.scaleX) this.element.style.width = width +
''px'';

to:

setDimensions: function(width, height) {
    width = Math.round(width) || 1;
    height = Math.round(height) || 1;
    if(this.options.scaleX) this.element.style.width = width +
''px'';

That should remove the IE blinking.
The effect still doesn''t look the same in Firefox and IE, but
I''m
going where no computers are for the weekend so someone else will have
to look at that.

Juul
marcjc@gmail.com

On 6/30/05, Andrew Kaspick <akaspick@gmail.com>
wrote:
> Here''s a link showing the problem with the IE (version 6
specifically)
> flashing issue I mentioned earlier...
>
> http://sample.redlinesoftware.com/flash_test.html
> On 6/24/05, Andrew Kaspick <akaspick@gmail.com> wrote:
> > I''m having an issue with flashing divs in IE (firefox is fine
and the
> > only other browser I''ve used)

Can this "fix" proposed by Marc be integrated into the main codebase?

Again the links are...

for the original problem (IE only)....
http://sample.redlinesoftware.com/flash_test.html

and using an updated effects.js with the changes...
http://sample.redlinesoftware.com/flash_test2.html

The rendering in firefox though still looks way off compared to IE in this case.

Thanks,
Andrew

On 6/30/05, Marc Juul Christoffersen <marcjc@gmail.com>
wrote:
> looks like this is caused by IE not liking a width or height of 0
> 
> change your BlindDown to:
> 
> Effect.BlindDown = function(element) {
>   $(element).style.height   = ''1px'';
>   $(element).style.overflow = ''hidden'';
>   Element.show(element);
>   new Effect.Scale(element, 100,
>     { scaleContent: false,
>       scaleX: false,
>       scaleMode: ''contents'',
>       scaleFrom: 0
>     }.extend(arguments[1] || {})
>   );
> }
> 
> the only change here is a start height of ''1px'' instead
of 0
> also change the start of Effect.Scale.setDimensions from:
> 
> setDimensions: function(width, height) {
>     if(this.options.scaleX) this.element.style.width = width +
''px'';
> 
> to:
> 
> setDimensions: function(width, height) {
>     width = Math.round(width) || 1;
>     height = Math.round(height) || 1;
>     if(this.options.scaleX) this.element.style.width = width +
''px'';
> 
> That should remove the IE blinking.
> The effect still doesn''t look the same in Firefox and IE, but
I''m
> going where no computers are for the weekend so someone else will have
> to look at that.
> 
> Juul
> marcjc@gmail.com
> 
> On 6/30/05, Andrew Kaspick <akaspick@gmail.com> wrote:
> > Here''s a link showing the problem with the IE (version 6
specifically)
> > flashing issue I mentioned earlier...
> >
> > http://sample.redlinesoftware.com/flash_test.html
> 
> > On 6/24/05, Andrew Kaspick <akaspick@gmail.com> wrote:
> > > I''m having an issue with flashing divs in IE (firefox is
fine and the
> > > only other browser I''ve used)
>