Scrollable DIV Tag - Adding Bacon

Nothing is every truly complete with out bacon right? Here is a simple example where we take some content and apply some CSS to the div container so that only the contents of the div scrolls and not the whole page. Use cases for this could be things like legal terms, a large data grid, or even another web page. In the example case below, we are going use bacon-terms of use. Like most things in web development, this can be done a multitude of ways. This example shows off this feature using only HTML and CSS.

First we will want to set up the div we want to contain the content to be scrolled (I left the content out to show how simple the div is):

<div class="baconTerms">
  <-- insert bacon terms here -->
</div>

Then in our CSS (be it <style> tag or linked CSS file) we will add the following for our div. Note the overflow: auto; attribute/value pair here:

div.baconTerms {
  clear: both;
  height: 300px;
  width: 98%;
  overflow: auto;
  text-align:left;
  border:1px solid silver;
  padding: 5px;
}

Now to present the bacon!

I mean our scrollable div:

Bacon ipsum dolor amet eu irure incididunt prosciutto cupidatat est short loin. Ground round ut pork chop turkey dolore. In veniam nulla mollit fugiat swine boudin spare ribs incididunt sint. Incididunt corned beef ham hock non deserunt picanha jerky sint esse turducken. Ut anim pariatur, landjaeger consequat ham hock sed do chicken ullamco sausage jowl. Shoulder cow pork belly bresaola beef in prosciutto proident. Kevin turkey sausage exercitation, consectetur ham hock consequat eiusmod ullamco frankfurter brisket strip steak pancetta pig.

Meatball bresaola nisi dolore duis. T-bone consectetur veniam kevin occaecat, aliqua ribeye picanha voluptate pork chop aute. Picanha filet mignon ea, minim chuck qui andouille rump veniam shankle tenderloin excepteur. Ipsum ea qui, cillum capicola landjaeger enim anim. Excepteur dolore bacon alcatra cupidatat pork belly.

Turducken quis frankfurter chuck et aute. Short ribs turducken ullamco, aliqua quis pancetta ipsum strip steak sausage laborum. Pariatur swine pork loin sunt sausage duis fugiat. Hamburger dolore doner, officia cillum sint elit aliqua consequat eu esse deserunt. Ex officia adipisicing reprehenderit. Sunt proident ullamco, lorem reprehenderit eiusmod landjaeger veniam salami biltong id meatloaf do strip steak rump. Salami in jowl ullamco deserunt laboris elit filet mignon.Bacon ipsum dolor amet consectetur jowl venison ham in qui. Pig tongue boudin duis kevin. Laborum hamburger cupidatat, corned beef do meatloaf proident pork loin alcatra aliquip nulla biltong. Pork swine aliquip reprehenderit fatback, picanha id veniam non. Pariatur excepteur frankfurter ut voluptate, consectetur bresaola nisi.

Quis strip steak aliquip, rump esse velit filet mignon est. Corned beef venison landjaeger, drumstick commodo est in consectetur pork belly aute ut. Cillum flank tenderloin pariatur. Chicken dolor shoulder exercitation.

Veniam pancetta sausage ex ullamco esse kielbasa salami dolore cupim. Filet mignon dolore nisi, esse pig ribeye flank ham swine. Fugiat dolore adipisicing nisi. Occaecat proident tenderloin veniam alcatra. Beef ribs jerky anim occaecat, officia filet mignon in cillum pork irure ullamco deserunt rump swine enim.

Shank velit cupim do veniam hamburger non salami consectetur pork loin porchetta ball tip bresaola. Ex fugiat deserunt est jerky. Capicola consectetur ham hock magna, ut pastrami sint shank bresaola aliquip kevin non consequat. Pig sirloin veniam culpa tail, tempor hamburger shoulder ham andouille biltong cillum irure jowl bresaola. Tempor irure officia sirloin venison frankfurter eu velit ipsum kielbasa jowl short ribs beef. Excepteur pork jowl in pariatur hamburger shankle sausage laborum flank porchetta t-bone cupim. Sint culpa aliquip, officia drumstick venison pancetta corned beef filet mignon hamburger turducken ipsum.

Excepteur rump mollit esse, nulla do ut alcatra duis aute pork chop kielbasa bacon porchetta short loin. Andouille esse beef ribs est fatback. Ground round laborum anim alcatra, cupim nulla consectetur biltong pork chop prosciutto short ribs. Non lorem salami proident in ham hock voluptate landjaeger pig ut turkey fatback ground round filet mignon.

** - bacon image provided by https://en.wikipedia.org/wiki/Bacon
** - lorem ipsum text generated by https://baconipsum.com

Cross-Browser Image Opacity

Here is an example of using JavaScript to apply opacity based on what the browser supports. Unfortunately not all browsers behave the same so we need to test this first before applying the opacity. There are many other ways to accomplish this, but this is the simplest way using [vanilla] JavaScript.

First we need our images to test with. The first image** of the mountains will have opacity if the browser supports the 'opacity' style attribute. The second image** of the beach uses the 'filter' style attribute to give us the same effect. Depending on what browser you are viewing this post with, you will only see one of the two images with opacity applied.

<img id="image1" src="/path/to/image1.png" />
<img id="image2" src="/path/to/image2.png" />

Next we setup the JavaScript to test for 'opacity' and apply the style. If the attribute is not available, it will then test and apply opacity using the 'filter' attribute. We have also made it so that the image with the opacity applied is now the larger of the two.

if('opacity' in document.documentElement.style) {
   var img = document.getElementById('image1');
   img.style.opacity = ".5";
   img.style.height = "120px";
   img.style.width= "150px";
} else if('filter' in document.documentElement.style) {
   var img = document.getElementById('image2');
   img.style.filter = "alpha(opacity=50)";
   img.style.height= "120px";
   img.style.width= "150px";
}

Applying the above code we will see our results below. For example, if you are on Chrome you should see the mountain image (image1) larger with opacity applied using the 'opacity' attribute. If you happen to be on an older version of Internet Explorer, you will see the beach image (image2) larger and with opacity applied via the 'filter' attribute.



** - both images are linked from Wikipedia, I do not claim ownership/authorship of either image.

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;" />