Download Demo

CFPOD

The <cfpod> creates an area of the browser window with an optional title bar and a body that contains display elements.

We can use a small amount of css to create the same thing.

Our demo will create the following :-

Screenshot

Listing 1 : index.cfm

<cfsetting showdebugoutput="false">
<!--- CREATE THE CFC OBJECT --->
<cfset objContent = createObject("component", "cfc.content") />
<!--- OBTAIN THE FEEDS --->
<cfset qryFeeds = objContent.srcFeeds() />
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <title>CFPOD - ALTERNATIVE USING impress.js</title>
    <link rel="stylesheet" href="css/custom.css">
</head>
<cfoutput>
<body>
    <ul id="feeds" style="display:table;">
        <cfloop query="qryFeeds">
            <cffeed action="read" source="#qryFeeds.feed#" query="rssFeed" />
            <div class="title">#qryFeeds.site#</div>
            <li id="feed_#qryFeeds.id#" class="feedlist">
                <ul class="innerlist">
                    <cfloop query="rssFeed">
                        <li>
                            [#dateFormat(rssFeed.publishedDate)#] <a href="#rssFeed.rssLink#">#rssFeed.title#</a>
                        </li>
                    </cfloop>
                </ul>
            </li>
        </cfloop>
    </ul>
</body>
</cfoutput>
</html>

Here's the CSS.

Listing 2 : custom.css

ul#feeds li {
    list-style-type: none;
}
.feedlist {
    overflow-y:scroll;
    height:100px;
    width: 600px;
    margin-bottom: 10px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
.innerlist{
    list-style-type: none;
    padding-left: 3px;  
}
.title {
    background-color: grey;
    color: white;
    padding-left: 3px;
}

And finally the CFC.

Listing 3 : content.cfc

<cfcomponent>
    <!--- LOAD THE DATA --->
    <cfinclude template="data.cfm">
    <!--- GET THE SLIDE DECK DATA --->
    <cffunction name="srcFeeds" access="public" returntype="query">
        <cfset var qryFeeds = ''>
        <cfquery name="qryFeeds" dbtype="query">
            SELECT *
            FROM tblFeeds
        </cfquery>
        <cfreturn qryFeeds />
    </cffunction>
</cfcomponent>

For further information you can reference :-