Simple HTML Validator

Let say you are dynamically pulling content into a place (such as an email or widget on your webpage) where you only want so much of the content to actually show up. And lets say that content contains HTML tags for formatting (or whatever other purpose). One problem you will run into is that some HTML tag in there somewhere won't be properly closed and your content gets all out of whack. Well you don't want to have to change up and statically put that content in there for each one right?

Here is an example I've put together using ColdFusion (and a bit of RegEx) to validate and add closing HTML tags to your content:

<cffunction access="private" name="validateHtml" output="false" returntype="any">
<cfargument name="html" required="true" type="string">
<cfscript>
   var token = "[[:word:]]+|[^[:word:]<]|(?:<(\/)?([[:word:]]+)[^>]*(\/)?>)|<";
   var selfClosingTag = "^(?:[hb]r|img)$";
   var output = "";
   var tag = "";
   var openTags = "";
   var strPos = 0;
   var i = 1;
   var match = reFind( token, html, i, "true" );
   
   // find tags
   while( match.pos[1] ) {
    // if this is an HTML tag
    if( match.pos[3] ) {
     output &= mid( html, match.pos[1], match.len[1] );
     tag = mid( html, match.pos[3], match.len[3] );
     
     // if this is not a self-closing tag
     if ( !( match.pos[4] || reFindNoCase( selfClosingTag, tag ) ) ) {
      // if this is a closing tag
      if( match.pos[2] && listFindNoCase( openTags, tag ) ) {
       openTags = listDeleteAt( openTags, listFindNoCase( openTags, tag ) ); 
      } else {
       openTags = listAppend( openTags, tag );
      }
     }
    } else {
     output &= mid( html, match.pos[1], match.len[1] );
    }
    
    i += match.len[1];
    match = reFind( token, html, i, "true" );
   }
   
   // close any tags which were left open
   while( listLen( openTags ) ) {
    output &= "";
    openTags = listDeleteAt( openTags, listLen( openTags ) );
   }
   
   return output;
</cfscript>
</cffunction>

Print a PDF from a Link (but don't look at it!)

Another fun task I took on was trying to figure out how to "auto-print" a PDF from a link. As the request said, they know that they can click the link to download the PDF and then print or even viewing the PDF in the browser and print from there, but they wanted the next step.

The requester wanted the ability to auto-magically bring up the browsers print dialog window from a link without ever needing to view the actual PDF to print it.

This is how I solved it and kept it cross-browser compatible.

Place in the body of your page:

<iframe src="sample.pdf" height="0px" id="pdfDocument" style="left:-9999px;position:absolute;" width="0px"></iframe> 
<embed src="sample.pdf" height="0px" id="pdfDocumentIE" style="left:-9999px;position:absolute;" width="0px"></embed>

Place in JavaScript script block:

function printPDF() {
    if(navigator.appName == 'Microsoft Internet Explorer') {
        var pdf = document.getElementById('pdfDocumentIE');
        pdf.focus();  // focus
        pdf.print();  // print it
        return false;
    } else {
        window.frames['pdfDocument'].focus();  // focus
        window.frames['pdfDocument'].print();  // print it
    }
}

Setup your link:

<img src="print.gif" width="20" height="20" border="0" title="Print PDF" style="cursor:pointer;" onclick="javascript:printPDF();"/>

Building HTML Emails

When working on an HTML email template for my company to send out I ran into a little snag. In Gmail, Yahoo!, and a few other email clients, the images didn't look right. Some wouldn't have any gaps or a gap would appear to the left while in another client it would be to the right. After struggling with this for a while, I finally found a solution.

Here is how to remove gaps from around images in Gmail/Yahoo!/etc. HTML emails:

<img src="sample.gif" style="display: block;" />