Bummer! You must be logged in to access this page.

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 Mark Libario
Mark Libario
9,003 Points

Typed.js font help anyone?

Im trying to add some typed.js on my jumbotron.

I already have a pre-set font family for the one that's going to be typed, but everytime I apply the typed.js effects, it just changes the style to regular text.. I tried to add a class to the <p> so that the css will apply, but never worked.

Anyone? Thanks a bunch!!

 <div class="container-fluid main-content">

      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link active" href="#nutrition">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#nutrition">Longer nav link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>

      </ul>
      <h1 class="display-2 text-center"><strong>JVA Aesthetics </strong></h1>

 <!-- This is where the typing starts -->
      <div id="typed-strings">
        <p class="display-4 text-center">Challenge yourself to become a better version of you..</p>
      </div>
      <span id="typed"></span>
 <!-- This is where the typing ends -->

     </div>

Here's the CSS:

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

p.display-4{
  font-family: VT323;
}

Here's the JavaScript

document.addEventListener('DOMContentLoaded', function(){
        Typed.new('#typed', {
            stringsElement: document.getElementById('typed-strings')

        });
    });

I have the typed.js file saved as well on my document that was downloaded.

Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Hey Mark! It looks like your code matches up so the problem could be the order you are calling the external files (would need to see more of your code). I would suggest using the "inspect elements" feature in your browser to pinpoint exactly what is happening. From there you can see which style/external file is taking priority.

Zoran Marceta
Zoran Marceta
Courses Plus Student 175 Points

Hey, I just stumbled at same issue and figured out that you should put your class in span: <span id="typed" class="display-4 text-center"></span>