Creating new row depending on user input

zepedac's Avatar

zepedac

15 Jul, 2016 08:50 PM

I want to create a new row when a user inputs more than three elements.

HTML

First set of input.
<section class="row">
    <div class="column">Input</div>
    <div class="column">Input</div>
    <div class="column">Input</div>
</section>

Second row of input
<section class="row">
    <div class="column">Input</div>
    <div class="column">Input</div>
    <div class="column">Input</div>
</section>

XML

<highlight>
        <title>First</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>
<highlight>
        <title>Second</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>
<highlight>
        <title>Third</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>
<highlight>
        <title>Fourth</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>
<highlight>
        <title>Fifth</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>
<highlight>
        <title>Sixth</title>
        <snippet>Lorem ipsum dolor sit amet</snippet>
</highlight>

VM

#set($highlights = $_XPathTool.selectNodes($contentRoot, "//highlight"))

#foreach($highlight in $highlights)
    #set($title = $highlight.getChild('title').value)
    #set($snippet = $highlight.getChild('snippet').value)

    <section class="row">
      <div class="column">
        <h3>$title</h3>
        <p>$snippet</p>
      </div>
    </section>
#else
  #if($highlights.size() > 3)
    ## Split each set of three in their own rows...
  #end

#end
  1. 1 Posted by Wing Ming Chan on 22 Jul, 2016 09:34 PM

    Wing Ming Chan's Avatar

    Hi,

    I was hoping that someone would answer your question, but somehow no one did. When you have time, take a look at my calendar format:

    https://github.com/wingmingchan/velocity/blob/master/tutorials/02%2...

    There I used the modulus operator to generate a calendar, seven cells in a table row, while you need to generate rows containing three cells. The code you need will be different, but the principle is the same.

    Wing

  2. 2 Posted by zepedac on 25 Jul, 2016 02:12 PM

    zepedac's Avatar

    Thank you Wing. I will check out the calendar format. Much appreciated! I'll respond with my results!

    Finally figured it out. Used $foreach.index in order to start the checking from zero to output empty div or the loops.

    Velocity

    #set($highlights = $_XPathTool.selectNodes($contentRoot, "//highlight"))
      #foreach($highlight in $highlights)
        #set($title = $highlight.getChild('title').value)
        #set($snippet = $highlight.getChild('snippet').value)
        #if( $foreach.index %3 == 0 )
          #if( !$foreach.first )
          </section>
          #end
          <section class="row">
        #end
          <div class="column">
            <h3>$title</h3>
            <p>$snippet</p>
          </div>
        #if( $foreach.last )
        </section>
        #end
      #end
    
  3. zepedac closed this discussion on 23 Nov, 2016 11:24 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac