How to leave messages from users on different sides in the chat? [closed]

Question

How to leave messages from users on different sides in the chat? [closed]

Navigation

#1 by (2 votes)

1

I'm developing a chat using PHP, MySQL and jQuery.

My question is how can I make the users' messages stay on each side to differentiate?

Follow the PHP code:

             echo "
                <div class=\"row msg_container base_sent\">
                    <div class=\"col-md-10 col-xs-10\">
                        <div class=\"messages msg_sent\">
                            <p style=\"color: #303030\">$mensagem</p>
                            <time datetime=\"2009-11-13T20:00\" style=\"color: #303030\">$nick - $newHora</time>
                        </div>
                    </div>
                    <div class=\"col-md-2 col-xs-2 avatar\">
                        <img src=\"http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg\" class=\"img-responsive\">
                    </div>
                </div>";

I believe the image can help you understand what I want:

php css

asked by anonymous 11.07.2017 / 19:30

1 answer

How to select the name of a column in MySQL? As per multiple elementByID within a single variable?

score 2 · Answer 1

let mensagens = [
    {
        'mensagem': 'Olá',
        'status': 0
    },
    {
        'mensagem': 'Olá, Tudo bem?',
        'status': 1
    },
    {
        'mensagem': 'Tudo e você?',
        'status': 0
    },
    {
        'mensagem': 'Como vai a familia?',
        'status': 0
    },
    {
        'mensagem': 'Por aqui tudo está bem tambem',
        'status': 1
    },
];

mensagens.map(val => {
    console.log(val)
    if(val.status == 0){
        $('.chat').append('<span class="msgLeft">'+val.mensagem+'</span>')
    }else{
        $('.chat').append('<span class="msgRight">'+val.mensagem+'</span>')
    }

})

.chat{
    background: #F5F5F5;
    width: 300px;
    height: 400px;
}

.chat .msgLeft{
    width: 100%;
    float: left;
    text-align: left;
}

.chat .msgRight{
    width: 100%;
    float: left;
    text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="chat">

</div>

For this you can use CSS and JS. Here's an example of how you would do it.

CSS

.chat{
    background: #F5F5F5;
    width: 300px;
    height: 400px;
}

.chat .msgLeft{
    width: 100%;
    float: left;
    text-align: left;
}

.chat .msgRight{
    width: 100%;
    float: left;
    text-align: right
}

Javascript

let mensagens = [
    {
        'mensagem': 'Olá',
        'status': 0
    },
    {
        'mensagem': 'Olá, Tudo bem?',
        'status': 1
    },
    {
        'mensagem': 'Tudo e você?',
        'status': 0
    },
    {
        'mensagem': 'Como vai a familia?',
        'status': 0
    },
    {
        'mensagem': 'Por aqui tudo está bem tambem',
        'status': 1
    },
];

mensagens.map(val => {
    console.log(val)
    if(status == 0){
        $('.chat').append('<span class="msgLeft">'+val.mensagem+'</span>')
    }else{
        $('.chat').append('<span class="msgRight">'+val.mensagem+'</span>')
    }

})

HTML

Remembering that it's just an example, you'll have to adapt it as you need it.

You can see it working here