Without changing anything else, I added the following to your style
declaration:
.box { width: 300px; } <-- this was yours
#closeme {width: 300px; height:400px; }
#closeme p {margin:0;padding:0;}
It seems the #closeme needs an explicit height because it can't
accurately compute the height of internal elements (that's a guess,
but at any rate, it's computing the internal height wrong when it
slides the block up).
Setting height on closeme fixes the problem where the last line is
chopped off.
To fix the "jumpy" effect when the paragraph starts to move, I set the
internal para's margin & padding to 0. Firefox automatically sets
paras with a 10px padding and IE automatically gives paras a 10px
margin, so setting both fixes it in both browsers.
I also fixed your DOCTYPE declaration, which referenced the wrong DTD
(should be http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd). That
actually fixed most of the above in Firefox, but not IE (and
validated, as well).
Hope that helps, good luck =]
On Feb 5, 6:32 pm, Serpico <gue...@generalstudio.ch> wrote:
> Hi,
>
> I'm experimenting with scriptaculous effets for a website I'm
> building. Since I got some problems, I built the simplest page I can
> imagine and tried to apply a slideup/slidedown effect, and the result
> even in this page is not good, the last part of the text keeps
> "appearing" at the end of the slidedown effect.
> Since it's not too long and complicated, I'm going to post the whole
> code so you can see the problem yourself:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
> <title>Test</title>
> <script src="js/prototype.js" type="text/javascript"></script>
> <script src="js/scriptaculous.js?load=effects" type="text/
> javascript"></script>
> <style>
> .box {
> width: 300px;}
>
> </style>
> </head>
> <body>
> <div class="box">
> <h2>Title <a
> onclick="Effect.toggle('closeme','slide')">(click here)
> </a></h2>
> <div id="closeme">
> <p>
> Lorem ipsum dolor sit amet,
> consectetur adipiscing elit. Mauris
> vitae libero. Cras mollis.
> Pellentesque arcu quam, accumsan ac,
> adipiscing sed, pulvinar et,
> nulla.
> Nulla ornare, augue in pretium
> sollicitudin, orci sapien
> porttitor massa, ut euismod erat nulla sit amet sem.
> Etiam orci nibh, pulvinar sed, dictum
> non, rutrum nec, nunc. <br /
>
> Nunc nisl justo, fermentum nec,
> pharetra sit amet, commodo eget,
> diam.
> Donec nisl. Sed congue, velit ut
> iaculis tincidunt, quam nulla
> aliquam eros, in pulvinar urna magna ullamcorper metus. <br />
> Pellentesque imperdiet. Ut arcu nunc,
> ultricies quis, lacinia at,
> imperdiet vitae, diam. Donec pulvinar lacinia nisl.
> </p>
> </div>
> </div>
> </body>
> </html>
>
> I don't see any fancy stuff here, it's just a plain simple page with a
> title and a paragraph, but I'm really disappointed to discover that
> even in a case like this scriptaculous doesn't behave like it should
> (or maybe I'm missing something).
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
