#103 ✓invalid
treetrouble

Effect.BlindDown not working with display:inline

Reported by treetrouble | October 14th, 2008 @ 08:51 PM



<script type="text/javascript" src="/jsinclude/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="/jsinclude/effects.js"></script>

<style>
.description,
.extended_description
{
  display:inline;
}
.extended_description_toggle
{
	margin-top:20px;
}
</style>

<script type="text/javascript">
toggleDescription = function()
{
  element = $('extended_description');
  if (element.visible()) {
    new Effect.BlindUp(element, {});
    $('extended_description_toggle').update('show full description +');
  } else {
    element = $('extended_description');
    new Effect.BlindDown(element, {scaleMode:'contents'});
    $('extended_description_toggle').update('hide full description -');
  }
}
</script>

<div class="description">this is the description preview</div>
<div style="display:none;" class="extended_description" id="extended_description">this is the extended description. this is the extended description. this is the extended description. this is the extended description. this is the extended description.</div>

<div class="extended_description_toggle"><a onclick="toggleDescription()" id="extended_description_toggle">show full description +</a></div>

Hello

The BlindDown/BlindUp effects in the above code don't work (tested in Safari 3 and Firefox 3 both on windows XP). It functions as though show() and hide() are being called on the element instead of the effect. When I get rid of "display:inline" from the css style, it works (although the layout is then not the way it should be)

Thanks!!

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages