I'm building a non-public web app that will be used as info-monitor. As such, it will be running 24/7 on one LCD TV display.

Since this could produce a "burn-in color" error on the LCD I'm looking for a Javascript that will prevent/reduce this problem. I want to use something similar to those they use on airport displays (a line periodically moving from left to right and top to bottom and switching color).

Do you know any Javascript doing this? Thank you!

I'm building a non-public web app that will be used as info-monitor. As such, it will be running 24/7 on one LCD TV display.

Since this could produce a "burn-in color" error on the LCD I'm looking for a Javascript that will prevent/reduce this problem. I want to use something similar to those they use on airport displays (a line periodically moving from left to right and top to bottom and switching color).

Do you know any Javascript doing this? Thank you!

• javascript
• lcd

• 2 It could? I thought this kind of problems was restricted to CRT monitors. – Andreas Rejbrand Commented Jan 19, 2011 at 22:46
• 3 This isn't a major problem for LCDs, just CRTs and plasma displays. See previews.about./od/monitors/a/LCDBurnIn.htm. @Andreas it was just as bad with plasmas :) – Rafe Kettler Commented Jan 19, 2011 at 22:47
• I could only dream a better solution for my "problem" :) tnx guys – Spiro Krasic Commented Jan 19, 2011 at 23:06

2 Answers 2

In case you were still interested: (uses jQuery)

var $burnGuard = $('<div>').attr('id','burnGuard').css({
    'background-color':'#FF00FF',
    'width':'1px',
    'height':$(document).height()+'px',
    'position':'absolute',
    'top':'0px',
    'left':'0px',
    'display':'none'
}).appendTo('body');

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
    color = ++color % 3;
    var rColor = colors[color];
    $burnGuard.css({
        'left':'0px',
        'background-color':rColor,
    }).show().animate({
        'left':$(window).width()+'px'
    },scrollDelay,function(){
        $(this).hide();
    });
    setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);

Working example found here: http://www.jsfiddle/bradchristie/4w2K3/3/ (or full screen version)

I used Brad's script but unfortunately my page had a large HTMl table that extend outside the parent container. This made it so the pixel bar would only travel part way across the screen. Instead of altering my table I added a bounding box script to find the actual width of the html table and then used that to set the width in Brad's script.

var div = document.getElementById ("HtmlTable-ID");

        if (div.getBoundingClientRect) {       
            var rect = div.getBoundingClientRect ();

            w = rect.right - rect.left;

           // alert ("  Width: " + w );
        }

var $burnGuard = $('<div>').attr('id','burnGuard').css({
    'background-color':'#FF00FF',
    'width':'1px',
    'height':$(document).height()+'px',
    'position':'absolute',
    'top':'0px',
    'left':'0px',
    'display':'none'
}).appendTo('body');

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
    color = ++color % 3;
    var rColor = colors[color];
    $burnGuard.css({
        'left':'0px',
        'background-color':rColor,
    }).show().animate({
        'left': w +'px'
    },scrollDelay,function(){
        $(this).hide();
    });
    setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);