blink

blink using css3

by bsorrentino

HTML

<div class="app">
            <h1>JSFIDDLE</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting.....</p>
                <p class="event received">Ready!</p>
            </div>
        </div>

CSS

* {
                -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            }

            body {
                -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
                -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
                -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
                background-color:#E4E4E4;
                background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                background-image:-webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0, #A7A7A7),
                    color-stop(0.51, #E4E4E4)
                );
                background-attachment:fixed;
                font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
                font-size:12px;
                height:100%;
                margin:0px;
                padding:0px;
                text-transform:uppercase;
                width:100%;
            }

            /* Portrait layout (default) */
            .app {
                background:url('theme/images/jsfiddle-logo.png') no-repeat center top; /* 170px x 200px */
                position:absolute;             /* position in the center of the screen */
                left:50%;
                top:50%;
                height:50px;                   /* text area height */
                width:225px;                   /* text area width */
                text-align:center;
                padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with...

JavaScript

var id = "deviceready";
        		
                    var parentElement = document.getElementById(id);
                    var listeningElement = parentElement.querySelector('.listening');
                    var receivedElement = parentElement.querySelector('.received');

                    listeningElement.setAttribute('style', 'display:none;');
                    receivedElement.setAttribute('style', 'display:block;');

                    console.log('Received Event: ' + id);