JQuery loads fine on CodePen, not on my browser

motleyrue · April 24, 2019, 3:16pm

Maybe I am missing some code? I have the snippets inside the JS window and everything works fine. It’s not loading once I move the coding inside of my HTML under tags and test on my browser. I’ve been troubleshooting but no luck.

Can anyone help?

ttps://codepen.io/motleyrue/pen/WWydmQ

Tirjasdyn · April 24, 2019, 3:23pm

I don’t use Jquery too often but it seem like you are missing the document ready around you code:

$(document).ready(function(){
YOUR CODE HERE
  });

motleyrue · April 25, 2019, 7:22am

Thanks. This works fine in the Codepen. Not so much in my GitHub page which I’m loading in Chrome. hmmm

Tirjasdyn · April 25, 2019, 2:13pm

can you post a link to the github repo? Have you linked all your libraries in the html file?

motleyrue · April 26, 2019, 11:15am

Sure. Heres the repo.

github.com

beerfolio/beerfolio.github.io/blob/master/index.html

<!doctype html>
<html>
	<style>
		html, body {
  position: fixed;
  font-family: roboto, sans-serif;
  width: 100%;
  height: 100%;
  background: white;
    counter-reset: section;
  height: 100vh;
  align-items: center;
  color: black;
}
h1 {
  width: 100%;
  position: fixed;
  margin: 1vh; 
}
h2::before {

This file has been truncated. show original

lasjorg · April 26, 2019, 12:16pm

The opacity is being added to the elements but you didn’t set a starting opacity in the CSS.

It is however not working for the <i> element, not sure why the .last() is working on Codepen but not the Github page. If you are only going to have one icon inside the h1 then you can just change the selector to $('h1 > i').

$('h1 > i').delay(400).animate({'opacity':'1'},600);

motleyrue · April 26, 2019, 12:39pm

Thats what I get for working across both CodePen and GitHub. Opacity: 0 was in CodePen. All is working now. Thanks!