@Couchies and @KK Sir...
Greetings!!!

I have been working with typed.js (http://www.mattboldt.com/demos/typed-js/ another working link for testing: http://codepen.io/lowercase/pen/BCJsf) a great script to give a feeling that "someone is typing real-time on a site-illusion".

Now I have been able to get multilines to work with the couch tags. But what i want to achieve is that each line has a different font color.

this is my current code:
1. Editable region: (repeatable to create multiple lines)

Code: Select all

<cms:editable name='excel_niche' label='Excel Niche - Content' type='group' order='4' />
      <cms:repeatable name='excel_niche_details' label='Content - Details' group='excel_niche'>
         <cms:editable name='excel_niche_details_lines' label='Details - Lines' desc='Max. 6 words per line' type='text' order='1' />
         <cms:editable name='excel_niche_details_color_code' label='Details - Lines text color' desc='Use Hex values or color name' type='text' order='1' />
      </cms:repeatable>

2. The js where the repeatable needs to be fitted.

Code: Select all

<script>
         $(function(){
            $(".element").typed({
               strings: [
                  "<cms:show_repeatable 'excel_niche_details'><cms:show excel_niche_details_lines />^1000 \n</cms:show_repeatable>"
               ],
               typeSpeed: 30,
                 loop: false
            });
         });
      </script>

I have created a repeatable editable region: name='excel_niche_details_color_code' and have used it in the following manner:

Code: Select all

<script>
         $(function(){
            $(".element").typed({
               strings: [
                  <cms:show_repeatable 'excel_niche_details'><font color="<cms:show excel_niche_details_color_code />">"<cms:show excel_niche_details_lines />^1000 \n"</font></cms:show_repeatable>
               ],
               typeSpeed: 30,
                 loop: false
            });
         });
      </script>

But when i run the code the entire html code gets typed. where as i want the <font> tag to just change the color entered in the admin panel.

Need help with this!

Regards in advance,
GenXCoders

[KK]

Hi Aashish,

Please take Couch out of the equation for a moment and create a plain version of the same code where multiple lines are specified each with its own color.

Once you get that static version working, retrofit <cms:show_repeatable> into it and compare the output with the static version. You'll spot the differences, if any.

Please post the working static code here in case you happen to need any help.

Thanks.

@KK Sir,

I tried to use the code from here and have been able to generate the colors as you had asked me to try. but there is a problem is it needs an incrementing time in the javascript.

Tried using <cms:add> as below:

Code: Select all

<cms:set my_count='0' 'global' />
<cms:add mycount '2000' />
<cms:show my_count />

and it outputs:

2000

But is it possible to :
"add and increment the value by 2000 for everytime a new sentence is added, using couch."

if we can achieve setting the values to increment by say 2000 the problems will be solved (as i mentioned earlier, the color thing is up).

Once done will share the entire code.

Hi,

Maybe you should look at vue.js https://vuejs.org/examples/.
I noticed that this works great with couch and it's very easy to use for all kinds of front-end stuff.

[KK]

@genxcoders,

is it possible to :
"add and increment the value by 2000 for everytime a new sentence is added, using couch."

Sure. Two tags for that - <cms:add> and <cms:incr>.
Following are some examples -

Code: Select all

<cms:set my_count='0' 'global' />

<cms:repeat '4'>
    <cms:show my_count /><br />
    <cms:set my_count = "<cms:add my_count '2000' />" 'global' />
</cms:repeat>

Code: Select all

<cms:set my_count='0' 'global' />

<cms:repeat '4'>
    <cms:show my_count /><br />
    <cms:incr my_count '2000' />
</cms:repeat>

The output in both cases being -

0
2000
4000
6000

The tag that repeats the actions above is <cms:repeat> but it could be any Couch tag that loops through its contents e.g. cms:pages, cms:folders or, as in your case, cms:show_repeatable.

Make sure to initialize the counter variable to its initial value outside the repeating block.

Hope it helps.