The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

Typedjs not working


Hi!
I added via "yarn add typedjs" the lib.

In my index.html I copied the javascript code at <body> end:

<script>
var typed = new Typed("#kt_typedjs_example_1",
{
strings: ["First sentence.", "Second sentence.", "Third sentense", "And some longer sentence"],
typeSpeed: 30
});
</script>

Terminal says that "Typed" is not found. Therefore I believe it's not included in the web pack. How to check that?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Thanks a lot, it works. My mistake was finally including the typed.js in footer.



Hi,

Great! If you need any further help please let us know.

All the best with your projects.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

For your info - I looked at DEMO1: LINK https://preview.keenthemes.com/metronic8/demo1/landing.html

I have seen in the landing.js that you use typedjs there too.
Even in the demo its not working.

My Browser is Safari. Using all latest versions



Hi,

You do not need to run yarn add typedjs command since typedjs is already included in the build and you just need to include the typedjs bundle js in your page right after scripts.bundle.js include in the page footer:


<script
src="/metronic8/demo1/assets/plugins/custom/typedjs/typedjs.bundle.js"></script>


Then you will need to run your custom JS code in onDOMContentLoaded content loaded event:

<script>
// On document ready
KTUtil.onDOMContentLoaded(function() {
var typed = new Typed("#kt_typedjs_example_1",
{
strings: ["First sentence.", "Second sentence.", "Third sentense", "And some longer sentence"],
typeSpeed: 30
});
});
</script>

Regards.


I am using Product Version: 8.2.0.

Sorry, but how to include a plugin bundle then? I follow your tutorials but maybe I didn't get it.

  1. I added the package via yarn add typedjs

  2. I added the element in my site from the tutorial

  3. I added


simply at the end of my element.

  1. I compiled web pack again by "npm run build --demo25"

=> its not working


not sure why I can not copy code here with the identifies but I used the code from the tutorial page (the link you shared)



Hi,

May I know which version are you using? Can you try to use the latest version of Metronic v8.2.0?

Typed.js is already included in the Metronic package. You can check it here and to use it just include a plugin bundle in your page.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(