Wednesday, October 17, 2007

Spry Slide Not Working - text disappears

Today I was trying to add a simple Spry slide effect to some text on one of my web sites, however the text dissapears in IE7. I managed to cut it down to the most basic code where the problem occurs and it turns out to be a table cell. I took the slide example and cut it down until it doesn't work. This code works fine in Firefox. If you remove the table tags, it also works in IE7. However, with the table tags present, the text doesn't show up at all in IE7 (although the background color does slide up and down). This is using Spry 1.6 prerelease.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Slide Effects Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<script src="../../includes/SpryEffects.js" type="text/javascript"> </script>
<style type="text/css">
.animationContainer

{
height: 220px;
}
.demoDiv

{
background-color: #CCC;
height: 200px;
overflow: hidden;
}
.hideInitially

{
visibility: hidden;
}
</style>
</head>

<body>
<table><tr><td>
<form method="get" action="grow_sample.html"><input type="button" onclick="slide_hidden.start();" value="Slide Example" /></form>
<div class="animationContainer">

<div class="demoDiv hideInitially" id="example5">
<p><strong>Example - Slide from 0% to 100% in 2 seconds</strong>
<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiam nonumy eirmod tempor invidunt ut labore et dolore magnaaliquyam erat, sed diam voluptua. At vero eos et accusam etjusto duo dolores et ea rebum. Stet clita kasd gubergren, nosea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<script type="text/javascript">

var slide_hidden = new Spry.Effect.Slide('example5', {duration: 500, from: '0%', to: '100%', toggle:true});
</script>
</td></tr></table>

</body>
</html>

It turns out, if you put the <script> tag below the </table>, everything works fine.

Wacky...

By the way, also if you set the .hideInitially div to "display: none" instead of "visibility:hidden", the same error occurs (in IE7 only). In my opinion, display: none would be much more useful than visibility: hidden. I was able to work around it by using two Spry slide effects - one that only happens when the page loads and initially closes the text (setting it to display:none) and the other that the user clicks on to open and close the text after that.

Hopefully they'll get these issues fixed in the next release of Spry.

5 comments:

obay said...
This comment has been removed by the author.
obay said...

thanks for your post! this is what i did.. put the <script> after the <table>, and created a second Spry.Effect.Slide() that hides the <div>

var slide1_slide = new Spry.Effect.Slide('slide1', {duration: 500, from: '0%', to: '100%', toggle: true});

(new Spry.Effect.Slide('slide1', {from: '0%', to: '0%', toggle: false})).start();

my_passion48@yahoo.com said...

how ur blog comes in google search. my typed my whole blogspot url even then my site was not shown by google. how did u do that.plz tell me.
my_passion48@yahoo.com

my_passion48@yahoo.com said...

its not working at all wat ever.... thanks

Rick Noel said...

Great piece of information about moving script code below closing table tag. Resolved the disappear div in IE7. Thanks for taking the time to share!