Your Style Sheet in Realtime

First: sign-up for a PubNub account. You have always wanted to send CSS updates to your website or HTML5 mobile app in Realtime. How do you do this? It was hard before PubNub right? Change the value of the CSS in the text box below, then press “Broadcast CSS Changes” button. What will pressing that button do? This will broadcast the CSS in the text box below. The one called “Inline CSS”. To EVERYONE, not just you. Seriously. Try it with a friend! You must both be on this page at the same time.

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

You can imagine pushing all sorts of changes on the fly using this method. Such as updating the entire look of an app or website. Also changing or adding new images in real-time. Even adding new content in real-time. Of course you will hide the Broadcast Button so only you can push changes on the fly. You must sign-up for a PubNub account.

<div id=pubnub></div>
<script src=https://cdn.pubnub.com/pubnub-3.5.47.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.
// -----------------------------------------------------------------------
$('#send-css-update').bind( 'click', function() {
    console.log("publishing");
    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>

Have questions? Sign up and then contact us. Or Mention us @PubNub Twitter.