How to make a flickering circle?

Question

Here is my fiddle for visual understanding, it is kind of messy but it works on my side. When you click on the box it will toggle a DIV with a circle inside. I want that circle to flicker like a light. Other boxes will show up with different colors from green, yellow and red. The color corresponds to their status such as logged in, online and offline. The way I am producing these circles is with PHP by looking at their status. I am using a variable called $circle of type canvas because I don't know how else to do it. Below is my code, I am showing only the part of the "circle".

In case animations can't work, I am using Internet Explorer 9.08.

thanks in advance!

PHP:

    $class  = ""; //class variable to empty string, the IF statements are below it
                $state  = ""; //state variable to empty string

                //ONLINE
                //if ping succeeds but no user is found
                if( ($user == null) && ($online == 1) ){
                    $user   = "No User";
                    $class  = "online";
                    $state  = "Online";
                }

                //LOGGED IN 
                //ping succeeds and a user is found
                elseif( ($user != null) && ($online == 1) ){
                    //user will be the value from $row['username']
                    $class = "loggedin";
                    $state = "Logged In";
                }

                //OFFLINE
                //if No ping make user and class name show offline
                else{
                    $user  = "No User";
                    $class = "offline";
                    $state = "Offline";
                }
                    //display DIV with the content inside
                echo '<div class="station_info_ ' . $class . '" id="station_info_' . $id . ' circle" rel="' . $class . '" style="left:' . $x_pos . 'px;top:' . $y_pos . 'px;"><p>User:' . $user .'<br>Station:' . $hostname . '<br>Pod:' . $sta_num . '<br>Section:' . $sec_name . '<br>State:' . $state .'<br></p></div>' . "\n";

You need CSS to do that. No need to use SBG to do a pulsating circle, it's overkill IMO. — Christian Bonato, Dec 02 '14 at 14:01
@Bonatoc thats why I need help, I'm not that great with CSS. I have bad imagination lol — alda1234, Dec 02 '14 at 14:02
You have to use JQuery $ajax on the client-side, and use the shown above code as a REST system. Once php returns the value, you use jQuery and addClass/removeClass to target a pure html "circle" (a div with width = height, with exagerated rounded borders). Give me 5 minutes, I'm making a fiddle with the CSS aspect of pulsating. — Christian Bonato, Dec 02 '14 at 14:06
If you want to, you can use the html 5 animation tags to make your shapes to blink and you can make that animation endless, like this: http://stackoverflow.com/questions/11828179/svg-animation-opacity-on-loop . Also, take a fast look at this article too, it personally helped me a lot: http://css-tricks.com/guide-svg-animations-smil/ . In any case, you can either choose to act with javascript or css, I would go with CSS though, since SVGs natively supports animations. — briosheje, Dec 02 '14 at 14:09
@briosheje interesting article I will look into it thanks! I know that SVGs is the best option to use with CSS. I just need to practice more CSS, I find its the hardest for me. thanks! — alda1234, Dec 02 '14 at 14:15

score 3 · Accepted Answer · answered Dec 02 '14 at 14:35

A basic CSS for making your circle pulsate (decrease milliseconds at will, but I suggest to not make it blink, it's visually a bit ugly IMO) would be :

#circle{
height:2rem;
width:2rem;

border-radius: 4rem;

opacity: 0.0;

-webkit-animation: pulsate 1000ms ease-out;
-webkit-animation-iteration-count: infinite; 

-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

@-webkit-keyframes pulsate {
0% {opacity: 0.1;}
40% {opacity: 1.0;}
60% {opacity: 1.0;}
100% {opacity: 0.1;}
}

Here's a JSFiddle : http://jsfiddle.net/bonatoc/7b0a45hq/27/

Now you need to put your REST logic (basically the PHP code you already have, but it would be better to use a function that returns the name of the class (named same as CSS), and you would use it with addClass/removeClass as shown in the fiddle).

Instead of JQuery's .click(), you would use JQuery's ajax, like the offical example shows :

$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});

hey, awesome! I kept trying to incorporate your solution since you posted it but I'm having problems. My toggle stopped working and nothing shows up. [heres the fiddle](http://jsfiddle.net/7whf3czv/) I tried to fit the different class and id names in the same DIV since thats where everything is supposed to show up. I didn't quite understand the ajax call your talking about ? thanks again — alda1234, Dec 02 '14 at 15:07
I think you didn't close your brackets properly. Use Chrome Dev Tools > Console to see what line the error is. Regarding AJAX, I suppose your want your front-end app to "ask" your server for the user's status ? Does the login happen on the backend (server, PHP) or the front-end (client, JS) ? If it's the first case, on document ready, you fire up the AJAX request, then it returns the user's status, then you AddClass or removeClass : http://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function — Christian Bonato, Dec 03 '14 at 10:22

How to make a flickering circle?

1 Answers1