CSSRulePlugin not finding external stylesheet, works fine with internal stylesheet

jstafford · October 24, 2015

The codepen below works and shows how scaleX : 0 hides the underline (I will later reveal when each menu item is hovered.

My problem is when I move this css to an external stylesheet, the rule is undefined and it can't tween a null target.

/*START OF INDEX.HTML*/

<!DOCTYPE html>

<head>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

<li><a href="#">Action</a></li>

<li><a href="#" >Another action</a></li>

<li><a href="#" >Something else here</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</body>

$(window).load(function() {

alert("window is loaded");

var rule = CSSRulePlugin.getRule(".navbar-default .navbar-nav > li > a:before"); //get the rule

TweenMax.set(rule, {cssRule:{scaleX:0.5}});

});

</script>

</html>

/* END OF INDEX.HTML*/

/*MAIN.CSS*/

.navbar-default .navbar-nav > li > a:before {

background-color: #000000;

content: "";

height: 3px;

position: absolute;

bottom: 0;

left: 0;

width: 100%;

}

When I moved the css to an internal stylesheet it worked fine (I guess this is what Codepen is evaluating to). CSS, JavaScript, and DOM should load by window.onload, so I am confused why an external stylesheet is not available to the CSSRulePlugin

See the Pen GpQYyo by jstafford (@jstafford) on CodePen

GreenSock · October 24, 2015

Worked fine for me when I tried it locally. I wonder if maybe you've got a bad link somewhere or if bootstrap is causing issues (I removed boostrap for my test). You're not loading the CSS from a different domain or anything right?

jstafford · October 24, 2015

Thank you so much for your response Jack. I tried this at home and at work with the same code above (revised above to include external maxcdn and cloudflare links) with same result. It doesn't work for me (ScaleX : 0 does not work and I see the black underline on all menu itmes). I even tried this without bootstrap. I am at a dead end here and really don't want to do a navbar with just CSS3 transitions and want to rely on GSAP.

PointC · October 24, 2015

I tried this locally as well and can confirm that the CSSRulePlugIn doesn't seem to set the pseudo element when the stylesheet is external (internal worked fine). Whether this has something to do with bootstrap or not - who knows?

As Jonathan mentioned in your other post about this problem, pseudo elements can be a bit tricky as you're finding out.

As I mentioned in the other post - rather than fight this uphill battle with pseudo elements and extra plug-ins you can create the same effect by appending a div to each of those <li> elements.

I forked your pen and switched those :before elements to an appended div with the same CSS. Now GSAP can animate/set any of those underline elements without the extra CSSRulePlugin.

See the Pen OyvPeL by PointC (@PointC) on CodePen

jstafford · October 24, 2015

Ah Yes! Thanks PointC. Your codepen had the dependency wrong on the codepen, but once fixed your code worked perfectly. I will take yours and Jonathan's advice and stay away from pseudoelements for now.

jstafford · October 24, 2015

Ah Yes! Thanks PointC. The Tweenmax dependency was a little off , but once fixed it worked great. Thank you so much! I will stay away from pseudoelements for now.

Create an Account

Sign In

CSSRulePlugin not finding external stylesheet, works fine with internal stylesheet

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

HTML5 / JS

Learning

Support

Our Company