Hi,
> $$(".dealerAddress").invoke("hide");
> takes too long because a very large page structure is loading, and
> there are many dealer addresses, so my page shows everything, then
> hides it, when it loads. Ew.
Of course. If you don't hide it via markup, the odds are very high
it'll show before the JavaScript runs to hide it.
There was a discussion of this here a few months back; if you search
the group you should find it.
There are a couple of options:
* Use a class to hide them at load, then remove that class to show.
This still requires visiting each element to remove the class.
* Include "display: none" in your dealerAddress class, then remove it
from that style rule on page load. This is likely to be much faster.
For the latter, there is an array of styleSheet objects[1]
(document.styleSheets), each of which contains an array of rules
(cssRules on some browsers, rules on IE), each of which has a style
member like the one on individual elements -- which is read/write. For
example, here's some code that makes the first style sheet's first
rule's font-weight rule "bold":
var styleSheet, rules, rule;
styleSheet = document.styleSheets && document.styleSheets[0];
rules = styleSheet && (styleSheet.cssRules || styleSheet.rules);
if (rules) {
rule = rules[0];
if (rule) {
rule.style.fontWeight = 'bold';
}
}
> (P.S. jQuery handles this situation without issue...)
Not for nothing, but that reads *really* sarky.
[1] https://developer.mozilla.org/En/DOM/Stylesheet
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Jan 26, 6:06 pm, kenxle <kenstcl...@gmail.com> wrote:
> Here's the problem I'm running into:
>
> $$(".dealerAddress").invoke("hide");
> takes too long because a very large page structure is loading, and
> there are many dealer addresses, so my page shows everything, then
> hides it, when it loads. Ew.
>
> To fix this, I put .dealerAddress{display:none;} in my CSS style
> sheet. However, when Prototype runs its show/hide functions (I'm using
> "toggle"), it only seems to be adding the attribute <...
> style="display:none"> or removing it. Which means that my style sheet
> takes back over when it removes the attribute, and the tag ends up
> never showing.
>
> I fixed it by putting my style declaration inline in the tag, as
> Prototype does, but I find this solution hackish and obtrusive. Why
> doesn't Prototype toggle from <... style="display:none"> to <...
> style="display:[inline||block]">? Wouldn't this solve my problem, as
> the inline style declaration would override the style sheet
> declaration?
>
> If so, I'd like to propose it as an update. Discussion or alternate
> solutions welcome.
>
> Thanks.
>
> (P.S. jQuery handles this situation without issue...)
--
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-scriptacul...@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.
