Forum Support

Shape 5
March 28, 2024, 06:55:11 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Typed Text not working  (Read 1376 times)
cebuman
Jr. Member
**
Offline Offline

Posts: 11



« on: 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
« Last Edit: October 29, 2017, 09:10:29 AM by cebuman » Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: October 24, 2017, 02:17:38 PM »

Code:
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.

Quote
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.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
cebuman
Jr. Member
**
Offline Offline

Posts: 11



« Reply #2 on: 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.)


Code:
<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.

Code:
$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 ...

Code:
<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 Smiley 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. Sad

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.


Code:
<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.

  
« Last Edit: October 29, 2017, 09:12:20 AM by cebuman » Logged
cebuman
Jr. Member
**
Offline Offline

Posts: 11



« Reply #3 on: November 01, 2017, 07:10:27 PM »

Its been a week and still no reply!

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #4 on: 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,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
cebuman
Jr. Member
**
Offline Offline

Posts: 11



« Reply #5 on: 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.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #6 on: 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
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.