CODEWITHSUNDEEP
javascriptjquery
Ph33ly
Ph33ly

Reputation: 693

How to make screen flash with JQuery

Is there any way to make the window, or at least the page, flash/blink with JQuery or plain JavaScript? I'm trying to get the tab to flash too. Right now I have

var flash = true;
var alert = setInterval(function(){
    if (flash) 
       //doFlash
    else 
       //stopFlash
    flash = !flash;
}, 1000);

EDIT: Sorry for any confusion, I meant window brightness. I was wondering if there was a way to flicker the screen brightness to alert users. I was also curious on how to flicker the tab when the window is minimized as well.

Upvotes: 0

Views: 2916

Answers (2)

Jos
Jos

Reputation: 2013

You can choose a higher level element like body (or some main div) and toggle the opacity of the element from 0 to 1 using the JS timer.

(you can change other things as per your needs) http://jsfiddle.net/josangel555/3w203Lsp/2/

JS (you can use the below lines, one for if and one for else.)

$('.main').addClass("flash");

$('.main').removeClass("flash");

CSS (timer is enabling and disabling the opacity of the targeted element.)

.flash{
    opacity: 0;
}

Upvotes: 2

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

Take a look at this! Used jQuery and some CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>

<head>
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>

<style>

@keyframes blink {
  50% {
    background: #cc5;
    background-size: 75px 150px;
  }
}
@-webkit-keyframes blink {
  50% {
    background: #cc5;
    background-size: 75px 150px;
  }
}
@-moz-keyframes blink {
  50% {
    background: #cc5;
    background-size: 75px 150px;
  }
}

.laser {
  animation: blink 2s infinite;
  -webkit-animation: blink 2s infinite;
  -moz-animation: blink 2s infinite;
}
</style>
</head>

<body>

<button class="flash">click to blink</button>

<script>
// Button to toggle
$(document).ready(function(){
$('.flash').click(function() {
  $('body').toggleClass('laser');
});
});

</script>

</body>

Upvotes: 3

Related Questions