Question

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);   

Answer 1

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;  
}