Rails spinoffs - Mar 2008 - $(el).show() not working when you use CSS to hide elements

Hi guys,

If I hide an element using CSS (display:none;) it seems I cannot show
the element using either;

 - $(''myEl'').show();
 - $(''myEl'').addClassName(''showElement'');

Where the CSS class ''showElement'' is basically display:block;

Does anyone know a way around this? It works if I add the CSS inline
like:

<div id="myEl" style="display:none;">

But I''d rather not have that cluttering my markup.

Thanks in advance,

Michael
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

http://www.prototypejs.org/api/element/show

Sadly, doesn''t look like there''s much you can do.
--
T.J. Crowder
tj / crowder software / com

On Mar 10, 6:08 am, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi guys,
>
> If I hide an element using CSS (display:none;) it seems I cannot show
> the element using either;
>
>  - $(''myEl'').show();
>  -
$(''myEl'').addClassName(''showElement'');
>
> Where the CSS class ''showElement'' is basically
display:block;
>
> Does anyone know a way around this? It works if I add the CSS inline
> like:
>
> <div id="myEl" style="display:none;">
>
> But I''d rather not have that cluttering my markup.
>
> Thanks in advance,
>
> Michael
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
<tjcrowder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>  http://www.prototypejs.org/api/element/show
>
>  Sadly, doesn''t look like there''s much you can do.
Explanation here:
http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks

//jarkko

--
Jarkko Laine
http://jlaine.net
http://odesign.fi

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

What I''ve taken to doing is using a classname like
''initially_hidden''
or something much shorter, and then taking advantage of the new  
document.observe wonderfulness to hide everything at dom:loaded.

	document.observe(''dom:loaded'',function(){
		$$(''.initially_hidden'').invoke(''hide'');
	});

This has the further practical advantage of not hiding things in a  
permanent way from the unscripted.

Walter

On Mar 10, 2008, at 10:40 AM, Jarkko Laine wrote:
>
> On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder  
> <tjcrowder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>>
>>  http://www.prototypejs.org/api/element/show
>>
>>  Sadly, doesn''t look like there''s much you can do.
>
> Explanation here:
> http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> //jarkko
>
> --
> Jarkko Laine
> http://jlaine.net
> http://odesign.fi
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks T.J and Jarko, that''s a bugger.

@Walter - yep...that''s what I''ve been doing with other
examples. I was
just wondering if there was another way around it.

Btw, I''ve never used invoke(). Cooooool!

Thanks guys,

Michael

On Mar 11, 2:09 am, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:
> What I''ve taken to doing is using a classname like
''initially_hidden''
> or something much shorter, and then taking advantage of the new
> document.observe wonderfulness to hide everything at dom:loaded.
>
>         document.observe(''dom:loaded'',function(){
>                
$$(''.initially_hidden'').invoke(''hide'');
>         });
>
> This has the further practical advantage of not hiding things in a
> permanent way from the unscripted.
>
> Walter
>
> On Mar 10, 2008, at 10:40 AM, Jarkko Laine wrote:
>
>
>
> > On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
> > <tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>  http://www.prototypejs.org/api/element/show
>
> >>  Sadly, doesn''t look like there''s much you can
do.
>
> > Explanation here:
> >http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> > //jarkko
>
> > --
> > Jarkko Laine
> >http://jlaine.net
> >http://odesign.fi
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hi all,

Good answer Walter, but I think we can go one better. This is a bit
off the top of my head, but initial tests show it working in FF2, IE6,
Opera 9, and Safari 3 beta (all on Windows):

1. Create a style class that initially hides elements and assign it to
the elements you want initially hidden. I''ll call it
"hidehack", e.g.:

<style>
.hidehack {
    display: none;
}
</style>

2. On DOM load, do this in an init function:

    var hackedElements;
    hackedElements = $$(''.hidehack'');
    hackedElements.invoke(''hide'');
    hackedElements.invoke(''removeClassName'',
''hidehack'');

(I haven''t checked whether it''s more efficient to use invoke
twice, or
to each() my way through them to make the two calls; instinct says
invoke.)

Now you''re free to call show() on any elements you want to show...
This seems a little cleaner than either having the elements shown
briefly on load, or putting inline "display: none" styles on them.

