How can I add the typed.js plugin into a joomla module

Question

I really love the typed.js plugin which can be found here(http://www.mattboldt.com/demos/typed-js/). I really want to use it on the front page of a joomla webpage I am building. However, I have been unable to actually include it (Just the typing text along with the blinking cursor) by adding it to a custom module position that will display on the homepage. I have tried over and over to add it to my website and nothing ever works. How can I get this done? I've tried installing a few moudles that allow me to enter javascript directly in module position but nothing still works. Please help???

Answer 1

The best way to do this would probably be to build a small module. If you follow the tutorial from Joomla! Documentation it's not that hard, and it's a great way to get acquainted with Joomla extension development. If you need a headstart, take a look at this answer for a basic module with a similar purpose.

For a quicker solution, try using any of the Custom HTML modules available that allows you to insert any code without filtering, like Custom Advanced HTML or Flexi Custom Code.

Either way there are a couple of things to remember if you're using the example from the demo you mention in your question:

• The first line is probably not needed (<script src="jquery.js"></script>) because jQuery is usually loaded with Joomla. If not, include a valid path to jQuery.
• Make sure the second line points to the actual location of the file typed.js

• Joomla usually loads jQuery in noConflict mode, so you can't use $ directly. Replace $ with jQuery or wrap your code like this:

  (function( $ ) {
     // Your jQuery code here, using the $
  })( jQuery );
  

• Remember to add the CSS for the blinking cursor within <style> </style> tags.

• The script only types out the text, it's up to you to use CSS styling if you want to add the "terminal window" like the demo.

So basically, if you use a Custom HTML module (without filtering), you would need to add something like this:

<script src="path/to/typed.js"></script>
<script>
  jQuery(function($){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  }) ( jQuery);
</script>
<style>
.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; }
}
</style>
<div class="element"></div>

Answer 2

If you are using Joomla 3.x, you will want to reference this link first: https://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template

The simplest way is to edit the template's index.php. You'll want to add:

$doc = JFactory::getDocument();
$doc->addScript('/path/to/my/typed.js', 'text/javascript');

This will include the script tag on each joomla page.