How do I programatically format layers produced by a query loop?

Question

This problem is similar to when creating alternate colour table-rows, only we are dealing with divs and margins instead of table rows and their colours.

The following code creates as many layers as there are genres returned from a query (if three genres are found, three layers are created); and within each layer created, the code creates as many layers as there are titles within that genre (for example, if there are five titles per genre, there will be three "genreName" layers, and inside each one there will be five "titleName" layers).

<cfoutput query="MyQuery" group="genreName">
    <div class="Genres">
        #MyQuery.GenreName#
        <cfoutput>
            <div class="Titles">
            #MyQuery.TitleName#
            <div>
        </cfoutput>
    </div>
</cfoutput>

This also means that all layers in each class are clones. If I have a columns layout where I do not want to assign a left/right margin to the first/last columns, this format breaks.

Is there a programmatic way to assign margins based on the layer number (record number, essentially) where I can apply conditional formatting (in this case, a left and right margin for the middle columns, and no left/right margins for first/last columns)?

Many thanks,

Answer 1

Yes, create three different classes for left (with no left margin), middle (with both) and right (with no right), or however you need it set up.

Next, keep track of a counter (either at the genre loop or the title loop depending on what level you are doing your columns) and use the modulus operator to assign the correct class.

<cfset titleCount = 1> <!--- reset your title count --->
<cfoutput>
   <cfswitch expression="#titleCount MOD 3#">
      <cfcase value="1"><cfset titleClass = "titleleft"></cfcase>
      <cfcase value="2"><cfset titleClass = "titlemiddle"></cfcase>
      <cfcase value="3"><cfset titleClass = "titleright"></cfcase>
      <cfdefaultcase><cfset titleClass = ""><!--- should never get here ---></cfdefaultcase>
   </cfswitch>
   <div class="#titleClass#">
      #MyQuery.TitleName#
   <div>
   <cfset titleCount = titleCount + 1>
</cfoutput>

The key is that you need to keep your own counter because MyQuery.currentRow isn't going to tell you where you are in your current layer.

Answer 2

If what you actually want to do is having a fixed margin between elements, but none before the first nor after the last, you can use the first-child pseudo-class to overrule the general case:

has_margin { margin-left: 20px; }
column_container:first-child { margin-left: 0px; }

...
<div class="column_container">
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
</div>

CSS3 defines a 'structural pseudo selector' that allows you to select every an+b'th child of an element. Setting a to the number of class clones allows you to define that many rules for each layer.