Slide Oddity

Question

Hi, I'm brand new to Spry and am trying to add a simple slide
effect to a short view / detail list page. The detail div is empty
and set to display: none in the stylesheet. display: hidden still
shows the top border and about a line break worth of space in IE,
so that doesn't seem like a viable option. Since the div is
initially set to be invisible I have to set it to block in order
for the effect (and the detail div) to be seen although I'm
confident that is causing it to show for a split second before the
spry effect takes place. I looked at the effects demo page and
noticed in the source it says nested divs are required for the
slide effect to work properly.
The strangest issue I've run into is that if I put anything,
even a space, in between the opening and closing detail div, it no
longer works in Firefox but IE handles it without a problem. Which
leads me to wonder how to go about nesting another div in there if
a space is going to break it. Is there something else I need to add
to my css? Might there be an issue with Cold Fusion? Would the
browser being forced into quirks mode have anything to do with it?
We're using fusebox and the header file used in the getDetails fuse
has opening html, head and body elements... I know that's bad
practice although we're not using xhtml or strict dtds so I'm not
sure if that might be part of the problem.
Thanks in advance for any suggestions!
Sean
Test
Page
truncated ajax code:
if (pageRequest.readyState == 4) {
var obj = document.getElementById(objectID);
obj.innerHTML = pageRequest.responseText;
obj.style.display = "block";
new Spry.Effect.Slide(obj,{duration: 1000,from: '0%',to:
'100%'});
css:
.listingDetail {
display: none;
clear:both;
width: 604px;
background-color: #D7CAA1;
border-top: 1px solid #660F0F;
CFML:
<div id="detail_#listingid#"
class="listingDetail"></div>

Answer 1

Hello,
The CSS allow through 2 different properties to hide an
element in page. These are the visibility and display. However even
the final effect is most of time the same there is a crucial
difference between these properties. The visibility will leave the
element in the current page flow and will switch between visible
and hidden. The display instead is removing the element from the
page flow if the value none is used and will put it back when the
element should be displayed as a box.
When the element is simply invisible we can compute the
width, height and other properties. When the element is
display:none these values are no longer computed correctly.
Therefore I advise you, when you try to animate any element that
are initially invisible please use the visibility: hidden attribute
to hide.
The Slide Effect has couple of bugs and I think you hit one.
We fixed into the new Spry 1.5 we just released for preview most of
the known bugs. I advise you to try to use this new version
http://labs.adobe.com/technologies/spry/preview/.
In case you need more help you should give us a link to your
page as is difficult to debug page layouts and visual animations
without effectively seeing the problem.
Cristian