CODEWITHSUNDEEP
coldfusion
David Brierton
David Brierton

Reputation: 7397

CFoutput Query Looping but addind html only every third loop

I am trying to figure out how to line my contact boxes up to fit properly. The problem I am running into is with my loop using the cfoutput query. I need to start a row only every three loops. This is never a set number and pulls straight from the database. How can I have <div class="row"> show up the first loop then skip the 2nd and 3rd but come back on the 4th loop then skip 5 and 6 and continue so on?

<div class="wrapper wrapper-content animated fadeInRight">
      <cfoutput query="grab_contacts">
        <div class="row">
        <!-- Insert Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
                            <cfif len(grab_contacts.phone_extension)>
                            <div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
                            </cfif>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
                        <h5>
                            <strong>#grab_contacts.position#</strong><br><br>
                            <i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
                            MCTC #grab_contacts.branch# Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here --></cfoutput>
          </div>
       </div>

Rows should look like:
1 2 3
4 5 6
7 8 9

EDIT: Still Having Issues

<div class="wrapper wrapper-content animated fadeInRight">
      <cfoutput query="grab_contacts">
        <cfif CurrentRow mod 3 eq 1>
            <div class="row">
        </cfif>
        <!-- Insert Loop Here -->
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
                            <cfif len(grab_contacts.phone_extension)>
                            <div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
                            </cfif>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
                        <h5>
                            <strong>#grab_contacts.position#</strong><br><br>
                            <i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
                            MCTC #grab_contacts.branch# Branch<br>
                        </h5>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            <!-- End Loop Here -->
        <cfif CurrentRow mod 3 eq 1>
            </div>
        </cfif>
          </cfoutput>
       </div>

How rows look now:
1
2 3 4
5 6 7
8 9

Upvotes: 0

Views: 207

Answers (1)

Tim Jasko
Tim Jasko

Reputation: 1542

<cfif CurrentRow mod 3 eq 1>
    <div class="row">
</cfif>

and then

<cfif CurrentRow mod 3 eq 0 or CurrentRow eq grab_contacts.recordCount>
    </div>
</cfif>

at the end as well.

Upvotes: 4

Related Questions