I am having a small issue of getting animated typed text to work using couchcms
The original code is below without any couchcms tags integrated
HTML code
JS CODE
Below is the code with the couchcms tags integrated
HTML CODE
JS CODE
I got it working by moving the js code into the index.php but the issue I got now is the text that is typed out is appearing as one line instead of seperate lines
The code below is what is being outputted, it should look like the commented out code
UPDATE: I just got it working with the following code
The original code is below without any couchcms tags integrated
HTML code
- Code: Select all
<h1>Computer Repair in Devizes</h1>
<h3>Solutions For <span class="element"></span></h3>
<a href="#about" class="active">About Us</a>
<a href="#contact">Contact Us</a>
JS CODE
- Code: Select all
//Type js for text animation
var element = $(".element");
$(function() {
element.typed({
strings: ["E-Mail Troubleshooting", "Hardware Upgrades", "Virus Removal", "Networking" ],
typeSpeed: 100,
loop: true,
});
});
Below is the code with the couchcms tags integrated
HTML CODE
- Code: Select all
<h1><cms:show slide_main_heading/></h1>
<h3><cms:show slide_sub_heading/> <span class="element"></span></h3>
<a href="<cms:show button_one_link/>" class="active"><cms:show button_one_text/></a>
<a href="<cms:show button_two_link/>"><cms:show button_two_text/></a>
JS CODE
- Code: Select all
//Type js for text animation
var element = $(".element");
$(function() {
element.typed({
strings: [
"<cms:show_repeatable 'slides'><cms:show slide_typed_text /></cms:show_repeatable>"
],
typeSpeed: 100,
loop: true,
});
});
I got it working by moving the js code into the index.php but the issue I got now is the text that is typed out is appearing as one line instead of seperate lines
The code below is what is being outputted, it should look like the commented out code
- Code: Select all
//strings: ["E-Mail Troubleshooting", "Hardware Upgrades", "Virus Removal", "Networking" ],
- Code: Select all
strings: [
"E-Mail TroubleshootingHardware UpgradesVirus RemovalNetworking"
],
- Code: Select all
<script>
//Type js for text animation
var element = $(".element");
$(function() {
element.typed({
strings: [
"E-Mail TroubleshootingHardware UpgradesVirus RemovalNetworking"
],
//strings: ["E-Mail Troubleshooting", "Hardware Upgrades", "Virus Removal", "Networking" ],
typeSpeed: 100,
loop: true,
});
});
</script>
UPDATE: I just got it working with the following code
- Code: Select all
strings: [
"<cms:show_repeatable 'slides' startcount='1'><cms:show slide_typed_text /><cms:if k_count lt k_total_records >","</cms:if></cms:show_repeatable>"
],