FWIW...
--
T.J. Crowder
tj / crowder software / com
Complete test page:
************
<html>
<head>
<style>
.blue {
	color:	blue;
}
.red {
	color:	red;
}
.hidehack {
	display:	none;
}
</style>
<script type="text/javascript"
src=''prototype.js''></script>
<script type="text/javascript">
function init()
{
	$(''btnGo'').observe(''click'', goForIt);
}
function goForIt()
{
    var hackedElements;

    alert(''Unhacking'');
    hackedElements = $$(''.hidehack'');
    hackedElements.invoke(''hide'');
    hackedElements.invoke(''removeClassName'',
''hidehack'');
    alert(''Trying to show the blue one'');
    $(''hidden2'').show();
}
document.observe(''dom:loaded'', init);
</script>
</head>
<body>
<div id=''hidden1'' class=''red
hidehack''>Initially hidden and red</div>
<div id=''shown1'' class=''red''>Initially
shown and red</div>
<div id=''hidden2'' class=''blue
hidehack''>Initially hidden and blue</
div>
<div id=''shown2''
class=''blue''>Initially shown and blue</div>
<input id=''btnGo'' type=''button''
value=''Go'' />
</body>
</html>
************

On Mar 10, 9:54 pm, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Thanks T.J and Jarko, that''s a bugger.
>
> @Walter - yep...that''s what I''ve been doing with other
examples. I was
> just wondering if there was another way around it.
>
> Btw, I''ve never used invoke(). Cooooool!
>
> Thanks guys,
>
> Michael
>
> On Mar 11, 2:09 am, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:
>
> > What I''ve taken to doing is using a classname like
''initially_hidden''
> > or something much shorter, and then taking advantage of the new
> > document.observe wonderfulness to hide everything at dom:loaded.
>
> >         document.observe(''dom:loaded'',function(){
> >                
$$(''.initially_hidden'').invoke(''hide'');
> >         });
>
> > This has the further practical advantage of not hiding things in a
> > permanent way from the unscripted.
>
> > Walter
>
> > On Mar 10, 2008, at 10:40 AM, Jarkko Laine wrote:
>
> > > On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
> > > <tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >>  http://www.prototypejs.org/api/element/show
>
> > >>  Sadly, doesn''t look like there''s much you
can do.
>
> > > Explanation here:
> >
>http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> > > //jarkko
>
> > > --
> > > Jarkko Laine
> > >http://jlaine.net
> > >http://odesign.fi
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Okay, but then consider the poor, the unscripted, yearning to breathe  
Ajax... If you hide something like this, then they never get to see  
it at all. I try to consider these poor folks at least a little,  
going for the "progressive enhancement" of adding Ajax later, but  
having everything work without it.

Walter

On Mar 10, 2008, at 8:09 PM, T.J. Crowder wrote:
>
> Hi all,
>
> Good answer Walter, but I think we can go one better. This is a bit
> off the top of my head, but initial tests show it working in FF2, IE6,
> Opera 9, and Safari 3 beta (all on Windows):
>
> 1. Create a style class that initially hides elements and assign it to
> the elements you want initially hidden. I''ll call it
"hidehack", e.g.:
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Mar 11, 12:40 am, "Jarkko Laine"
<jar...-k1O+Gnc6WpmsTnJN9+BGXg@public.gmane.org>
wrote:
> On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >  http://www.prototypejs.org/api/element/show
>
> >  Sadly, doesn''t look like there''s much you can do.
>
> Explanation
here:http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
It might be better to say that Prototype.js''s use of the CSS display
property sucks.

The display property has a side-effect that "hides" an element when
display is set to none.  Prototype.js uses that for its show() and
hide() functions.

What those functions don''t take into consideration is that there are
many other factors affecting whether an element is visible or not.
You might look at the visible function, which simply checks an
element''s style.display property - there are many ways to make an
element not visible such that visible returns true but the element
can''t be seen.  Consider also that elements have a visibility
property, which is quite independent of the display property.

It might be better to explain to the OP that the hide function sets an
element''s style.display property to ''none'' (the
equivalent of setting
style="display:none;" inline), which overrides how the display
property has been set by any other method.  The result is that the
element is removed from the document flow, it doesn''t take up any
space on the screen and is effectively "hidden".

