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
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" ],
but I am getting
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>"
        ],