Question

I’m making a thing which acts like chat convo, you can next another message by pressing a space key, but it didn’t work, there is a live code:

http://jsfiddle.net/VCpqs/7/

Can anyone to explain it how to order events by pressing a key each one to next message?

Thanks!

Answer 1

Is this what you’re looking for: http://jsfiddle.net/VCpqs/11/ ?

You need to keep a track of which message is currently being displayed (I’m using a class current for that), and accordingly hide that message and display only the next one.

This is the jquery:

$(document).keyup(function(event) {
    if (event.which === 32) {
        if ($('#msg1').hasClass('current'))
        {
            $('#msg1').hide('slow').removeClass('current');
            $('#msg2').show('slow').addClass('current');
        }
        else if ($('#msg2').hasClass('current'))
        {
            $('#msg2').hide('slow').removeClass('current');
            $('#msg3').show('slow').addClass('current');
        }
    }  
}); 

Good to know you got it working in a loop. I was just working to implement it in a loop as well, and this is what I got: http://jsfiddle.net/VCpqs/18/

var messages = new Array('msg1','msg2','msg3');

$(document).keyup(function(event) {
    if (event.which === 32) {
        for (x in messages)
        {
            if ($('#'+messages[x]).hasClass('current'))
            {
                $('#'+messages[x]).hide('slow').removeClass('current');
                $('#'+messages[(parseInt(x)+1)]).show('slow').addClass('current');                
                break;
            }
        }      
    }  
});