Hi, thanks for the reply.
I have got the module to work, but I had to mess around with the default.php template file a little. As well as change the example code you gave to get it to work correctly.
This is what I ended up with:....(don't pay attention to the inline css, but it's handy to show others what can be done.)
<div>
<div class="typedtext" style="height:60px;font-family: 'Open Sans', sans-serif;">
<div class="t1 s5_typedstring_desktop">
<p><span style="font-size:20px;color:blue;">We help you achieve the best outcome</span></p>
<p><span style="font-size:12px;color:red;">We help you achieve the premier outcome</span></p>
<p><span style="font-size:8px;color:green;">We help you achieve the most excellent outcome for your project</span></p>
</div>
<div>
<span id="t1" class="s5_typedstring_desktop" style="white-space:pre-wrap;"></span>
</div>
</div>
<div style="height:100%">
<h1 class="s5_typedstring_mobile s5_pc_center">We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>
</div>
</div>
I had to add a div class (div class="typedtext") and combine the two sections needed for the desktop display to work properly, then add a separate div for the mobile display. This was because in the mobile layout it still showed the blinking curser above the H1 text.
In the default.php file I had to add the new div class .typedtext to get the correct display on a mobile screen.
$doc->addStyleDeclaration('.s5_typedstring_mobile {display:none;}
@media screen and (max-width: 1006px){ .typedtext {display:none;}.s5_typedstring_mobile {display:block;}}
The last thing I had to change was ...
<span id="t1" class="s5_typedstring_desktop" style="white-space:pre-wrap;"></span>
the 'wrap' was missing from pre-wrap, this cause the text to overflow the container for the module when assigned to a narrow position, right (position 7) for example.
I added the 2 height styles, the first one to stop the module jumping up and down as the typed text flowed down onto a new line because the text was longer than the width of the module. The second one to give the mobile module the correct height for the H1 text as without it, it overflowed the bottom of the module container.
One last comment, you do not mention it in your documents, but the module needs to be published to a 'none used' position, I put mine in 'debug' but it should work fine in any custom position, 'user99' for example. Just publish it on all pages. And also, the sample code above needs to be entered into an article or custom module.
I know this is a FREE
module, and as such you have no real obligations, but please please improve your documentation for it. It's a cool module but getting it to work properly out of the box like most Joomla extensions is likely to be beyond the scope of many novice/basic users. I think this could make them believe your other products are also non functioning or difficult to use, which is not good for your otherwise good reputation.
UPDATE
I installed this module into a production site with a more sophisticated template and it's inline script seems to conflict with other modules on the site. Including the templates own drop down menu function.
This renders the typed text module unusable for me.
I don't know if this is relevant, but it inserted the script into the same set of tags as the acymailing script that was already there.
<script type="text/javascript">
if(typeof acymailing == 'undefined'){
var acymailing = Array();
}
acymailing['NAMECAPTION'] = 'Name';
acymailing['NAME_MISSING'] = 'Please enter your name';
acymailing['EMAILCAPTION'] = 'E-mail';
acymailing['VALID_EMAIL'] = 'Please enter a valid e-mail address';
acymailing['ACCEPT_TERMS'] = 'Please check the Terms and Conditions';
acymailing['CAPTCHA_MISSING'] = 'The captcha is invalid, please try again';
acymailing['NO_LIST_SELECTED'] = 'Please select the lists you want to subscribe to';
var s5_typedtext_hide_div_holder;
var s5_typedtext_hide_div = document.getElementsByTagName("DIV");
for (var s5_typedtext_hide_div_y=0; s5_typedtext_hide_div_y<s5_typedtext_hide_div.length; s5_typedtext_hide_div_y++) {
s5_typedtext_hide_div_holder = s5_typedtext_hide_div[s5_typedtext_hide_div_y].className;
if (s5_typedtext_hide_div_holder.indexOf("-s5_typedtext") > 0) {
s5_typedtext_hide_div[s5_typedtext_hide_div_y].style.display = "none";
}}
jQuery(document).ready(function(){ var typed = new Typed('#t1', {
stringsElement: '.t1',
typeSpeed: 20,
backSpeed: 20,
startDelay: 1000,
loop: true,
loopCount: Infinity,
});});
</script>
UPDATE 1
This is the error code in chromes dev tools
Uncaught TypeError: Cannot read property 'tagName' of null
at t.value (typed.min.js:sourcemap:10)
at new t (typed.min.js:sourcemap:10)
at HTMLDocument.<anonymous> ((index):113)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
I think this is what is causing the conflicts with the other module and the menu.