Error - rules[i].selectorText is undefined

[KingScooty]

Just tried this JSS script out to try and make some jquery hover functions a little bit more streamlined with the CSS styles already set.

I seem to be getting the following error:

rules[i].selectorText is undefined

At first i thought it was because i was referencing an element that didn't exist, but that's now not the case.

var linksHoverColour = jss('#links li a:hover').get()['color'];

Am i using the code correctly?

[dvtng]

The usage looks correct. Are you able to provide a bit more info? What browser? Is it a <style> or <link> stylesheet? Would be great if you could show me the actual CSS too and I can try to debug for you.

[dvtng]

Actually I think I may have found the cause. Certain @rules in the CSS create rules without selectorText, so I added an additional check to make sure it first exists. I've updated jss.js - let me know if this resolves your issue.

[KingScooty]

Cheers for the speedy response!
Hmm. Getting the following error now:

A parameter or an operation is not supported by the underlying object" code: "15
[Break On This Error] rules = sheet.cssRules || sheet.rules;
Line 153.

I'm pretty sure i haven't done anything out of the ordinary.
Still using the following lines:

var linksColour = $("#links li").css("color");
var linksHoverColour = jss('#links a:hover').get()['color'];    

$("#links li a").hover(function() {
    $(this).parent().css("color", linksHoverColour);
},
function() {
    $(this).parent().css("color", linksColour);
});

I know i can easily just set the colours again in the JS file, but pulling them from the CSS file is much more streamlined - especially when the design colours still need a lot of tweaking :)

The other reason is becuase i have:

#links li:before { content: "★"; } 

Which i want to light up when the child < a>Link< /a> content is hovered on.

---

Debug info:

Using < link > stylesheet.
Firefox 4.0 with latest Firebug.

[dvtng]

Thanks for the detailed information.

There could be two problems here:

First, it could be that the external stylesheet has not finished loading by the time your code executes. This could be the case if you're using jQuery's $(document).ready instead of window.onload - I know it's not ideal, but could you try using window.onload to see if it solves the problem?

Second, a known issue is with trying to access stylesheets loaded from a different domain (or protocol). However, this should give a "security error" rather than the one you reported.

I hope that using window.onload will prevent the error. If so, I will work on a proper stylesheet onload solution.

[KingScooty]

Hmm now this is interesting!
When i read your reply, i would have said that window.onload would fix the problem straight away. Especially because the css file is in the same directory as the html document and embedded using link.

HOWEVER...

I encased the required code within window.onload as seen here:

$(window).load(function(){  

    var linksColour = $("#links li").css("color");
    var linksHoverColour = jss('a:hover').get()['color'];   

    $("#links li a").hover(function() {
        $(this).parent().css("color", linksHoverColour);
    },
    function() {
        $(this).parent().css("color", linksColour);
    });

});  

And i am now getting the following error in firebug:

Security error" code: "1000
[Break On This Error] rules = sheet.cssRules || sheet.rules; 

Google Chrome developer tools throws this error:

Uncaught TypeError: Cannot read property 'length' of null

I am testing this on a local web environment (MAMP PRO).

[dvtng]

It looks like you cannot read CSS stylesheets loaded locally. I find it odd that this restriction applies to files served from a web server running locally as well - are the CSS files being served by apache on localhost?

[KingScooty]

Yeah, the CSS files are being served by Apache on localhost.

[BlackMagic]

I had the same problem reading a local stylesheet. My JavaScript code for traversing the stylesheet returned undefined and quit when it encountered a rule starting with an ampersand: @Keyframes.

I don't know any way around this problem.

[BlackMagic]

The answer to the problem is to put all CSS rules that begin with @ at the end of each CSS style sheet. Probably put a zombie rule before the start of the @rules. That way, when you're looking for a real rule you'll find it before you reach .zombie and the @rules.

.rule1 {whatever}
.rule2 {whatever}
.zombie{font-weight:bold;}
@Keyframes, etc.