Your Style Sheet in Realtime

1

<!-- DIV to be Updated -->
<div id=update-this-with-css class=original-class>
    <p>This DIV will be updated via remote call.</p>
</div>

2

<div id=pubnub></div>
<script src=http://cdn.pubnub.com/pubnub-3.1.min.js></script>
<script>(function(){
// -----------------------------------------------------------------------
// Define the channel to broadcast your updates on.
// In this case we are broadcasting updates to update a class-name
// -----------------------------------------------------------------------
var channel = 'update-your-styles-sheet-in-real-time';

// -----------------------------------------------------------------------
// On Click/Touch, "Broadcast CSS Update" to everyone.
// -----------------------------------------------------------------------
PUBNUB.bind( 'click', PUBNUB.$('send-css-update'), function() {
    PUBNUB.publish({
        channel : channel,
        message : {
            'element-id' : PUBNUB.$('element-id-to-update').value,
            'css'        : PUBNUB.$('inline-css').value
        }
    })
} );

// -----------------------------------------------------------------------
// On Receive Broadcast, Execute the CSS Updates.
// This happens for everyone who is on this page.
// -----------------------------------------------------------------------
PUBNUB.subscribe({
    channel  : channel,
    callback : function(message) {
        PUBNUB.attr(
            PUBNUB.$(message['element-id']),
            'style',
            message['css']
        );
    }
});
})();</script>