Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

JavaScript Working on CodePen but not Locally or on GitHub Pages?

Hi everyone!

I have been working on a little project on CodePen for a day or two and all seems well...

I pulled the code down and took all the steps to getting it to a working example, i.e. adding the html, body and head tags etc. my issue lies in the fact that now all of a sudden the script I was using on CodePen does not seem to work...

Please take a look at the pen here, it is using bootstap 4 alpha 2 but as you will see on the pen all is well.

I have pushed the local code up to a public repo on GitHub to so people can see if they spot the error of my ways.

I have moved to using grunt but all that code seems to work well, all is getting compiled as I would expect.

I do however have a slight doubt that I have set up autoprefixer correctly :S

Please have a look at both links because the issue I am having is that on the pen you will notice that as you scroll down section of the site slowly glide up into place, on the local or GitHub Pages version this does not work, I simply can not see why....

Hope you can help

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

In your codepen, you have a come-in class on your <section> tags that are triggering the CSS animation. Your code in your github repo does not have this come-in class in the html, however it is in your minified css. If you just update your github repo with the html from codepen, it should work fine.

Craig Watson
Craig Watson
27,930 Points

Hi Kevin, thanks for the answer.

The 'come-in' class should be given to the element on scroll as it comes into view, this is the confusing thing. It seems like only half the Script is working when up on GitHub or locally:S

Craig

Craig Watson
Craig Watson
27,930 Points

I wonder if Andrew Chalkley or Dave McFarland would be able to help with this one as it has me completely lost on what is going on.

Kevin Korte
Kevin Korte
28,149 Points

Hey Craig,

You have a typo that isn't importing your script file at all. In your index.html you have <script scr="js/scripts.min.js"></script>. Should be src, I know you know that, just a simple typo.

It works after that.

Craig Watson
Craig Watson
27,930 Points

Hi Kevin,

Spotted that about an hour ago and really wish id checked to see if you had replied... lol

Thank you for taking the time to look through it for me!

Much appreciated

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

I cloned it an it runs ok on my machine. I can't see what "doesn't work".

Craig Watson
Craig Watson
27,930 Points

Hi Andrew,

Thank you for looking into it for me,

My problem was the script that adds the classes im-in and come-in to animate the sections on scroll. The current repo has the working version now as I for reasons beyond me on codepen the css worked fine but in reality it required me to swat the placement of the come-in and im-in classes with the initial declaration that translates the hp-section-slide 180px.

As with Kevin I really appreciate you taking the time to look into in for me I was spending a lot of time running over the grunt file because I have not used it before.

Just a note, loving the node.js course!!!

Craig