Typewriter effect not showing in top modules in mobiles.
Moderators: ooffick, General Support Moderators
Forum rules
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Typewriter effect not showing in top modules in mobiles.
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.
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.
Last edited by imanickam on Sun Aug 27, 2023 12:08 pm, edited 2 times in total.
Reason: Merged the topic with the topic f=727&t=1003597. In the future, please do not create multiple topics for the same issue/question as it is against the forum rules to create multiple topics for the same issue/question.
Reason: Merged the topic with the topic f=727&t=1003597. In the future, please do not create multiple topics for the same issue/question as it is against the forum rules to create multiple topics for the same issue/question.
- AMurray
- Joomla! Exemplar
- Posts: 9747
- Joined: Sat Feb 13, 2010 7:35 am
- Location: Australia
Re: Typewriter effect not showing in top modules in mobiles.
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
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
Regards - A Murray
General Support Moderator
General Support Moderator
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Re: Typewriter effect not showing in top modules in mobiles.
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>
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>
- AMurray
- Joomla! Exemplar
- Posts: 9747
- Joined: Sat Feb 13, 2010 7:35 am
- Location: Australia
Re: Typewriter effect not showing in top modules in mobiles.
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:
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.
Regards - A Murray
General Support Moderator
General Support Moderator
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
- Per Yngve Berg
- Joomla! Master
- Posts: 30945
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: Typewriter effect not showing in top modules in mobiles.
Work OK with the Opera Mobile browser.
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Re: Typewriter effect not showing in top modules in mobiles.
Not with Chrome definitely...
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Re: Typewriter effect not showing in top modules in mobiles.
Sorry, it was inside the menu in mobile and i did not see it. But it does not serve too much there anyway...
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Typewrite effect affects all the webpage
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>
--------------------------------------------------------------------------------------------------------------------------------------
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>
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jul 31, 2023 2:06 pm
Re: Typewrite effect affects all the webpage
I rename the container with container_something and problem be solved. Sorry for the inconvinence...