The show function sets the element''s display property to
'''' (empty
string).  The element will then adopt a display value as if no inline
style had been set - i.e. it will adopt whatever display property
applies through CSS or inheritance.

If the CSS sets the property to ''none'', then the element will
still
not be visible (and the visible function will return true, even though
the element isn''t visible).


--
Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rob,

I would gladly take a look at your "solution" to determine if element
is *actually* visible. I think #show/#hide do their job well enough in
most of the cases. Element#visible on the other hand, could of course
be more robust - and is indeed not sufficient for certain cases
(though such need is a rare). I have made a patch for a little more
thorough #visible [1] to "respect" element''s ancestors (by
checking
their style.display value).

[1] http://dev.rubyonrails.org/ticket/10626

Best,
kangax

On Mar 10, 11:22 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org>
wrote:
> On Mar 11, 12:40 am, "Jarkko Laine"
<jar...-k1O+Gnc6WpmsTnJN9+BGXg@public.gmane.org> wrote:
>
> > On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >  http://www.prototypejs.org/api/element/show
>
> > >  Sadly, doesn''t look like there''s much you can
do.
>
> > Explanation
here:http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> It might be better to say that Prototype.js''s use of the CSS
display
> property sucks.
>
> The display property has a side-effect that "hides" an element
when
> display is set to none.  Prototype.js uses that for its show() and
> hide() functions.
>
> What those functions don''t take into consideration is that there
are
> many other factors affecting whether an element is visible or not.
> You might look at the visible function, which simply checks an
> element''s style.display property - there are many ways to make an
> element not visible such that visible returns true but the element
> can''t be seen.  Consider also that elements have a visibility
> property, which is quite independent of the display property.
>
> It might be better to explain to the OP that the hide function sets an
> element''s style.display property to ''none'' (the
equivalent of setting
> style="display:none;" inline), which overrides how the display
> property has been set by any other method.  The result is that the
> element is removed from the document flow, it doesn''t take up any
> space on the screen and is effectively "hidden".
>
> The show function sets the element''s display property to
'''' (empty
> string).  The element will then adopt a display value as if no inline
> style had been set - i.e. it will adopt whatever display property
> applies through CSS or inheritance.
>
> If the CSS sets the property to ''none'', then the element
will still
> not be visible (and the visible function will return true, even though
> the element isn''t visible).
>
> --
> Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Mar 11, 1:56 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Rob,
>
> I would gladly take a look at your "solution" to determine if
element
> is *actually* visible.
The code for doing that in a general, cross-browser case would be
extensive and likely unreliable, I don''t think it belongs in a general
purpose library.  Prototype.js''s visible function applies to a
specific case of how an element has been hidden, the trivial solution
is to call it something like ''isDisplayNone'', which is at
least closer
to what it actually does.

> I think #show/#hide do their job well enough in
> most of the cases.
Perhaps, but the actual implementation was not explained to the OP -
the offered link inferred that there is some fundamental flaw in the
display property, which there isn''t (or at least, the article did not
provide evidence of).  I was trying to point out that the limitation
is in the functions, not the property.

> Element#visible on the other hand, could of course
> be more robust - and is indeed not sufficient for certain cases
> (though such need is a rare). I have made a patch for a little more
> thorough #visible [1] to "respect" element''s ancestors
(by checking
> their style.display value).
Yes, I''ve played with inherited properties too and while that suits
for specific cases, I''ve never been happy that the results could be
used in a general purpose library.  I think the closest I''ve come is
to actually set CSS properties rather that directly modifying an
element''s style object, the code for which is somewhat longer (only
within the library function itself) but can lead to very much faster
execution where multiple elements are affected.

But that requires a different approach to toggling an element''s
display property.

> On Mar 10, 11:22 pm, RobG
<rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:
>
> > On Mar 11, 12:40 am, "Jarkko Laine"
<jar...-k1O+Gnc6WpmsTnJN9+BGXg@public.gmane.org> wrote:
>
> > > On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > >  http://www.prototypejs.org/api/element/show
>
> > > >  Sadly, doesn''t look like there''s much you
can do.
>
> > > Explanation
here:http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> > It might be better to say that Prototype.js''s use of the CSS
display
> > property sucks.
>
> > The display property has a side-effect that "hides" an
element when
> > display is set to none.  Prototype.js uses that for its show() and
> > hide() functions.
>
> > What those functions don''t take into consideration is that
there are
> > many other factors affecting whether an element is visible or not.
> > You might look at the visible function, which simply checks an
> > element''s style.display property - there are many ways to
make an
> > element not visible such that visible returns true but the element
> > can''t be seen.  Consider also that elements have a visibility
> > property, which is quite independent of the display property.
>
> > It might be better to explain to the OP that the hide function sets an
> > element''s style.display property to ''none''
(the equivalent of setting
> > style="display:none;" inline), which overrides how the
display
> > property has been set by any other method.  The result is that the
> > element is removed from the document flow, it doesn''t take up
any
> > space on the screen and is effectively "hidden".
>
> > The show function sets the element''s display property to
'''' (empty
> > string).  The element will then adopt a display value as if no inline
> > style had been set - i.e. it will adopt whatever display property
> > applies through CSS or inheritance.
>
> > If the CSS sets the property to ''none'', then the
element will still
> > not be visible (and the visible function will return true, even though
> > the element isn''t visible).
>
> > --
> > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

@Walter:  Absolutely, if your design expects that those elements will
be visible if the scripts don''t run, then of course your approach
makes more sense. I was thinking of the converse, things that really
_shouldn''t_ be shown unless the scripts run.

@All:  RobG raises good points, although I agree that for most
purposes, show() and hide() are "good enough".  I would suggest that
the statement in the docs that "Element.show *cannot* display elements
hidden via CSS stylesheets. Note that this is not a Prototype
limitation but a consequence of how the CSS display property
works." [1] could use a bit of reworking or elaboration, since of
course it *can* show elements, it just wouldn''t know which of the
various forms of visibility -- inline, block, etc. -- it should use. I
mean, if we really wanted, it could use a reasonable guess based on
the elements'' tagname (divs are blocks, spans are inline, etc.), but
for me that''s bloat and the job of the page author.  A note saying
"...because it sets style.display to '''' to trigger the
element''s
default visibility, but the default visibility would be ''none''
if
they''re hidden by CSS rules; use style.display =
''block'' or
style.display = ''inline'', etc., to show elements initially
hidden by
rule."

