Omer asks:

I am using cfdiv to allow users to browse videos without refreshing the whole page. The problem I am facing now is that when the user hit the next link to show 10 next videos, the div starts loading the stuff and it resizes (get smaller with the loading message) and when the videos load, it goes back to its original size. I want to know how can I keep the size of div same even when ajax is loading the stuff.

The issue Omer is talking about can be demonstrated with the following code. Our root page will simply have: <h2>Header</h2>

<cfdiv bind="url:test3.cfm" />

<p> My footer... </p>

The file test3.cfm will generate some images:

<cfloop index="x" from="1" to="5"> <cfset a = imageNew("", 120,70, "rgb", "green")> <cfset imageDrawText(a, "Image #x#", 5, 12)> <cfset sleep(200)> <cfimage action="writeToBrowser" source="#a#"> <br/><br /> </cfloop> <cfoutput><a href="#ajaxLink('test3.cfm')#">Reload...</a></cfoutput>

Note the reload link in there. If you run this, you will notice an odd resizing of the cfdiv every time the content is reloaded. This is so exciting I decided to make a movie out of it. (Mac Firefox 3 Users: Remember to click in the upper left hand triangle. Jing is aware of the bug and says it will be fixed soon.)

Luckily this is rather easy to fix. The cfdiv tag will accept any normal CSS attributes. I changed my code like so:

<cfdiv bind="url:test3.cfm" style="background-color: red;width:100%;height:500px" />

The red background was just to help make it a bit clearer, and to share some late Christmas spirit. What's important is the width and height. I picked values that made sense for my content. This now results in...

Pretty easy!