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
<!-- 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.
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=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>
Have questions? Sign up and then contact us. Or Mention us @PubNub Twitter.
