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.