Archive for July, 2008

Killer Talk-Radio App

July 20, 2008

Our team has recently cranked out a seriously sweet application titled ‘Ask Dave‘. NO other talk radio show has such an application. The beauty of the application is its simple way of creating access to the best calls from The Dave Ramsey Show. Even while staring at the app during development I’d find myself browsing through calls that caught my eye. At that point I knew we were on to something powerful.

Several features help create this engaging application. We used RIA (Rich Internate Application) technologies to deliver the content dynamically. The search is powered by indexing using our Google Mini server. Navigation is delievered via Categories, Paging, and even a Randomizer feature. Our marketing team manages the copy and audio via our custom Content Management System.

In addition to all the bells and whistles I’m particulary proud of how this product went from idea to reality. Early in 2008, our marketing team was QBQ-ing by lending some help to the Tech Support team. In answering a few questions here or there they realized that our existing Ask Dave section needed some more muscle. They approached the development team with a question “How can we make this better?.” The crew assembled, reviewed the problem, and launched into a brainstorm of ideas. Much like a sculptor chiseling away at a rock, our debate and dreams revealed a solid, simple idea. We took the idea back to marketing who chimed in with some extras and then gave the GO.

Users feedback so far has been positive…

“Looks fantastic. I also find it much easier to navigate. Nice improvement…keep up the good work. ” –prinny

“it looks awesome!!! Thanks for letting us know this has been vamped up! Great job!” -copecd

Enjoy the app. Check back often…future enhancements are on the way.

float: center

July 9, 2008

As a CSS enthusiast, one of the questions I have heard a lot over the past few years has been, “How do I float center?” To that, I have always replied simply, “you don’t,” and then I delve into what my colleague is actually trying to do. (Really, when was the last time you wanted content to flow around both sides of a block?)

Today my answer has changed.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

Alternatives

First off, let’s not use a cannon to kill a mosquito. If you need to center a single line of text (styling not withstanding), just set text-align: center on the containing block. If you really need to center a block, set its left and right margins to identical values. If your block has an explicit width, set the left and right margins to auto.

What if you do not have (or desire) explicit margins or an explicit width? What if you want several sibling blocks to have the same width? I’m glad you asked…

The simple, three-step process

Consider the following HTML fragment in this example.

<div class="rowWrapper">
	<div class="row">Here are three block-display elements.</div>
	<div class="row">There are no explicit widths set.</div>
	<div class="row">Siblings have the same effective width and are centered.</div>
</div> 

For the sake of the example, I’ll give the wrapper a red border and the rows a blue border.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

1. Float the wrapper

.rowWrapper {
	border: 1px solid red;
	float: left;
}

Wrap your blocks and float the wrapper. Because your blocks are in normal flow, they will each have the same width by expanding to fill their parent block. Because the parent block is floated, it will have the minimum width necessary to contain the child blocks. This results in the following:

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

2. Position the wrapper

.rowWrapper {
	border: 1px solid red;
	float: left;
	position: relative;
	left: 50%;
}

This centers the left edge of the wrapper, and thus your soon-to-be-centered, now equal-width blocks.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

3. Position the ‘rows’

.row {
	border: 1px solid blue;
	position: relative;
	left: -50%;
}

This puts the center of the equal-width blocks at the left edge of the wrapper.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

Naturally, you’ll want to remove any visible signs of the wrapper.

Simple SOA with Ajax & ColdFusion Kickoff

July 2, 2008

We are building a small new tool for our Endorsed Local Provider (ELP) advisors using Ajax techniques on the client with a service-oriented backend. One developer will build the client-side with Prototype classes, and another will build the backend on our existing ColdFusion application servers. We’ll use CFJSON to easily package data for both environments.

We just designed the service methods that will be used by the client and implemented on the server side. We’ll deploy stub versions of all of the service methods that so that the client and server code can be developed simultaneously. I’m excited because this will enable us to build a great tool in a quick and efficient way, and enable our advisors to help link up more people with the advice they need.

Good times with the cfhtmlhead tag

July 1, 2008

So for my first post, I’m going with something simple. For all you die hard ColdFusion gurus this is likely routine. But for anyone fairly new to ColdFusion, being aware of the cfhtmlhead tag is pretty handy. This is especially true if you are doing maintenance on a fairly substantial ColdFusion site … like me.

In most (probably very close to all) of the sections of DaveRamsey.com I help maintain, pages are generated by at least three ColdFusion templates. The header and footer templates create left and right navigation bars, a banner across the top, and a footer. An additional template(s) generate the main content for the page. The fun part is the html header is defined in the header template. The html body is opened in the header and closed in the footer. So if you want to do something ‘silly’ like write a JavaScript function to do something when the page loads or define an internal style sheet, you have something of a quandary. You don’t really want to change the header template because that would affect multiple pages, but the correct place for the JavaScript function and internal style sheet is the html header block.

Enter the cfhtmlhead tag. This tag simply takes a string for an argument and inserts the string into the page’s header block. So a solution to the problem described above would be to create a string with your JavaScriptcode and internal style sheet in it. The cfsavecontent tag is an easy way to do this. Then use the variable from the cfsavecontent in the cfhtmlhead tag to put it in the header block.

Something like so:

<cfoutput>
<cfsavecontent variable="strMyHeaderStuff">

<!--- page specific external style sheets --->
<link type="text/css" rel="stylesheet" href=" ... ">

<!--- page specific JavaScript libraries --->
<script type='text/javascript' language='javascript' src=' ... '></script>

<!--- internal style sheets --->
<style type="text/css">
...
</style>

<!--- custom JavaScipt functions for page --->
<script type="text/javascript" language="javascript">
...
</script>

</cfsavecontent>
</cfoutput>
<cfhtmlhead text="#strMyHeaderStuff#" />