coldfusion loop is dropping links

user_1497281 0
Viewed 53

I have a graphic on my page and will be imposing some links over it.

  <p><img src = "ind-pict-05.png" alt = "ind-pict-05.png" 
       class = "webresponsive" 
       style = "width:100%; position:relative;
                z-index:0;  "></p>
       <div style = "position:absolute;top:15%;left:59%;width:16%;height:81%;
               z-index:1;border:2px solid blue">
          <div class = 'rainbow'>
          <a style = "cursor:pointer" onclick = "window.open('ind-acct.cfm')"></a></div>
         
          <div class = 'rainbow'
          <a style = "cursor:pointer" onclick = "window.open('ind-donor.cfm')"></a></div>
    </div>

And the css:

 .rainbow {
  margin-top:1%; 
  height:7.4%;
  border:2px solid red;
}

This works.

enter image description here

In in the image, the blue box shows that everything is properly positioned, and the red boxes, the div's that contain the links, also show correct positioning. (These debugging tools will be dropped in the final version.) The links are working correctly.

There will eventually be 12 red boxes, so I thought I would put it in a loop. Trying with just two boxes the code is:

     <cfset linkarr = ListToArray('acct,donor')>  
     <p><img src = "ind-pict-05.png" alt = "ind-pict-05.png" 
       class = "webresponsive" 
       style = "width:100%; position:relative;
                z-index:0;  "></p>
     <div style = "position:absolute;top:15%; left:59%;width:16%;height:81%;
               z-index:1;border:2px solid blue">
     <cfoutput>
         <cfloop array = '#linkarr#' index = 'abc'>               
             <div class = 'rainbow;'>
                <a style = "cursor:pointer" onclick = "window.open('ind-#abc#.cfm')"></a>
             </div>              
         </cfloop>
   </cfoutput>

This does not work. The div class = "rainbow"and associated link do not appear.

enter image description here

The developer tool is showing the code in place, although it is not showing any formatting except what is inherited from the top div (not shown here):

enter image description here

Can anyone tell me why writing out each individual link works, but looping through the links is not working?

coldfusion hyperlink loops
1 Answers

It's not the loop that's the problem, it's the html inside it and outside it. If you compare the generated html from both approaches, you'll see what the differences are.

Others have already pointed out the errant semi-colon after the classname in your CF approach: <div class = 'rainbow;'>

Two other issues:

You have missed the closing outer </div> on the CF version.

@Thum Choon Tat is right in saying that the links with no content have zero width and height. In your plain html approach, you have missed a > on the second inner div opener:

<div class = 'rainbow'

...this is what causes the link to appear to work without the loop, because the browser is trying to fix the invalid html, and in my browser at least this results in the div being part of the link instead of its parent.

If you fix all these errors in the html you should see that both approaches result in the same behaviour - links with zero width and height due to having no content inside them - it was never a problem with the loop not working, it was a problem with the non-loop version that made it appear to work by chance.

user_45757620
Related