Jquery and Codepen

1

Hello All,

I’m having an issue with Jquery not working in Codepen.io. I am trying to get the H1 tags to shake, but it’s not working.

2

Did you add jQuery in your settings? It won’t work by default until you selected it.

1 Like
3

I did i added Jquery and Jquery UI

4

I think you’re missing an event. It needs to know what action is required for applying the effect.
It worked when I changed your code to this:

$(document).ready(function(){                     
  $("h1").click(function() {
    $("h1").effect("shake");
  });
});

There’s surely a way to have it happen when it loads. Just look up the jQuery UI documentation.

1 Like
5

On the freecodecamp Jquery section it would shake when the page loads. is there an event I can add to this code to have it shake with out hovering over it?

6

I may be wrong but I think you were trying to use a feature of Bootstrap.
addClass adds a class, not an effect.

7

The animations comes from a library called Animate.css,

You have to import that as well. Here’s a CDN (maybe Codepen has a shortcut in Quick add, but I’m not sure:)

  • Link tag:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  • CDN url:
    https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
2 Likes
8

remove click()

$(document).ready(function(){

$("h1").effect("shake");

});

is that what you want to see?

9

Marmiz, thank you that resolved my issue.