Search code examples
javascripthtmlflashtextblink

Multiple flashing text items using 1 id?

I'm having a little trouble with javascript and html.

Here is my script 

<script type="text/javascript">
function flashtext(Urgent,col) {
var tmpColCheck = document.getElementById('Urgent').style.color;

  if (tmpColCheck === 'silver') {
    document.getElementById('Urgent').style.color = col;
  } else {
    document.getElementById('Urgent').style.color = 'silver';
  }
} 

setInterval(function() {
    flashtext('flashingtext','red');
}, 500 ); //set an interval timer up to repeat the function

And here's my HTML, 

<div class="js-col-md-6 js-col-xs-6" id="<?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

The id is Urgent which is called from backend settings, this is the only one i want to flash / blink.

Here's the problem, it works =D yaay! ...but only on the first instance all the other Urgent instances are solid. So what i'm looking for is how can i make all instances flash / blink and not just the first instance?

Thank's :)

Solution

  • It's okay, I solved it, so proud of myself.. =)

    For anyone else having a similar issue, here's how it's done: 

    <div class="js-col-md-6 js-col-xs-6" id="<?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

    Remove the id="" and place the php within the class, like below:

    <div class="js-col-md-6 js-col-xs-6 <?php echo $ticket->priority ?>" style="text-align: center; background:<?php echo $ticket->prioritycolour; ?>;"><?php echo $ticket->priority; ?></div>

    Now add an animation style to the page, I used: 

    <style>
.Urgent {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
from { color: red; }
to { color: white; }
}

@-webkit-keyframes blinker {  
from { color: red; }
to { color: white; }
}

@keyframes blinker {  
from { color: red; }
to { color: white; }
}
</style>

    What this will archive is turning all .Urgent classes into a nice fading blink from red to white. You can also use opacity if you simply want the class to vanish instead of change color.

    Thank you for all the reply's. It drove me to find a solution =)