I'm confused about how to use typejs CDN:
I put the CDN in the head of the HTML document and the scripts at the very end of the body but I get this error: (I think the script is unable to find the CDN!) Why?! Am I used the incorrect order to use the CDN or the script?
Uncaught TypeError: Typed.new is not a function at HTMLDocument.
Here is the code :
I have the CDN at the very beginning of the head tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
And the script at the very end of the body:
<script src="typing.js"></script>
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
<!-- Styles -->
<link href="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/page.min.css" rel="stylesheet">
<link href="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="http://thetheme.io/thesaas/assets/img/apple-touch-icon.png">
<link rel="icon" href="http://thetheme.io/thesaas/assets/img/favicon.png">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
</head>
<body data-aos-easing="ease" data-aos-duration="1500" data-aos-delay="0" data-gr-c-s-loaded="true" class="granim-light">
<a class="btn btn-xs btn-round btn-success" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Buy Now</a>
</div>
</nav><!-- /.navbar -->
<!-- Header -->
<header class="header text-white h-fullscreen overflow-hidden" style="background-image: linear-gradient(45deg, #667eea 0%, #764ba2 100%);">
<canvas class="constellation" data-radius="0" width="1536" height="763"></canvas>
<div class="container position-static">
<div class="row align-items-center h-100">
<div class="col-lg-7">
<h1 class="display-4 fw-500">
<!-- Built For <span class="typeit fw-400 pl-2" data-typing="Startups, Entrepreneurs, Makers, Developers, SaaS, WebApp" data-type-speed="80">We</span><span class="typed-cursor">|</span> -->
Built For <span class="type fw-400 pl-2"></span><span class="typed-cursor">|</span>
</h1>
<p class="lead mt-5 mb-7 mb-md-9 w-80">
<strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template powered by Bootstrap 4
</p>
<a class="btn btn-xl btn-round btn-success w-200 mr-3 px-6 d-none d-md-inline-block" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Buy Now — $39</a>
<a class="btn btn-xl btn-round btn-outline-light w-200 px-6" href="http://thetheme.io/thesaas/#section-demo">Explore Demos</a>
</div>
<div class="col-lg-5 d-none d-lg-block">
</div>
</div>
<div class="d-none d-lg-block sample-blocks">
<a href="http://thetheme.io/thesaas/block/cover.html#block-2" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-1.jpg" alt="..." data-aos="fade-up" data-aos-delay="0" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/team.html#block-6" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-2.jpg" alt="..." data-aos="fade-up" data-aos-delay="200" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/cover.html#block-5" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-3.jpg" alt="..." data-aos="fade-up" data-aos-delay="400" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/blog.html#block-1" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-4.jpg" alt="..." data-aos="fade-up" data-aos-delay="600" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/feature.html#block-8" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-5.jpg" alt="..." data-aos="fade-up" data-aos-delay="800" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/feature.html#block-13" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-6.jpg" alt="..." data-aos="fade-up" data-aos-delay="1000" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/shop.html#block-4" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-7.jpg" alt="..." data-aos="fade-up" data-aos-delay="1200" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/feature-text.html#block-3" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-8.jpg" alt="..." data-aos="fade-up" data-aos-delay="1400" data-aos-offset="0">
</a>
<a href="http://thetheme.io/thesaas/block/pricing.html#block-6" target="_blank">
<img class="shadow-6 aos-init aos-animate" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/block-9.jpg" alt="..." data-aos="fade-up" data-aos-delay="1700" data-aos-offset="0">
</a>
</div>
</div>
</header><!-- /.header -->
<div id="popup-funfact" class="popup p-4 w-300" data-animation="slide-up" data-position="bottom-left" data-autoshow="3000" data-autohide="15000">
<h6>Fun Fact</h6>
<p class="mb-0">This is the <mark>most popular</mark> technology template on Themeforest. <a href="https://themeforest.net/category/site-templates/technology?sort=sales" target="_blank">See Proof</a>.</p>
</div>
<!-- Scripts -->
<script type="text/javascript" async="" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/f.txt"></script><script async="" src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/analytics.js.download"></script><script src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/page.min.js.download"></script><div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>
<script src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/script.js.download"></script>
<style type="text/css" data-typed-js-css="true">
.typed-cursor{
opacity: 1;
}
.typed-cursor.typed-cursor--blink{
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
</style>
<script src="typing.js"></script>
<script src="./TheSaaS — Responsive Bootstrap SaaS, Startup & WebApp Template_files/f(1).txt"></script>
</body>
</html>And here is the script:
document.addEventListener('DOMContentLoaded', function(){
Typed.new('.type', {
strings: ["neighbor", "family", "team", "community"],
stringsElement: null,
// typing speed
typeSpeed: 60,
// time before typing starts
startDelay: 600,
// backspacing speed
backSpeed: 20,
// time before backspacing
backDelay: 500,
// loop
loop: true,
// false = infinite
loopCount: 5,
// show cursor
showCursor: false,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
});
});
While I've never heard of this library, let alone used it, it is immediately apparent from the docs that you're using it wrong: it should be
new Typed(...)(usingTypedas a constructor), notTyped.new(...)as you are. TheTypedfunction object clearly has nonewproperty , which explains the error you're getting.If the problem had been that the library hadn't loaded, as you seem to think, then the error would have been different. Then
Typedwould beundefined, and the reported error would have been about trying to access a property ofundefined. The actual error means thatTypedexists but thenewproperty isn't a function (such errors often mean the "not a function" value isundefined). The distinction may seem subtle but such reasoning can often help narrow down the source of an error.