On Jul 1, 2011, at 6:39 AM, Sylvain Brohée wrote:
Hi all,
I am very new to script.aculo.us. I'd like to add a very simple
appear effect
on my web page with this simple code :
Blabla <div id="appear_tip" style="display:none; background:#C0C0C0;
left-
margin:30px; border:0px solid #333; "> MY TEXT THAT APPEAR
<a href='#' onclick="\$('appear_tip').hide(); return false;">hide</
a></div>
<a href='#' onclick=\"\$('appear_tip').appear(); return
false;">show</a>
Unfortunately doing that. I have a new line break between "blabla"
and "show"
when the text did not appear. I would like the blabla to be just
next to show.
This is fundamental HTML/CSS, nothing at all to do with Scriptaculous.
A DIV is a block-level tag, and it will always reserve space for
itself like this (clearing its neighbors left and right) unless you do
other things with CSS to prevent that.
But larger issue, if you are using a DIV inline within a run of text
like this, you had better ensure that there isn't a P wrapped around
the sibling text, because in that case you'll have a mess. The browser
will try to repair this complete wreck of a DOM, and absent any
guidance from you, it can choose any of a few different approaches: It
can close the P before the DIV starts, and re-open it after the DIV
ends, or it can move the DIV outside of the P, either at the beginning
or end of the parent P, probably other options, too.
If you want a nice tag that can go nearly anywhere, wrap your message
in a span rather than a div, and then use CSS to style that span as an
inline-block.
If you want the help text to float above the rest of the page, then
make sure that the nearest parent has position:relative and then
assign position:absolute to your span, change display from inline-
block to block, and give it a top/left to place it where you want it
to appear relative to the parent, and a positive z-index to take it
above the parent element in the stacking order.
Walter
You'll find a small example of my issue on :
http://rsat.bigre.ulb.ac.be/~sylvain/scriptaculous-1.png
(here blabla is "Enter the motif(s) :" and show is "Format
specifications"
which I would like on the same line. Otherwise, format specification
looks as
if it was the title of the textarea.
Thanks a lot for your help,
Regards,
Sylvain
--
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
.
--
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.
