I have a dynamic table, and set conditions to make the table row background color changed based on time comparison. I want to add a second logic that will make the table row flash/blink every 2 seconds if cells are not matching. I understand that I need to create the "Flash/Blink" function but how do I integrate that function into my logic below?
for (i = 0; i < rows.length; i++) {
cells = rows[i].getElementsByTagName('td');
if (cells[10].innerText != cells[11].innterText) {
rows[i].className = "blink/Flash";
}
}
Look ma, no JavaScript!
HTML
<table>
<tr>
<td>true</td>
<td class="invalid">false</td>
<td>true</td>
<td>true</td>
</tr>
</table>
CSS
#-webkit-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
#-moz-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
#-o-keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
#keyframes invalid {
from { background-color: red; }
to { background-color: inherit; }
}
.invalid {
-webkit-animation: invalid 1s infinite; /* Safari 4+ */
-moz-animation: invalid 1s infinite; /* Fx 5+ */
-o-animation: invalid 1s infinite; /* Opera 12+ */
animation: invalid 1s infinite; /* IE 10+ */
}
Live demo
http://jsfiddle.net/bikeshedder/essxz/
For those poor souls who are forced to use an outdated browser
CSS
.invalid-blink {
background-color: red;
}
JavaScript
$(function() {
var on = false;
window.setInterval(function() {
on = !on;
if (on) {
$('.invalid').addClass('invalid-blink')
} else {
$('.invalid-blink').removeClass('invalid-blink')
}
}, 2000);
});
Live demo
http://jsfiddle.net/bikeshedder/SMwAn/
Try this:
<style type="text/css">
/* styles to make cells red when under row with class "blink" */
tr.blink td {background-color:#ff0000;}
</style>
var blinking_rows = []; //array to store rows that must blink
if (cells[10].innerText != cells[11].innterText)
{
rows[i].className = "blink"; //this makes cells background color red
blinking_rows[blinking_rows.length] = rows[i]; //saving row DOM object into array
}
//Running a timer that makes the row blinks every 2 seconds by changing their class
window.setInterval(function()
{
for(var i = 0, len = blinking_rows.length; i < len; ++i)
if(blinking_rows[i].className === "blink") //I'm supposing you do not add other classes
blinking_rows[i].className = ""; //removing class, this makes the row not red anymore
else
blinking_rows[i].className = "blink"; //this makes the row red again
}, 2000);
Related
I created a page where the background colors of a div change every so often. I want to make it so that when the mouse is over(or hovers) the color changer pauses where it is, as long as the mouse hovers there. And when the mouse no longer hovers the div, the colors continue to change where it left off. The closest examples I ran into on this website used JQuery solutions. I am not looking for a JQuery solution. I am looking for a javascript solution. I appreciate any and all of your responses. Thank You!
var dammit = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer() {
if (counter >= colors.length) {
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 3000);
body {
background: #FDCA40;
margin: 0;
padding: 0;
-webkit-transition: background 0.9s;
-moz-transition: background 0.9s;
transition: background 0.9s;
}
div#muck {
width: 100%;
height: 100vh;
}
<body id="color-changer">
<div id="muck"></div>
</body>
There is no way to pause a timer, but you can just stop the currently running one and then start a new one.
(FYI: All browsers that are within 5 years old at least support CSS transitions. No need to vendor prefix that.)
var source = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer(){
if (counter >= colors.length){
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 1000);
// Stop the current timer when mouseover
source.addEventListener("mouseover", function(){ clearInterval(myTimer)});
// Start a new timer when mouse out
source.addEventListener("mouseout", function(){ myTimer = setInterval(changer, 1000);});
body{
background: #FDCA40;
margin: 0;
padding: 0;
transition: background 0.9s;
}
div#muck{
width: 100%;
height: 100vh;
}
<body id="color-changer">
<div id="muck"></div>
</body>
You can do this purely in CSS but you need to use animation. I also added some CSS variables so the animation is easier to change.
body {
background: #FDCA40;
margin: 0;
padding: 0;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
#keyframes example {
0% {background-color: red;}
20% {background-color: blue;}
40% {background-color: green;}
80% {background-color: pink;}
100% {background-color: red;}
}
div#muck {
--animation-transition-speed: 0.9s;
--number-of-colors: 4;
width: 100%;
height: 100vh;
-webkit-animation-name: example;
-webkit-animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
animation-name: example;
animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
animation-iteration-count: infinite;
}
div#muck:hover {
animation-play-state: paused;
}
<body id="color-changer">
<div id="muck"></div>
</body>
While this doesnt really pouse the interval it mimics what you need very closely..
You can use a flag.. something like this:
var output = document.getElementById('id')
var isPaused = false;
var counter = 0;
window.setInterval(function() {
if(!isPaused) {
counter++;
if (counter >= colors.length) {
counter = 0;
};
colorChange.style.background = colors[counter];
}
}, 1000);
document.getElementById('muck').addEventListener('mouseenter', function(e) {
isPaused = true;
});
document.getElementById('muck').addEvenetListener('mouseleave', function(e) {
isPaused = false;
});
from Javascript - Pausing setInterval()
I need to add a fade in and fade out annimation to my image on existing code for slide show. The images must fade in /fade out when user click the buttons. Here is my code.
HTML:
<div id="imageSlider">
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>
Javascript:
var images = [
"HTMLcert.jpg",
"CSScert.jpg",
"javaScriptCert.jpg",
"PHPcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.src = images[num];
}
how can I add fade in and out to existing java script code .
You can add and remove a class to the active slider element in your javascript function like this:
var slider = document.getElementById("slider");
slider.className += " active";
setTimeout(function(){
slider.classList.remove("active");
}, 100);
And then your css will look something like this:
.active {
animation: fade 1s;
}
#keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
You can do it using CSS3 annimation , by creating a custom animation , add a class using this last then toggle the class while clicking in the buttons .
bellow a working snippet :
var images = [
"http://ramg1.net/images/3.jpg",
"https://www.gregbowe.com/assets/img/htmlcert.jpg",
"http://www.lordlamer.de/wp-content/uploads/2011/02/php-cert.jpg",
"http://www.michellekeselgiancola.com/images/certs/uploads/phpcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
/* create the fade custom annimation wich set 0 to 1 opacity on an element */
#-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* create the class that trigger the annimation */
.fade {
-webkit-animation: fade 2s ease; /* Safari 4+ */
-moz-animation: fade 2s ease; /* Fx 5+ */
-o-animation: fade 2s ease; /* Opera 12+ */
animation: fade 2s ease; /* IE 10+, Fx 29+ */
}
<div id="imageSlider">
<img id="slider" class="fade" src="http://ramg1.net/images/3.jpg" width="400px" height="80%" />
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>
I'd love to add a blinking effect like this, but I think setInterval is overkill for what's mere cosmetic stuff:
jQuery(function(){
$("#watch").each(function(){
var $box = $(this);
var show = true;
setInterval(function(){
var m = moment();
$box.text(show ? m.format('H:mm') : m.format('H mm'));
show = !show;
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>
Is there a newer JavaScript API I could be using, or maybe a CSS transition?
Using the CSS provided by this answer, you can do this
jQuery(function() {
$("#watch").each(function() {
var $box = $(this);
setInterval(function() {
var m = moment();
$box.html(m.format('H') + '<span class="blink_me">:</span>' + m.format('mm'));
}, 1000);
});
});
.blink_me {
animation: blinker 1s infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>
For the records, this is the final CSS I wrote based on George's answer:
section {
font-size: 5rem;
}
.stop-watch span {
animation: blink 1s infinite;
}
#keyframes blink{
0% {
animation-timing-function: steps(1, end);
opacity: 1;
}
50% {
animation-timing-function: steps(1, end);
opacity: 0;
}
}
<section class="stop-watch">
1<span>:</span>59
</section>
I have to change div background color in every 3 seconds ,so as below I tried to change color array value in every 3 seconds .eg color index 0 of "red" will move to index 1,then index 1 value move to index 2...So I set last index 4 to always index 0 of value.The problem is that I didn't get that new edit array.How to edit color array value in every times called.
<style type="text/css">
div {
width: 100%;
height: 20%;
position: relative;
background: #fff;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var div = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
function change(){
for(var i in color){
var j = parseInt(i);
j !== 4 ? color[j+1].Key = color[j] : color[0].Key = color[j];
}
changediv();
}
function changediv () {
for(var d = 0 ; d < div.length; d ++){
div[d].style.background = color[d];
}
//can u also explain why using for in loop is getting additional value .see console.log output
//for(var i in div){
// div[i].style.background = color[i];
// console.log(i); // 0,1,2,3,4,length,item,callItem
// }
}
setInterval(change,3000);
</script>
This mus be helpful.
var divs = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
var colorIndex = 0;
var divIndex = 0;
function change (){
for(var i = 0 ; i < divs.length; i ++){
divs[divIndex].style.background = color[colorIndex];
colorIndex++;
colorIndex = (colorIndex == color.length?0:colorIndex);
divIndex++;
divIndex = (divIndex == divs.length?0:divIndex);
}
divIndex++;
divIndex = (divIndex == divs.length?0:divIndex);
}
setInterval(change,1000);
div{
height:50px;
width:50px;
}
span {
display: flex;
}
<span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</span>
And a Working Jsfiddle
My solution is clunky but it works and I made it easy to follow (I think). It's commented step by step.
OP: can u also explain why using for in loop is getting additional value?
Well I've read that for in loops should be used to iterate through objects because there's no guarantee that the result will be in the correct order. So if you use for in to iterate through an array, most likely it'll return in a different order which basically makes an array like an object but less useful since one of the fundamental strength of an array is it's ordered index.
When you are getting an extra value, it's because for in will interpret an array and not only give you it's contents: 0,1,2,3,4, but it'll enumerate properties as well: length,item,callItem. I don't know any circumstances when you need all of that mucking things up. Actually, div is just a NodeList, if it was an array, you'd have a bigger list of properties.
Plunker
Snippet
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
height: 20vh;
border: 1px solid #fff;
background: #555;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
//Declare color Array
var color = ["red","green","pink","blue","lightblue"];
//Function takes one argument
function fill(color) {
//Collect all divs and make a NodeList
var divList = document.querySelectorAll('div');
//Make the NodeList an Array
var divArray = Array.prototype.slice.call(divList);
//Iterate through divArray
for(var i = 0; i < divArray.length; i++) {
//Each iteration of divArray is matched to an element of color
var div = divArray[i];
var bg = color[i];
//Set each background of div to the corresponding color in color Array
div.style.backgroundColor = bg;
}
}
setInterval(function() {
//Call fill with the given Array color
fill(color);
//x is the last element of color Array
var x = color[4];
//Remove x from the back of color Array
color.pop(x);
//Place x to the front of color Array
color.unshift(x);
//Do it again in 3 seconds
}, 3000);
</script>
</body>
</html>
The for-in statement by itself is not a "bad practice", however it can be mis-used, for example, to iterate over arrays or array-like objects.
The purpose of the for-in statement is to enumerate over object properties. This statement will go up in the prototype chain, also enumerating over inherited properties, a thing that sometimes is not desired.
ref: https://stackoverflow.com/a/4261096/2815301
Its good to use for index.
If I understood correctly you need to change color of all div's from the given array.
Following can work
var divs = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
var index = 0
function change (){
for(var d = 0 ; d < divs.length; d ++){
divs[d].style.background = color[index];
}
index++;
index = index === color.length?0:index;
}
setInterval(change,3000);
div {
width: 100%;
height: 20%;
position: relative;
background: #fff;
animation:myfirst 12s;
-moz-animation:myfirst 12s infinite; /* Firefox */
-webkit-animation:myfirst 12s infinite; /* Safari and Chrome */
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:green;}
50% {background:pink;}
75% {background:blue;}
100% {background:lightblue;}
}
#-webkit-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:green;}
50% {background:pink;}
75% {background:blue;}
100% {background:lightblue;}
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
You don't need a bit of JavaScript for this one:
div {
animation: cycle-colors 15s steps(1, end);
-moz-animation: cycle-colors 15s steps(1, end) infinite;
-webkit-animation: cycle-colors 15s steps(1, end) infinite;
}
#-moz-keyframes cycle-colors {
0% {
background: red;
}
20% {
background: green;
}
40% {
background: pink;
}
60% {
background: blue;
}
80% {
background: lightblue;
}
}
#-webkit-keyframes cycle-colors {
0% {
background: red;
}
20% {
background: green;
}
40% {
background: pink;
}
60% {
background: blue;
}
80% {
background: lightblue;
}
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
If you use a pre-processor like Sass, you can make this a little more programmatic:
$colors: (
red,
green,
pink,
blue,
lightblue
);
$colors-length: length($colors);
$frame-duration: 3s;
$animation-duration: $frame-duration * $colors-length;
div {
animation:cycle-colors $animation-duration steps(1, end);
-moz-animation:cycle-colors $animation-duration steps(1, end) infinite;
-webkit-animation:cycle-colors $animation-duration steps(1, end) infinite;
}
#-moz-keyframes cycle-colors {
#for $i from 1 through $colors-length {
$stop: 100 / $colors-length * ($i - 1) + 0%;
#{$stop} { background: nth($colors, $i)};
}
}
#-webkit-keyframes cycle-colors {
#for $i from 1 through $colors-length {
$stop: 100 / $colors-length * ($i - 1) + 0%;
#{$stop} { background: nth($colors, $i)};
}
}
I have a CSS marquee that displays values from a DB. After x minutes it refreshes and new data is pulled. The colors change based on their numerical value (if x < 50000 make it red ...etc).
My issue is once my setInterval runs the data is updated but the color classes don't get added. Any idea why? I saw this post and changed my remove/add class to a toggle but it was the same issue, the toggle wasn't being called after the initial run.
Javascript
$(document).ready(function () {
setColors();
setInterval(function () {
$('.marquee').addClass("paused");
$('.marquee').load('/Home/GetMarquee');
setColors();
$('.marquee').removeClass("paused");
}, 30000);
});
function setColors() {
$('.totalSales').each(function () {
var final = $(this).text();
//removes all the pervious classes
$(this).removeClass('ok');
$(this).removeClass('down');
$(this).removeClass('up');
if (final > 100000) {
$(this).addClass('up');
} else if (final < 50000) {
$(this).addClass('down');
} else {
$(this).addClass('ok');
}
});
}
Razor HTML
<div class="marquee">
<span>
#for (var i = 0; i < Model.tickerData.Count(); i++)
{
<span class="totalSales">
#Html.DisplayFor(x => x.tickerData[i].GroupName): #Html.DisplayFor(x => x.tickerData[i].Sales).....
</span>
}
</span>
</div>
CSS Colors
.down {
color:#AB2218;
}
.up {
color: #4F692A;
}
.ok {
color:#FABF03;
}
CSS Marquee
.marquee {
width: 800px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
background-color:black;
border: 1px black solid;
font-size:50px;
-webkit-animation: marquee 30s linear infinite alternate;
animation: marquee 30s linear infinite;
}
.paused {
animation-play-state: paused;
}
.marquee span {
display: inline-block;
text-indent: 0;
}
/* Make it move */
#keyframes marquee {
0% { text-indent: 17.5em }
100% { text-indent: -57.5em }
}
#-webkit-keyframes marquee{
0% { text-indent: 17.5em }
100% { text-indent: -57.5em }
}
.load is an async ajax function, so it doesn't block until it finishes, and the class adding and removing happens too quickly to notice. Try using the .load callback:
setInterval(function () {
$('.marquee').addClass("paused");
$('.marquee').load('/Home/GetMarquee', function() {
setColors();
$('.marquee').removeClass("paused");
});
}, 30000);