Align Shadows on Repeating Backgrounds

By Nick Little on December 16, 2008 at 6:30 am in css

One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);

This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (‘divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.

<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <!-- Footer Content goes here -->
</div>

It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:

  • IE6
  • IE7
  • Firefox
  • Opera
  • Safari

EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
  <!-- Footer Content goes here -->
</div>
</body>
</html>

A zip file of the above sample code with the background images can be downloaded here.

Encoding HTML Entities with Javascript

By Nick Little on June 18, 2008 at 6:23 pm in Technical

Today I needed to use a bit of javascript to modify the contents of a web page. However, the section of the page I was changing was being updated with user entered content. I wanted the content on the page to show exactly what the user typed, meaning that I had to make sure that if the user entered any valid xhtml code it was encoded correctly. I searched around on google and found next to nothing on the topic, so I decided to create my own.

I used the php function “htmlspecialchars” as the basis for my function. I looked up the replacements that this functions uses. It turns out that only four characters need to be replaced to properly encode the contents: &, <, >, and “. Here is the function:

function htmlEncode(str) {
  return str.replace(/&/g, '&amp;').replace(/"/g, '&qout;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

The only thing I had to watch was that the ampersand character was encoded before the others, since it is used for encoding the others.