As it says in the documentation...
- If a string is passed as the CSS selector, the selector must be
identical to the one within the CSS.
This is a limitation of the current implementation. It's not as if
Fx.Morph creates an element identical to the one you want to morph,
reads it's computed style, and then morphs your element to that; It
just reads the rules from the exact rule that matches the string you
passed in... hence the current regular expression, matching the
selector exactly.
While your suggestion to change the regular expression would help your
situation, it's not very useful outside of that. Cascading rules
still won't work, nor will multiple declarations. This is why we
limited the functionality like we did.
We suggested long ago that any selectors to be used with morph should
be declared separately from your other styles. We might work on a way
to alleviate this limitation for MooTools 1.3, but for now, that's
just how it is.
On Oct 14, 2008, at 4:28 AM, Daybreaker wrote:
I have the same issue.
I'm using a stylesheet definition like:
body.page-main #realms a:link,
body.page-results #realms a:link,
.realmsLink_normal {
color: #666;
background: #f8f8f8;
}
body.page-main #realms a:hover,
body.page-results #realms a:hover,
.realmsLink_hover {
color: black;
background: #ffe280;
}
But Fx.CSS of MooTool 1.2 can't find the selector text due to the same
reason of the above article.
I also had to change
if (!selectorText || !selectorText.test('^' + selector + '$'))
to
if (!selectorText || !selectorText.test('\.' + selector + '$'))
, and it worked.
I think this implementation should be aware of more various
situations. In this case, sepearting each selectors by comma and
testing them independently seems to be correct.
ps. The reason why I combine :hover pseudo-class and normal class is
to do a "gradual" fallback when javascript is disabled.
On 9월1일, 오후3시46분, muniom <[EMAIL PROTECTED]> wrote:
If anyone is interested I solved this by editing the mootools Fx.CSS
class.
search: function(selector){
if (Fx.CSS.Cache[selector]) return
Fx.CSS.Cache[selector];
var to = {};
Array.each(document.styleSheets, function(sheet, j){
var href = sheet.href;
if (href && href.contains('://') && !
href.contains(document.domain)) return;
var rules = sheet.rules || sheet.cssRules;
Array.each(rules, function(rule, i){
if (!rule.style) return;
var selectorText =
(rule.selectorText) ?
rule.selectorText.replace(/^\w+/, function(m){
return m.toLowerCase();
}) : null;
//if (!selectorText || !
selectorText.test('^' +selector+ '$'))
return;
if (!selectorText || !
selectorText.test('\.' +selector+ '$'))
return;
Element.Styles.each(function(value,
style){
if (!rule.style[style] ||
Element.ShortStyles[style]) return;
value =
String(rule.style[style]);
to[style] = (value.test(/
^rgb/)) ? value.rgbToHex() : value;
});
});
});
return Fx.CSS.Cache[selector] = to;
}
Note the commented out line which changes the prefix of searches.
With a bit of css massaging I was able to get my script to work
again :)
