Show Some; Click to Continue

A recent project required the content of several articles to be published on the site's index page. The problem was the content length. Some articles are very long. Others very short.

The long ones had to be restrained to a maximum depth without editing the content itself.

A good solution was implemented — a solution that is fairly simple.

It was also implemented at the Willmaster blog index page, which serves as a live site example of the technique.

How It Works

The content is put into a div with a maximum height. (The Willmaster blog index implementation has a 300-pixel maximum height.) Content that won't fit in the maximum height is hidden.

At the bottom of the content div, the last line or several gradually fade out. On top of the faded-out part is a "Continue …" link that takes the browser to the web page with the complete article.

It's all accomplished with CSS and HTML.

For sites where the content might be shorter than the maximum height, an additional feature is implemented, an overflow test. JavaScript measures the height of the content against the maximum height of the div. Only if needed is the fade-out and "Continue …" link published.

Here is an in-article illustration. It has a maximum height of 100 pixels. (The link simply spawns an alert because there is no article to link to.)

Implementing the "Show Some; Click to Continue" Feature

Let's do the CSS part first. Then the HTML.

The CSS

Here is the CSS stylesheet. Comments follow.

<style>
.showsome { 
   max-height:300px;
   position:relative; 
   overflow:hidden;
}
.showsomebottom { 
   height:60px;
   background:linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
   width:100%;
   position:absolute;
   bottom:0;
}
.showsomebottomlink { 
   width:100%;
   position:absolute;
   bottom:0;
   text-align:center;
}
</style>

The style sheet has three classes — showsome, showsomebottom, and showsomebottomlink.

1. showsome

   This is the div that contains the content.

   The max-height:300px; CSS rule may need to be adjusted. It specifies the height of the div within which the partial content is visible.

   The position:relative rule exists so the fading-out and link can be positioned at the bottom. And overflow:hidden ensures the content that doesn't fit is hidden.

2. showsomebottom

   This div contains the fading out functionality. In essence, it's a div with a linear background gradient layered on top of the last line(s) of the content.

   The height:60px; specifies how high the fading-out shall be. Change the height as needed for your implementation. The top of this height has zero fade out. The bottom full fade out. There's a gradient between the two extremes.

   The CSS rule background:linear-gradient([…]) specifies the color and the gradient. (See the CSS source code for complete CSS rule.)

   CSS rules width:100%, position:absolute, and bottom:0 position the fade-out div at the bottom of the content div.

3. showsomebottomlink

   This is for the "Continue …" link. The link is in the div with the fading out functionality.

   CSS rules width:100%, position:absolute, and bottom:0 position the link.

   CSS rule text-align:center centers the link within the div with the fading out functionality.

The CSS rules may be changed as needed. Additional CSS rules may be added to the classes.

When the style sheet is in place, you're ready for the HTML.

The HTML

As suggested by the CSS style sheet above, the HTML is composed of two divs and a link. There's the div that contains the content, the div with the fade out, and the "Continue …" link.

Here is the basic HTML. The three CSS classes are bolded with a yellow background for visual clarity. ("CONTENT" is where your content goes.)

<div class="showsome">
CONTENT
<div class="showsomebottom"><a class="showsomebottomlink" href="http://example.com/page.php">Continue &hellip;</a></div>
</div><!-- end of CSS class "content" div -->

Add your content, change http://example.com/page.php to the URL of your complete article, and you're good to go.

Implementing the Overflow Test Feature

If some of your content might not extend past the show-some div, you can implement a JavaScript test.

The JavaScript measures the height of the content to see if it is shorter than the maximum height. If yes, no fade out or "Continue …" is published. Otherwise (if the content is longer than maximum height), the fade out and link are published.

Implementation is in two steps.

1. The fade-out div.

   The fade-out div (the one with class="showsomebottom") needs a style="display:none;" CSS rule. This must be inline CSS so the rule value can be changed by the JavaScript with one command.

   Here is the entire content div with style="display:none;" where it belongs.

   <div class="showsome">
   CONTENT
   <div class="showsomebottom" style="display:none;"><a class="showsomebottomlink" href="http://example.com/page.php">Continue &hellip;</a></div>
   </div><!-- end of CSS class "content" div -->
   

2. The JavaScript.

   The JavaScript needs to be somewhere below all of the class="showsome" divs on the page. Immediately above the closing </body> tag is a good place.

   Customization note follows.

   <script>
   function InsertShowSomeContinueLinksAsAppropriate()
   {
      var MaxHeight = 300; // Maximum pixel height for show-some content div.
      var collection = document.getElementsByClassName("showsome");
      for(var i=0; i<collection.length; i++)
      {
         var mh = collection[i].scrollHeight;
         if( mh > MaxHeight )
         {
            var bottom = collection[i].getElementsByClassName('showsomebottom');
            bottom[0].style.display = "block";
         }
      }
   }
   InsertShowSomeContinueLinksAsAppropriate();
   </script>
   

   Customization:

   The number 300 at line 4 of the above JavaScript code needs to be changed to match the number of pixels for the CSS stylesheet max-height rule in the showsome class. In the CSS style sheet source code further above, you'll see it as max-height:300px;

   That's the only customization.

When those two steps are implemented, this is what happens:

1. The page is loaded without the fade-out div and "Continue …" link.

2. The height of the content in each class="showsome" div is determined by the JavaScript.

3. Every class="showsome" div with content higher than specified in the JavaScript (300 in this case) gets the fade-out div and "Continue …" link displayed.

The test-content-length feature can be employed even if it is highly unlikely that the content will ever be less than the maximum height. It is what we did at the Willmaster blog index page.

When the problem is content length on an index-type page, and there's another page where the entire content is published, restrain the visible content to a maximum depth and provide a link to the complete article.

(This article first appeared in Possibilities newsletter.)

Will Bontrager