0

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???

3

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>
  • Thank you so much, this worked perfectly. I have spent so much time trying to get this done. Please let me know if you have a website where I can make a donation. Thanks – Dwayne M Apr 7 '15 at 23:10
  • This worked well, but now the cursor is on a separate line instead of following at the end of the type sentences. How would I get the cursor to show on the same line?? Maybe change font color/size as well? Thanks – Dwayne M Apr 8 '15 at 19:45
  • 1
    got it after playing around a bit, just changed the div to a span... – Dwayne M Apr 8 '15 at 20:17
0

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.

  • You don't really need 'text/javascript' in this ;) – Lodder Apr 7 '15 at 21:19
  • Thanks so much for your response. How do I call the script inside of a custom html module position in joomla and where do I edit the words that I want to type? I am a basic javascript user and I see that the creater of this script has an installation code, just way too confusing..... – Dwayne M Apr 7 '15 at 21:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.