Cool use of CFPOD

This post is more than 2 years old.

Earlier today I blogged about ColdFusionBloggers and the category stats for 2008. I made a passing reference to how it would be nice to have a simple scrollable table for the stats. CFGRID would work, but I just wasn't in the mood for it. Andy Sandefer suggested cfpod and cflayout.

I tend to dismiss CFPOD when I discuss ColdFusion 8 Ajax features, but I gave it a quick shot with my giant HTML table from the earlier post.

<cfpod height="300" width="500" title="Stats"> 11,813 entries. <p/> <table border="1" cellpadding="10"> lots of html here.... </table> </cfpod>

<p> Footer... </p>

It worked rather well:

Ok, so I know a bit of CSS can turn a div into a scrollable region, but this seemed like a nice use of the tag and it was easy to implement.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Raul Riera posted on 1/8/2009 at 10:13 AM

Why use cfpod at all? a <div> would have done the job

Comment 2 by Rob Cawte posted on 1/8/2009 at 1:07 PM

Actually that's a good tip - must make a note.
This ...
<div class="code" style="height: 300px; width: 500;">
... will give you a nice scrollable div that you can even embed in a BlogCFC post.

Comment 3 by Raymond Camden posted on 1/8/2009 at 6:19 PM

@Raul - Yeah, I did say it was probably easy CSS.... if you know CSS. ;)

@Rob - Thanks!

Comment 4 by Sam Farmer posted on 1/8/2009 at 8:07 PM

Nice usage. Every tag has its day!

Comment 5 by Andy Sandefer posted on 1/8/2009 at 8:15 PM

That's a good bit of CSS to know. I'm so cf driven that I sometimes forget what's already out there. Cool trick @Rob.

I still think that cfpods and cflayouts have their uses and I use them in real live projects on a semi regular basis.

Comment 6 by Jeff Sittler posted on 1/8/2009 at 10:20 PM

@Rob

Don't want to step on any toes, but actually your CSS code would not produce a scrollable DIV since the overflow text would be visible and not contained within the DIV. This is because a DIV without the "overflow" style applied will inherently display it's full contents.

Since others were using your code, I thought I would post a modified version of your code to create a scrollable DIV.

<div class="code" style="height: 300px; width: 500px; overflow:auto;">
<p>Velit esse cillum dolore ullamco laboris nisi ut enim ad minim veniam. Cupidatat non proident, quis nostrud exercitation sunt in culpa. In reprehenderit in voluptate lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt sunt in culpa in reprehenderit in voluptate. Excepteur sint occaecat ut enim ad minim veniam. Quis nostrud exercitation sed do eiusmod tempor incididunt ullamco laboris nisi. In reprehenderit in voluptate ut enim ad minim veniam, sunt in culpa. Lorem ipsum dolor sit amet, qui officia deserunt ut aliquip ex ea commodo consequat.</p>
<p>Ullamco laboris nisi duis aute irure dolor ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, ut enim ad minim veniam. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Qui officia deserunt sunt in culpa ut enim ad minim veniam. Ut labore et dolore magna aliqua.</p>
<p>Velit esse cillum dolore duis aute irure dolor cupidatat non proident. Eu fugiat nulla pariatur. Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation excepteur sint occaecat.</p>
</div>

Obviously you would put the style information in a class and just add it to the DIV, something like:
.scrollable {
overflow: auto;
}
then on the DIV you add the class:
<div class="code scrollable">...</div>

Comment 7 by Rob Cawte posted on 1/9/2009 at 4:50 AM

Hi Jeff,

Sorry if I wasn't clear. The standard stylesheet that comes with BlogCFC has a class called "code" which already has those attributes, so unless you have changed that, it should work as I described.

Cheers,
-Rob

Comment 8 by Jeff Sittler posted on 1/9/2009 at 12:48 PM

Hello Rob,

My apologies then. I did not know that those styles were already applied. Guess I should have looked deeper first.

Comment 9 by Brian posted on 1/10/2009 at 1:00 AM

Please tell me that I'm not the only one with Friday-itis... I tried to grab the scrollbar handle in Ray's example and drag it. I must have tried ten times until it dawned on me that it was an image and not an embedded table.

<sigh> Must...have...beer (or sleep...interchangeable at this point)

Comment 10 by Raymond Camden posted on 1/10/2009 at 1:20 AM

I did that trick just for you. ;)

Comment 11 by Don posted on 10/29/2009 at 2:41 AM

but now here is the problem. Let's say you have a search form on the page outside the pod. Inside the pod is the results of the search. The search results are huge so you don't want to scroll forever and decide to paginate. Using the javascript:Coldfusion.Navigate to move through the pages keeping the page number in the url.
BUT when it loads up again the form is in there twice. How do you stop it from doing that?

Comment 12 by Raymond Camden posted on 10/29/2009 at 3:57 PM

I'd have to see your code. If you decide to share it, use a service like Pastebin.