Build

Your Style Sheet in Real time

2 min readStephen Blum on Jul 9, 2011
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

First: sign-up for a PubNub account. You have always wanted to send CSS updates to your website or HTML5 mobile app in Real time. How do you do this? It was hard before PubNub right? Change the value ...

First: sign-up for a PubNub account. You have always wanted to send CSS updates to your website or HTML5 mobile app in Real time. 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>

This DIV will be updated via remote call.

Element To Update

Inline CSS

– Everyone will see the change, INSTANTLY!

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.

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff