Screen burn prevention javascript program

Question

I am creating an information kiosk to display production information. The screen will be on constantly. While the information contained within a large table will be refreshed periodically, I want to pass a line through the screen periodically to reduce the screen burn effect. I found this code, and it's exactly what I want to do, but I cannot get it to work:

JSFiddle

I created a very simple html page.When I check the developer console, I get the following error: ReferenceError: $ is not defined.

I am new to JavaScript, and I have been trying to figure out how to incorporate the code into my page.

var $burnGuard = $('<div>').attr('id','burnGuard').css({

For this bit of code above, do I have to specify either 'div' or make a div in my page and give an id? Does the page also have to include a link to jQuery? Any help would be appreciated.

It's using something called "jQuery". You must include the jQuery library on top of your HTML in order for this to work. — Shadow The GPT Wizard, Jun 25 '15 at 13:19
`jquery` is a javascript library...you need it for your code to work because the code uses stuff from the `jquery` library... — brso05, Jun 25 '15 at 13:27

score 4 · Answer 1 · answered Jun 25 '15 at 13:20

4

As you can see in the fiddle you've provided, jQuery is included. You need to include jQuery to your file in order to use it.

jQuery is attached to the $ sign, so that's where your error comes from.

answered Jun 25 '15 at 13:20

baao

71,625
17
143
203

score 3 · Accepted Answer · answered Jun 25 '15 at 13:20

You are missing the reference to jquery. Here is the code you need. Also just sho you know you can always add a /show to the end of jsfiddle url and then right click to choose View Frame source to see the code behind the result!

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by bradchristie</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>



  <style type='text/css'>


  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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);

});//]]>  

</script>


</head>
<body>



</body>


</html>

Thank you so much. That did the trick. I modified 'left':$(window).width()+'px' to 'left':$(window).width()-(width of bar)+'px' so that the screen doesn't jump upon refresh. I went with a 5px bar and it's working well. My screens thank you. — FoodEng24, Jun 25 '15 at 14:31

Screen burn prevention javascript program

2 Answers2