Clean layouts and spacing

Here is a fun challenge for those of you who have to deal with specific sized divs that contains dynamic text. What do you do with a div that you cannot or do not want to resize dynamically. Today, I have two solutions for you.

The first and simplest technique would be to use CSS to hide overflow content.

Lets take a simple piece of code.


<div style="width:100px;border-top:1px solid #000000;"> </div>
<div style="border:1px solid #000000;width:100px;">
This_is_an_unbroken_line_of_text!!!!!!!!
</div>

[More]

Getting your site's bookmark icon (favicon) to work in IE and all other browsers.

We had some fun with this seemingly simple problem today. Setting up a new web site, we found that the "favicon" graphic (the little icon that show up next to your page's URL or title in a browser tab or address bar) was working for all browsers but Internet Explorer (IE).

It turns out that IE is very particular about the way that the favicon must be set. The graphic must be of type "ICO". While other browsers support GIF, JPG, and PNG icons, IE requires ICO.

Next, a reference to the icon must be included in the section of your HTML document, using the tag. The tag must have the attributes "rel", "type", and "href" set to the values "SHORTCUT ICON", "image/vnd.microsoft.icon", and the full URL (including http:// and your domain) to the ICO file.

<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.yourdomain.com/images/favicon.ico" />

For more information, see the following links:

404 Pages in Coldfusion

First off, let me define what exactly a 404 page is. An HTTP 404 error message is a standard response code indicating that the client was able to communciate with the server but the server could not find the page requested. In Coldfusion, by default, the server (IIS) doesn't check that .cfm files exist but rather lets Coldfusion handle that. The result is one of those ugly blue and grey error screens that aren't picked up by the normal 404 methods or by our Application.cfm's error handler.

[More]

Custom JS Validation in CFFORM - When Javascript is turned off

This is an expansion on Isaac's entry, Mixing CFForm and custom javascript validation. In his blog entry, he tells us how to manipulate Coldfusion's built-in JavaScript validation in CFFORM to include your own custom validation.

I immediately wanted to try it out, because having CFFORM override my custom validation was a major blow to my enthusiasm in using this CFFORM feature. Basically, what he does is switch out a submit button for a regular button and added an onclick to the new button. The problem here is what happens when JavaScript is turned off - the form won't submit!

[More]

Basic Page Optimization

Page load time is very important, if a page takes too long to load some users will just leave and may never come back. Below are two tools that I find very useful when doing page optimizations.

[More]

Mixing CFForm and custom javascript validation.

Before CFFORM and CFINPUT validation made it easy to validate form inputs with such CFINPUT attributes as required="true" and message="email is required" developers wrote thier own custom javascript validation and believe it or not most web developers still do. The reson for this is because Coldfusions CFFORM validation still cant do everything you need it to, however there are some powerful CFINPUT validations I find extremely useful in form development.

One I find extremely useful is the CFINPUT attribute "validate", which can be used to validate many types of user input such as an email, credit card number, date, ect.

So what do you do when you have a HTML form that validates user input with custom javascript called from an onSubmit call in the form tag but want to use Coldfusions CFINPUT validation. Chances are you tried changing the FORM to CFFORM and found your custom javascript stopped working and hastily decided CFFORM broke your javascript.

[More]

Captcha Alternatives

To start out, a Captcha is a simple test that is using on many web forms to test if the response is generated by a computer. "CAPTCHA" is an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart. Commonly, a Captcha requires that the user types in letters or numbers from a distorted image that is presented.

The reason I am talking about CAPTCHA Alternatives, is that:

  • CAPTCHAs can't be used by everyone, such as those with impaired vision or graphics disabled.
  • They slow down the registration process
  • Due to increased computer power, captchas are getting easier for computers to crack and as a result, we try to stay ahead of this curve, making captchas increasingly difficult for the end user to input the correct value.
  • Captchas put the responsibility on the user, when it could be handled on a level that is invisible to the user.
  • Due to the extra steps, CAPTCHAs can lead to fewer real registrations.

So, what are our alternatives?

[More]

Page Numbers in clickable boxes are easier to use

I have to say that I really like the usability of page numbers (or alpha lists) in clickable boxes. They are much easier to use/select than just the one-character links, which are often teeny tiny and too close together. So here is an example of how to clickable boxes with CSS - you just have to define the style, then wrap all the links in a div with the "pagination" class. 

Example CSS: 


/* ------------------------------------------------------- */
div.pagination {padding:3px; margin:3px; text-align:left; font-size:11px; font-family: Arial, Verdana, Helvetica, sans-serif;}

div.pagination a, div.pagination a:visited {padding: 2px 5px 2px 5px; margin-right: 2px; background: transparent; border: 1px solid #cccccc; text-decoration: none; color: #004499;}

div.pagination a:hover, div.pagination a:active { border: 1px solid #cccccc; color: #000000; background-color: #dddddd;}

div.pagination span.current a:link, div.pagination span.current a:visted { color: #004499; padding: 2px 5px 2px 5px; margin-right: 4px; font-weight: bold; border: 1px solid #e0d9b8; background-color: #edeadb;}

div.pagination span.disabled {padding: 2px 5px 2px 5px; margin-right: 2px; border: 1px solid #e0d9b8; color: #004499; background-color: transparent;}
/* ------------------------------------------------------- */

Example HTML/ColdFusion code:


<cfoutput>
<div class="pagination">
Port Index:  
<cfloop list="#alphaList#" index="thisAlpha">
<cfif alpha neq thisAlpha>
<a href="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#&alpha=#thisAlpha#">#thisAlpha#</a>
<cfelse>
<span class="current"><a href="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#&alpha=#thisAlpha#">#thisAlpha#</a></span>
</cfif>
</cfloop>
</div>
</cfoutput>

BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.002. Contact Blog Owner