Typewriter effect not showing in top modules in mobiles.

dnapas · Post by **dnapas** » Fri Aug 25, 2023 6:18 pm

I have created a javascript script for typewriter effect.
It works fine on desktop pc and laptops, however, it can't work on the top two positions of the page, mobile phones.
That is, if I place it in the header, it doesn't work on mobile, while below positions it works normally.
There is some explanation for this.

Post by **AMurray** » Fri Aug 25, 2023 9:53 pm

More information required.

What Joomla version

What mobiles - iPhone or android or other?

If you could provide a link demonstrating what the problem is that would help and what are the top two positions - what template are you using?

Whatever "javascript for typewriter effect" is...? Is it a module? You need to create a module to place it in a module position.

Is it a limitation of the mobile itself, or the mobile browser?

This is a duplicate of the question asked here: viewtopic.php?f=727&t=1003578

dnapas · Post by **dnapas** » Sat Aug 26, 2023 4:56 am

The template can be downloaded from here, is free:
https://diablodesign.eu/free-joomla-tem ... ersity-104

System Information
Setting Value

PHP Built On Linux webhost4n 5.15.0-69-generic #76-Ubuntu SMP Fri Mar 17 17:19:29 UTC 2023 x86_64
Database Type mysql
Database Version 5.5.5-10.3.29-MariaDB-1:10.3.29+maria~xenial
Database Collation utf8_general_ci
Database Connection Collation utf8mb4_general_ci
PHP Version 7.4.33
Web Server Apache
WebServer to PHP Interface fpm-fcgi
Joomla! Version Joomla! 3.10.12 Stable [ Daraja ] 8-July-2023 15:18 GMT
Joomla! Platform Version Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

TYPEWRITER SENARIO IN A CUSTOM HTML MODULE OR HTML ADVANCED MODULE EXTENSION NOT WORKING IN THE TEMPLATE - POSITION 1 OR IN HEADER GENERALLY IN ANDROID MOBILES:

<!DOCTYPE html>
<html>
<head>
<title>Animated typing effect using typed js</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/1.1.4/ ... "></script>
</head>
<body>
<span class="write"></span>
</div>
<script type="text/javascript">
$(function(){
$(".write").typed({
strings: [
"THIS IS THE MODEL NOT SHOWING IN MOBILES POSITION 1 OR HEADER"
],
typeSpeed: 1,
loop: true
});
});
</script>
</body>
</html>

Post by **AMurray** » Sat Aug 26, 2023 6:21 am

Is the JS actually saving - or being stripped from the page by the article editor? You have to permit Script tags in the Text Filters in Global config.

I have several ideas, but not sure what would be relevant:

Check you're using the correct position name for your template. If it's called "top1" and you have several templates they may also have a "top1" - so make sure you're using the module position relevant to your active template.
It could also be that the specific module position is 'hidden' from displaying on smaller screens or mobile devices. (That is a responsive design feature, probably a setting in the template you're using)
Does your code work on Protostar (default template)?
Try your code with Joomla 4 (as 3.x is now out of support) with Cassiopeia.

I still don't see your site, showing the code you're using for this typewriter-text effect; we need to see your site with that code in action so we can also see if/why it doesn't work on mobile phones.

dnapas · Post by **dnapas** » Sat Aug 26, 2023 7:54 am

site address:

http://dnapas.sites.sch.gr/

module is in position 1 confirmed by template.

Post by **Per Yngve Berg** » Sat Aug 26, 2023 8:30 am

Work OK with the Opera Mobile browser.

dnapas · Post by **dnapas** » Sat Aug 26, 2023 9:35 am

Not with Chrome definitely...

dnapas · Post by **dnapas** » Sat Aug 26, 2023 1:46 pm

Sorry, it was inside the menu in mobile and i did not see it. But it does not serve too much there anyway...

dnapas · Post by **dnapas** » Sun Aug 27, 2023 6:45 am

I have difficulties to adjust the follow typewriter effect in the site. I have put it in a module and in position box from the template. It affects all the rest of the webpage javasripts and shows double instance above the footer!
--------------------------------------------------------------------------------------------------------------------------------------
ADDRESS:

http://dnapas.sites.sch.gr/

-----------------------------------------------------------
CODE:

<!DOCTYPE html>
<html>
<head>
<title>Animated typing effect using typed js</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/1.1.4/ ... "></script>
<style type="text/css">
.write{
font-size: 18px;
}
.container{
text-align: justify;
border: 15px solid brown;
border-radius: 10px;
margin: auto;
padding: 5px;
width: 350px;
height: 250px;
background-image: linear-gradient(black, green);
color: #FFFFFF
}

}
</style>
</head>
<body>
<div class="container">
<span class="write"></span>
</div>
<script type="text/javascript">
$(function(){
$(".write").typed({
strings: [
"This affects all the other javascripts in the page and appears double in a no nominated position down in the page..."
],
typeSpeed: 1,
loop: true
});
});
</script>
</body>
</html>

dnapas · Post by **dnapas** » Sun Aug 27, 2023 8:58 am

I rename the container with container_something and problem be solved. Sorry for the inconvinence...

The Joomla! Forum™

Typewriter effect not showing in top modules in mobiles.

Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Re: Typewriter effect not showing in top modules in mobiles.

Typewrite effect affects all the webpage

Re: Typewrite effect affects all the webpage