Shape 5

Joomla Free Extensions => Typed Text - Free => : cebuman October 23, 2017, 04:52:35 PM



: Typed Text not working
: cebuman October 23, 2017, 04:52:35 PM
Hi,
I downloaded your new typed text module but cannot find out how to get it to work. Your site mentions a plugin and setting the parameters there, but there is no installed plugin, just a module. In the settings for the module there is no place to enter the text I want etc. If I enter something in the ID box it strips out the html.

I tried entering your example text in an article but that did not work either.

I think there is also a problem with the module in general, because when I published it to a position and chose to display the module title, there was also nothing shown, although the template did assign space for the module, but there was just white space.

Your instructions are also not clear. I am not a novice Joomla user, but this module just seems to have missing items.

I checked the HTML output for the page and I do see a reference to the typed JS file in the head.

I am testing this on my localhost with J3.7  and the default template.

Hope you can help.

Regards, Brendan


: Re: Typed Text not working
: jonahh October 24, 2017, 02:17:38 PM
:
I downloaded your new typed text module but cannot find out how to get it to work. Your site mentions a plugin and setting the parameters there, but there is no installed plugin, just a module. In the settings for the module there is no place to enter the text I want etc. If I enter something in the ID box it strips out the html. 

Ah sorry about that it should say module. We were going to make it a plugin but ended up as a module. In the ID box you will be entering an ID no HTML. This ID will go in the custom code that we give as an example here:
 https://www.shape5.com/documentation/Joomla/Extensions/S5-Typed-Text

Notice in #3 you see "typed1" this is the ID that we created for the text in the code section. You can name the IDs whatever you want. Also on the page with the typed text you want to publish the module with that ID in it.

I think there is also a problem with the module in general, because when I published it to a position and chose to display the module title, there was also nothing shown, although the template did assign space for the module, but there was just white space.

Correct the module only outputs the script itself to run the text that you enter where ever you desire on your page. For example on our demo we put it inside a custom HTML module that shows at the top of the page.


: Re: Typed Text not working
: cebuman October 24, 2017, 03:18:55 PM
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.

  


: Re: Typed Text not working
: cebuman November 01, 2017, 07:10:27 PM
Its been a week and still no reply!



: Re: Typed Text not working
: jonahh November 02, 2017, 11:08:09 AM
Oh I'm sorry I skimmed and didn't realize you had an issue down near the bottom. Can you please post a URL where its not working? I will then take a first hand look.

Thanks,


: Re: Typed Text not working
: cebuman November 02, 2017, 06:49:45 PM
Hi,
I have had to disable the module for now as it interferes with the site too much.

I will set up a blank site with the same template I am using, hopefully it will generate the same problems.

I will post here when that is done.
Probably tomorrow night.


: Re: Typed Text not working
: jonahh November 06, 2017, 01:17:14 PM
Ok sounds good, login info to the backend would really help me asses the issue too. You can just PM it to me. Thanks