Jump to content
GreenSock

jstafford

CSSRulePlugin not finding external stylesheet, works fine with internal stylesheet

Recommended Posts

 

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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet"/>
</head>
 
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
 
 
</div>
 
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<div id="box">
 
<ul id="menu" class="nav navbar-nav navbar-right">
<li><a href="#" class="link">Link</a></li>
<li><a href="#" class="link">Link</a></li>
<li><a href="#" class="link">Link</a></li>
<li><a href="#" class="link">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<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>
</div>
</div>
</nav>
 
 
 
 
</body>
 
<script> 
$(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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

   

post-38415-0-16360500-1445687505_thumb.png

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×