How do I leave user messages on different sides of the chat?

Asked

Viewed 114 times

1

I am developing a chat using PHP, Mysql and jQuery.

My question is how can I make the users' message stay one to 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 that image can help understand what I want:

Ten

php css
  • 4

    Use CSS. For more information, edit your question and place the HTML and CSS codes. Don’t put the full page code, just what’s related to the problem, but focus on crafting a [mcve].

  • 1

    I guess you forgot to read what a [mcve].

1 answer

2

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>
<div class="chat">

</div>

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

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 is only an example, you will have to adapt according to your need.

You can see it working here

Browser other questions tagged php css

You are not signed in. Login or sign up in order to post.