Hi, i''ve been experimentating with dynamicCSS.js [1] to hide content only if JavaScript is enabled. It works pretty well and fires before onload to avoid the flash of visible content. Now i''m wondering if there is a Prototype way of doing this. [1] http://www.bobbyvandersluis.com/articles/dynamicCSS.php My main problem is that Prototype functions like Element.toggle() do not work on elements that were used together with the dynamically created styles. Best Regards, Dirk Eschler -- Dirk Eschler <mailto:dirk.eschler-hi6Y0CQ0nG0@public.gmane.org> http://www.krusader.org
The reason for this is because if the element.style.display and element.style.visibility are not always visible via JS calls. This means you can not probe elements that use class names and inline styles for their default state. After JS is used to alter the state of display, it then becomes a readable attribute (I don''t know why). Toggle attempts to avoid this issue by not probing the object at all. Toggle assumes that the element will be visible by default and sets style.display = "none" as the first action. It also keeps an array of the state of all objects toggle has touched. Since it assumes items are visible the first time, the stored state is corrupt. Therefore, to use toggle the element must be visible the first time it is called. I know of no work around. Toggle could be changed to attempt a style look up, however then toggle''s behavior will be inconsistent between JS touched and non-touched JS elements. -Andrew Martinez -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Dirk Eschler Sent: Thursday, May 25, 2006 1:38 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: [Rails-spinoffs] Hide content before page load Hi, i''ve been experimentating with dynamicCSS.js [1] to hide content only if JavaScript is enabled. It works pretty well and fires before onload to avoid the flash of visible content. Now i''m wondering if there is a Prototype way of doing this. [1] http://www.bobbyvandersluis.com/articles/dynamicCSS.php My main problem is that Prototype functions like Element.toggle() do not work on elements that were used together with the dynamically created styles. Best Regards, Dirk Eschler -- Dirk Eschler <mailto:dirk.eschler-hi6Y0CQ0nG0@public.gmane.org> http://www.krusader.org _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
To correct myself: toggle doesn''t maintain an array state of visibility
(this was from another JS library I used)
I was digging deeper into how toggle works and I forgot to check this function:
visible: function(element) {
return $(element).style.display != ''none'';
Which is what prototype''s toggle uses to decide if an element should be
hidden or not. Technically speaking, even if style.display is not readable,
"none" != "" thus this should return visible and attempt to
hide the object.
In the case stated two emails ago, I would assume dynamicCSS.js is setting
display to some value. However that would mean that toggle would evaluate
correctly. It is not so one of two things is happening.
1) dynamicCSS.js is setting visibility and not display
or
2) Something else is going on, like dynamicCSS.js is setting some other
attribute you wouldn''t expect or possibly the parent? (far fetched)
I''m not familiar with dynamicCSS.js (or whatever it is) so I can only
speculate.
Either way, if you use CSS to hide an item by default, you will have to unhide
it with JS the first time to properly use toggle. I just always use
element.style.display ="dispVal" and avoid this problem. Rarely is
there a situation where a toggle function works better.
-Andrew Martinez
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Martinez, Andrew
Sent: Thursday, May 25, 2006 2:03 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] Hide content before page load
The reason for this is because if the element.style.display and
element.style.visibility are not always visible via JS calls. This means you can
not probe elements that use class names and inline styles for their default
state. After JS is used to alter the state of display, it then becomes a
readable attribute (I don''t know why).
Toggle attempts to avoid this issue by not probing the object at all. Toggle
assumes that the element will be visible by default and sets style.display =
"none" as the first action. It also keeps an array of the state of all
objects toggle has touched. Since it assumes items are visible the first time,
the stored state is corrupt. Therefore, to use toggle the element must be
visible the first time it is called.
I know of no work around.
Toggle could be changed to attempt a style look up, however then
toggle''s behavior will be inconsistent between JS touched and
non-touched JS elements.
-Andrew Martinez
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Dirk Eschler
Sent: Thursday, May 25, 2006 1:38 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Hide content before page load
Hi,
i''ve been experimentating with dynamicCSS.js [1] to hide content only
if
JavaScript is enabled. It works pretty well and fires before onload to avoid
the flash of visible content. Now i''m wondering if there is a Prototype
way
of doing this.
[1] http://www.bobbyvandersluis.com/articles/dynamicCSS.php
My main problem is that Prototype functions like Element.toggle() do not work
on elements that were used together with the dynamically created styles.
Best Regards,
Dirk Eschler
--
Dirk Eschler <mailto:dirk.eschler-hi6Y0CQ0nG0@public.gmane.org>
http://www.krusader.org
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> The reason for this is because if the element.style.display and > element.style.visibility are not always visible via JS calls. Thismeans> you can not probe elements that use class names and inline styles for > their default state. After JS is used to alter the state of display,it> then becomes a readable attribute (I don''t know why).That is partly correct. JS cannot access the attributes if they were set using a <style> block or an external stylesheet. If you set them via inline styles (div style="display: none") it can. There must be some way to get at it otherwise, but I haven''t ever found one that works in all browsers. I wish the browser makers would fix this, so if you look at element.style you get all of the attributes, whether they were applied via css, inline style, or javascript. But I doubt they will. Greg
Here is a test of the display attribute. Apparently using inline styles will
make the display style initially visible via JS.
-Andrew Martinez
<<checkDisplay.html>> -----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Martinez, Andrew
Sent: Thursday, May 25, 2006 2:20 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] Hide content before page load
To correct myself: toggle doesn''t maintain an array state of visibility
(this was from another JS library I used)
I was digging deeper into how toggle works and I forgot to check this function:
visible: function(element) {
return $(element).style.display != ''none'';
Which is what prototype''s toggle uses to decide if an element should be
hidden or not. Technically speaking, even if style.display is not readable,
"none" != "" thus this should return visible and attempt to
hide the object.
In the case stated two emails ago, I would assume dynamicCSS.js is setting
display to some value. However that would mean that toggle would evaluate
correctly. It is not so one of two things is happening.
1) dynamicCSS.js is setting visibility and not display
or
2) Something else is going on, like dynamicCSS.js is setting some other
attribute you wouldn''t expect or possibly the parent? (far fetched)
I''m not familiar with dynamicCSS.js (or whatever it is) so I can only
speculate.
Either way, if you use CSS to hide an item by default, you will have to unhide
it with JS the first time to properly use toggle. I just always use
element.style.display ="dispVal" and avoid this problem. Rarely is
there a situation where a toggle function works better.
-Andrew Martinez
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Martinez, Andrew
Sent: Thursday, May 25, 2006 2:03 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] Hide content before page load
The reason for this is because if the element.style.display and
element.style.visibility are not always visible via JS calls. This means you can
not probe elements that use class names and inline styles for their default
state. After JS is used to alter the state of display, it then becomes a
readable attribute (I don''t know why).
Toggle attempts to avoid this issue by not probing the object at all. Toggle
assumes that the element will be visible by default and sets style.display =
"none" as the first action. It also keeps an array of the state of all
objects toggle has touched. Since it assumes items are visible the first time,
the stored state is corrupt. Therefore, to use toggle the element must be
visible the first time it is called.
I know of no work around.
Toggle could be changed to attempt a style look up, however then
toggle''s behavior will be inconsistent between JS touched and
non-touched JS elements.
-Andrew Martinez
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Dirk Eschler
Sent: Thursday, May 25, 2006 1:38 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Hide content before page load
Hi,
i''ve been experimentating with dynamicCSS.js [1] to hide content only
if
JavaScript is enabled. It works pretty well and fires before onload to avoid
the flash of visible content. Now i''m wondering if there is a Prototype
way
of doing this.
[1] http://www.bobbyvandersluis.com/articles/dynamicCSS.php
My main problem is that Prototype functions like Element.toggle() do not work
on elements that were used together with the dynamically created styles.
Best Regards,
Dirk Eschler
--
Dirk Eschler <mailto:dirk.eschler-hi6Y0CQ0nG0@public.gmane.org>
http://www.krusader.org
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On 5/25/06, Gregory Hill <Gregory_Hill-l9nu40+TWxQ@public.gmane.org> wrote:> JS cannot access the attributes if they were > set using a <style> block or an external stylesheet.You can. See Element.getStyle() The problem with making an element visible, when it was hidden by setting display: none in a stylesheet is, that calculating the proper value for the display property is rather complicated and time consuming. You would have to find the applicable style definitions for an element, sort them by specifity, go backwards through them until you get to a state where the effective display value is not "none". You would would need something like Dean Edward''s CSS parser as used in his IE7 script. Martin
> On 5/25/06, Gregory Hill <Gregory_Hill-l9nu40+TWxQ@public.gmane.org> wrote: > > JS cannot access the attributes if they were > > set using a <style> block or an external stylesheet. > > You can. See Element.getStyle()Ah... I forgot about that; I was thinking of before I found prototype when I was trying to figure it out on my own.> The problem with making an element visible, when it was hidden by > setting display: none in a stylesheet is, that calculating the proper > value for the display property is rather complicated and time > consuming.That''s right, that''s what I was thinking of. There''s so many little caveats with Javascript sometimes I get them confused. Greg
Am Donnerstag, 25. Mai 2006 20:19 schrieb Martinez, Andrew: [...]> Either way, if you use CSS to hide an item by default, you will have to > unhide it with JS the first time to properly use toggle. I just always use > element.style.display ="dispVal" and avoid this problem. Rarely is there a > situation where a toggle function works better.Thanks for all your answers. Basically i don''t want to use dynamicCSS.js. I''d appreciate to handle the following situations completely with Prototype (without document.write and the flickering caused by the onload event if the elements are hidden by default): 1) <div id=''foo''>foo</div> - If JavaScript is enabled "foo" is shown. - If JavaScript is disabled "foo" is hidden. 2) <div id=''foo''>foo</div> <a id=''bar''>bar</a> - If JavaScript is enabled "foo" is hidden and can be toggled via "bar". - If JavaScript is disabled "foo" is shown and bar is hidden. Is there an easy way to do this in Prototype? Best Regards, Dirk Eschler -- Dirk Eschler <mailto:dirk.eschler-hi6Y0CQ0nG0@public.gmane.org> http://www.krusader.org