I've got a socket.IO application, which also saves the data to MongoDB.
I'm trying to find a method that blur's the entire sentence except for the last word.
The code for where the lines will be:
{#storylines}
<li>{text}</li>
{/storylines}
<input id="newstoryline" name="newstoryline" class="StoryBoard" type="text" placeholder="" onKeyDown="countChars()" onKeyUp="countChars()"/>
Socket.IO:
socket.on('updatechat', function (username, data) {
$('#newstoryline').before('<li>' + data + '</li>');
});
The application will also send {maxlines} to the template will will include the number of lines left. Basically i'm looking for a way to say:
if {maxlines} > 0 then blur the 'data' except for the last word.
So if the message from the server was "Hello my name is Jim!" i would want to to be " * ** ** Jim!" so the user can only see the word Jim!
I'm using Node.JS/Mongoose/Socket.IO
Would i have to implement some sort of javascript function on the client side to check if {maxlines} > 0 and then apply the blur effec to the lines or would i do something on the server-side?
Currently this is how the server sends information:
app.get('/s/:id', function(req, res){
Story.findOne({ sid: req.params.id }, function(err, story){
if (err) {
res.redirect('/')
}
else if(story == null) {
res.redirect('/')
}
else{
res.render('story', {
title: 'Storifi',
storytitle: story.title,
storylines: story.lines,
lines: story.maxlines,
storyid: story.sid
maxlines: story.maxlines
});
}
});
});
Socket.IO (server-side):
socket.on('sendchat', function (data) {
// we tell the client to execute 'updatechat' with 2 parameters
io.sockets.in(socket.room).emit('updatechat', socket.username, data);
I agree with lix. Wrap the section that you wish to blur with a span tag, and apply style to that tag with css.
socket.on('updatechat', function (username, data) {
var dataSplit= data.split(' ');
var lastWord = dataSplit.pop();
var toBlur= '<span class="blur">' + dataSplit.join(' ') + '</span>';
$('#newstoryline').before('<li>' + toBlur + lastWord + '</li>');
});
-------------------css---------------------------------
.blur{
color: transparent;
text-shadow: 0 0 5px #000;
}