FWIW...
--
T.J. Crowder
tj / crowder software / com

[1] http://www.prototypejs.org/api/element/show

On Mar 11, 4:27 am, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org>
wrote:
> On Mar 11, 1:56 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Rob,
>
> > I would gladly take a look at your "solution" to determine
if element
> > is *actually* visible.
>
> The code for doing that in a general, cross-browser case would be
> extensive and likely unreliable, I don''t think it belongs in a
general
> purpose library.  Prototype.js''s visible function applies to a
> specific case of how an element has been hidden, the trivial solution
> is to call it something like ''isDisplayNone'', which is at
least closer
> to what it actually does.
>
> > I think #show/#hide do their job well enough in
> > most of the cases.
>
> Perhaps, but the actual implementation was not explained to the OP -
> the offered link inferred that there is some fundamental flaw in the
> display property, which there isn''t (or at least, the article did
not
> provide evidence of).  I was trying to point out that the limitation
> is in the functions, not the property.
>
> > Element#visible on the other hand, could of course
> > be more robust - and is indeed not sufficient for certain cases
> > (though such need is a rare). I have made a patch for a little more
> > thorough #visible [1] to "respect" element''s
ancestors (by checking
> > their style.display value).
>
> Yes, I''ve played with inherited properties too and while that
suits
> for specific cases, I''ve never been happy that the results could
be
> used in a general purpose library.  I think the closest I''ve come
is
> to actually set CSS properties rather that directly modifying an
> element''s style object, the code for which is somewhat longer
(only
> within the library function itself) but can lead to very much faster
> execution where multiple elements are affected.
>
> But that requires a different approach to toggling an element''s
> display property.
>
> > On Mar 10, 11:22 pm, RobG
<rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:
>
> > > On Mar 11, 12:40 am, "Jarkko Laine"
<jar...-k1O+Gnc6WpmsTnJN9+BGXg@public.gmane.org> wrote:
>
> > > > On Mon, Mar 10, 2008 at 11:59 AM, T.J. Crowder
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > >  http://www.prototypejs.org/api/element/show
>
> > > > >  Sadly, doesn''t look like there''s
much you can do.
>
> > > > Explanation
here:http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
>
> > > It might be better to say that Prototype.js''s use of the
CSS display
> > > property sucks.
>
> > > The display property has a side-effect that "hides" an
element when
> > > display is set to none.  Prototype.js uses that for its show()
and
> > > hide() functions.
>
> > > What those functions don''t take into consideration is
that there are
> > > many other factors affecting whether an element is visible or
not.
> > > You might look at the visible function, which simply checks an
> > > element''s style.display property - there are many ways
to make an
> > > element not visible such that visible returns true but the
element
> > > can''t be seen.  Consider also that elements have a
visibility
> > > property, which is quite independent of the display property.
>
> > > It might be better to explain to the OP that the hide function
sets an
> > > element''s style.display property to
''none'' (the equivalent of setting
> > > style="display:none;" inline), which overrides how the
display
> > > property has been set by any other method.  The result is that
the
> > > element is removed from the document flow, it doesn''t
take up any
> > > space on the screen and is effectively "hidden".
>
> > > The show function sets the element''s display property to
'''' (empty
> > > string).  The element will then adopt a display value as if no
inline
> > > style had been set - i.e. it will adopt whatever display property
> > > applies through CSS or inheritance.
>
> > > If the CSS sets the property to ''none'', then
the element will still
> > > not be visible (and the visible function will return true, even
though
> > > the element isn''t visible).
>
> > > --
> > > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---