CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Sarjil Shaikh
Sarjil Shaikh

Reputation: 21

how to assign margin-right to dynamically generated chat boxes

i have done some php and mysql stuff to generate dynamic chat boxes. everything is okay but if there is more then one chat box the problem occurs with alignment. two chat boxes doesn't align with inline-block. I want tyo make chat boxes inline-block but i don't how to do that i have tried many ways but still going through this irritated error please look at my code and tell me where i am doing wrong

look at the current output it overlays each other i want to get it as image placed at right side:

look at the current output it overlays each other i want to get it as image placed at right side

<?
    $con = mysql_connect('localhost','root','');
    mysql_select_db('social_net', $con) or die('error in(application/view/chatting.php) at line 3');
?>
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="facivon.ico">

<title>Facebook like chat</title>
<link href="style.css" rel="stylesheet">
<style>

.chat_box{
    position:fixed;
    right:20px;
    bottom:0px;
    width:250px;
}
.chat_body{
    background:white;
    height:400px;
    overflow-y:scroll;
    border-right: 1px solid rgba(0, 0, 0, 0.28);
    border-left: 1px solid rgba(0, 0, 0, 0.28);
    padding:5px 0px;
}

.chat_head,.msg_head{
    background:#f39c12;
    color:white;
    padding:15px;
    -moz-user-select:none;
    user-select:none;
    font-weight:bold;
    cursor:pointer;
    border-radius:5px 5px 0px 0px;
}

.msg_box{
    position:fixed;
    bottom:-5px;
    display:inline-block;
    border-right: 1px solid rgba(0, 0, 0, 0.28);
    border-left: 1px solid rgba(0, 0, 0, 0.28);
    width:250px;
    background:white;
    border-radius:5px 5px 0px 0px;
}

.msg_head{
    background:#3498db;
    -moz-user-select:none;
    user-select:none;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    resize:none;
}

.close{
    float:right;
    margin:-15px;
    border-radius:0px 5px 0px 0px;
    padding:15px;
    -moz-user-select:none;
    user-select:none;
    cursor:pointer;
    background:rgba(71, 62, 48, 0.63) none repeat scroll 0% 0%;
}
.minimize{
    float:right;
    cursor:pointer;
    padding-right:5px;

}

.user{
    position:relative;
    padding:10px 30px;
}
.user:hover{
    background:#f8f8f8;
    cursor:pointer;

}
.user-0{
    content:'';
    position:absolute;
    background:#535a56;
    height:7px;
    width:7px;
    left:10px;
    top:18px;
    border-radius:4px;
}
.user-1{
    content:'';
    position:absolute;
    background:#2ecc71;
    height:7px;
    width:7px;
    left:10px;
    top:18px;
    border-radius:4px;
}

.msg_a{
    position:relative;
    background:#FDE4CE;
    padding:10px;
    min-height:10px;
    margin-bottom:5px;
    margin-right:10px;
    border-radius:5px;
}
.msg_a:before{
    content:"";
    position:absolute;
    width:0px;
    height:0px;
    border: 10px solid;
    border-color: transparent #FDE4CE transparent transparent;
    left:-20px;
    top:7px;
}


.msg_b{
    background:#EEF2E7;
    padding:10px;
    min-height:15px;
    margin-bottom:5px;
    position:relative;
    margin-left:10px;
    border-radius:5px;
    word-wrap: break-word;
}
.msg_b:after{
    content:"";
    position:absolute;
    width:0px;
    height:0px;
    border: 10px solid;
    border-color: transparent transparent transparent #EEF2E7;
    right:-20px;
    top:7px;
}
#finfrndslink
{
    display:block;
    padding:.6em;
    margin:0px auto;
    width:94%;
    margin-top: 10em;
    background: rgb(54, 42, 42) none repeat scroll 0% 0%;
    text-align: center;
    color: white;
    border-radius: 5px;
}
    </style>
       <script src="<?=base_url().'assets/js/jquery-1.10.1.min.js'?>"></script>
    <script>
    $(document).ready(function(){
        $('.msg_box').hide();
        $('.chat_head').click(function(){
            $('.chat_body').slideToggle('slow');
        });
    });
    </script>
  </head>
  <body>
  <?
    $user_name = $this->session->userdata('user');
    $sql1 = "SELECT * FROM users WHERE user_name='$user_name'";
    $query1 = mysql_query($sql1);
    $row1 = mysql_fetch_assoc($query1);
    $u_id = $row1['u_id'];

    $sql = "SELECT * FROM friends T1 JOIN users T2 ON T1.frnd_id=T2.u_id WHERE T1.u_id='$u_id' && T1.status='confirm'";
    $query3 = mysql_query($sql);
    $query = mysql_query($sql);
    $count = mysql_num_rows($query);
  ?>
  <div class="chat_box">
    <div class="chat_head">Chat</div>
    <div style="display: none;" class="chat_body">  
    <?
    if($count!=0)
    {
        $i=1;
        while($row = mysql_fetch_assoc($query))
        {
            ?>
                <div class="user" id="u<?=$i?>" style="text-transform:capitalize"><span class="user-<?=$row['logged_in'];?>"></span><?=$row['f_name'].' '.$row['l_name']?></div>
            <?
            $i++;
        }
    }
    else
    {
        ?>
        <a href='<?=base_url()?>find_friends' id='finfrndslink'>Find Friends</a>
        <?
    }
    ?>
    </div>
    <?
    $i=1;
        while($row1 = mysql_fetch_assoc($query3))
        {
            ?>
                <script>
                $(document).ready(function(){
                    $('#mh<?=$i?>').click(function(){
                        $('#mw<?=$i?>').slideToggle('slow');
                    });

                    $('#cl<?=$i?>').click(function(){
                        $('#mb<?=$i?>').hide();
                    });

                    $('#u<?=$i?>').click(function(){
                        $('#mw<?=$i?>').show();
                        $('#mb<?=$i?>').show();
                    });

                    $('#ti<?=$i?>').keypress(
                    function(e){
                        if (e.keyCode == 13) {
                            e.preventDefault();
                            var msg = $(this).val();
                            $(this).val('');
                            if(msg!='')
                            $('<div class="msg_b">'+msg+'</div>').insertBefore('#msg_push<?=$i?>');
                            $('#msg_body<?=$i?>').scrollTop($('#msg_body<?=$i?>')[0].scrollHeight);
                        }
                    });
                });
                </script>
                <div class="msg_box" id="mb<?=$i?>" style="right:290px">
                    <div class="msg_head" id="mh<?=$i?>">
                    <font style="text-transform:capitalize"><?=$row1['f_name'].' '.$row1['l_name']?></font>
                    <div class="close" id="cl<?=$i?>" title="Close">x</div>
                    </div>
                    <div class="msg_wrap" id="mw<?=$i?>">
                        <div class="msg_body" id="msg_body<?=$i?>">
                            <div class="msg_a">This is from A   </div>
                            <div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>
                            <div class="msg_a">Wow, Thats great to hear from you man </div> 
                            <div class="msg_push" id="msg_push<?=$i?>"></div>
                        </div>
                    <div class="msg_footer"><textarea class="msg_input" id="ti<?=$i?>" placeholder="write your message here" rows="2"></textarea></div>
                    </div>
                </div>
            <?
            $i++;
        }
    ?>
  </div>
</body>
</html>

Upvotes: 1

Views: 212

Answers (1)

Nicholas
Nicholas

Reputation: 156

You can assign CSS properties with jQuery. One example will be $(selector).css("margin-right", "20px").

Upvotes: 1

Related Questions