theknowledgebase

The requirement for me was to create an overlay that dimmed out all the content around a video. While there are plenty implementations of this I did not find any tutorials or solutions posted, which is kind of boggling to me. So I tried to follow a few similar examples and tried to modify them to meet my needs. After several hours of frustration I fell back on one of my main principles, start over and do it myself.

If you saw the rest of my blog you would know I’m a c# developer first, and do javascript/html/css when those developers are busy. So I’m not that great with jQuery/css but I can get by. I must be improving because I found the solution to be quite easier than I expected.

Here’s how I decided to do it. Make divs surround the area in question. Top, left, right and bottom. Then I need to set the sizes and placements accordingly and finally fade in the regions.

We’ll start with the html code. There’s no magic here, it’s plain and simple.

<div class='overlayWrapper'>
    <div id="overlay-top" class="overlay"></div>
    <div id="overlay-left" class="overlay"></div>
    <div id="overlay-right" class="overlay"></div>
    <div id="overlay-bottom" class="overlay"></div>
</div>

Now we’ll check out the css. Again pretty straightforward, but I’ll explain more.

.overlay
{
    background-color: #000000;
    display: none;
    margin: 0;
    opacity: 0.8;
    padding: 0;
    z-index: 150;
    position: absolute;
}
#overlay-top
{
    min-width: 920px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
#overlay-left
{
    position: absolute;
    left: 0;
}
#overlay-right
{
    float: right;
    position: absolute;
    width: 100%;
}
#overlay-bottom
{
    min-width: 920px;
    width: 100%;
    z-index: 150;
    left: 0;
    height: 100%;

First I set my class to contain the color and other shared css attributes. The rest contain certain properties relevant to their location. Top has it’s top set to 0, right is floated right, left is the only div without width set to 100%, and bottom has both width and height to 100% to cover everything.

Now let’s explore the jquery used to accomplish the spotlight effect. The idea here is to position the divs around a specified area.

function SpotlightDiv(spotlightDiv) {
    var position = $(spotlightDiv).position();
    var width = $(spotlightDiv).width();
    var height = $(spotlightDiv).height();
    ResizeOverlayWindow(position.left, position.top, width, height);
    DimOverlay();
}
function ResizeOverlayWindow(left, top, width, height) {
    $('#overlay-top').height(top);
    $('#overlay-bottom').css({ top: top + height });

    $('#overlay-left').height(height);
    $('#overlay-left').css({ width: left });

    $('#overlay-left').css({ top: top });
    $('#overlay-right').css({ top: top });

    $('#overlay-right').height(height);
    $('#overlay-right').css({ left: left + width });
}
function DimOverlay() {
    $('.overlay').each(function() {
        $(this).fadeIn(200);
    });
}
function RaiseOverlay() {
    $('.overlay').each(function() {
        $(this).fadeOut(200);
    });
}

Pretty simple, huh? Again it should be straightforward and self explanatory, but I will go into more regardless.

overlay-top
The idea here is to set the height of the top div based on the location of the item we’re spotlighting. This way it stretches from the top of the page down to the top of the div.

overlay-bottom
We set the top of the bottom overlay to be at the bottom of the spotlighted div. It then covers the rest to the bottom.

overlay-left/right
We set the top and height to align with the spotlighted div’s top/height. This aligns them horizontally across the page.

overlay-left
We set the left div’s width to align with the left edge of the spotlighted div.

overlay-right
We set the right div’s left edge to align at the right edge of the spotlighted div.

That’s it. Pretty simple. Take it and do with it what you will, there’s a lot more that can be done. You can have it follow the mouse, you can use it to show users a specific section on your site to help them find something.