อยากสอบถามเกี่ยวกับ การวนลูปค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากสอบถามเกี่ยวกับ การวนลูปค่ะ

อยากสอบถามเกี่ยวกับ การวนลูปค่ะ

พี่นิคค่ะ พอดีหนูทำมาหลายวิธีแล้วค่ะ ก็ยังไม่ได้เลย ไม่รุ้ว่าต้องวนยังไงถึงค่ะ
อย่างเช่น

A: hey
haha :B

อยากให้อยู่ในรูปแบบนี้อ่ะค่ะ เหมือนตัว chat ในไลน์เลยค่ะ
แต่ที่นี้หนูไม่รุ้ว่า จะต้องวนยังไง

รบกวนพี่นิคช่วยแนะนำหน่อยค่ะ ช่วยหนูด้วยนะค่ะ ติดตรงนี้จริงๆค่ะ

และอยากสอบถามพี่นิคอีกสักข้อค่ะ คือ หนูพยยามทำ scroll bar ให้เลื่อนมาอยู่ข้อความล่าสุด แต่ไม่ว่าจะทำยังไงมันก็ไม่มาสักที

รอบกวนพี่นิคช่วยดูให้หน่อยนะค่ะ

อันนี้จะส่วนของ chat พูดคุยสลับไปมาค่ะ

<?php
include("inc/dbconnect.php");
			  	$query = "select*from user left join chat on user.user_id = chat.user_id where chat.user_id = '1'";
				$run = $con->query($query);
				
				
				$query1 = "select*from user left join chat on user.user_id = chat.user_id where chat.user_id = '2'";
				$run1 = $con->query($query1);
	
			  ?>
              <?php 
			  	
			  	while($row = $run->fetch_array()) : 
			  ?>
              <div class="answer left">
                <div class="avatar">
                  <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                  <div class="status offline"></div>
                </div>
                <div class="name"> <?=$row["user_firstname"]; ?></div>
                <div class="text">
                  <?=$row["message"]; ?>
                </div>
                <div class="time"><? echo formatDate($row["date"]); ?></div>
              </div>
              
              
              <? while($row1 = $run1->fetch_array()) : ?>
              
              <div class="answer right">
                <div class="avatar">
                  <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                  <div class="status offline"></div>
                </div>
                <div class="name"><?=$row1["company_name"]; ?></div>
                <div class="text">
                  <?=$row1["message"]; ?>
                </div>
                <div class="time"><? echo formatDate($row1["date"]); ?></div>
              </div>
              
             
              
			  <?php  endwhile; ?>  
			  <?php endwhile; ?>

หนูทำได้แต่แค่อันแรกอ่ะค่ะ พอคุยต่อ มันก็ไม่สลับแล้วค่ะ ไม่รุ้จะต้องทำยังไงค่ะ T^T

Chickenkook 23-08-2016 15:27:13

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ส่วนอันนี้จะเป็น โค้ดใส่ส่วนของหน้า index ค่ะ
ที่อยากให้ สกอร์บาร์ เลื่อนลงมาล่างสุดของข้อความค่ะ

<?php

include("inc/dbconnect.php");

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
    <!--  All snippets are MIT license http://bootdey.com/license -->
    <!-- 
    	The codes are free, but we require linking to our web site.
    	Why to Link?
    	A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google! 
    	Where to Put the Link?
    	home, about, credits... or in a good page that you want
    	THANK YOU MY FRIEND!
    -->
    <title>Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script>
		function ajax(){
			var req = new XMLHttpRequest();
			
			req.onreadystatechange = function(){
			
				if(req.readyState == 4 && req.status == 200){
				
					document.getElementById('chat').innerHTML = req.responseText;
					
					
						
				}
			
			}
			
			req.open('GET','chat.php',true);
			req.send();
		}
		
		setInterval(function(){ajax()},1000);
	</script>
    <style type="text/css">
    	body{
    margin-top:20px;
    background:#eee;
}
.row.row-broken {
    padding-bottom: 0;
}
.col-inside-lg {
    padding: 20px;
}
.chat {
    height: calc(100vh - 180px);
}
.decor-default {
    background-color: #ffffff;
}
.chat-users h6 {
    font-size: 20px;
    margin: 0 0 20px;
}
.chat-users .user {
    position: relative;
    padding: 0 0 0 50px;
    display: block;
    cursor: pointer;
    margin: 0 0 20px;
}
.chat-users .user .avatar {
    top: 0;
    left: 0;
}
.chat .avatar {
    width: 40px;
    height: 40px;
    position: absolute;
}
.chat .avatar img {
    display: block;
    border-radius: 20px;
    height: 100%;
}
.chat .avatar .status.off {
    border: 1px solid #5a5a5a;
    background: #ffffff;
}
.chat .avatar .status.online {
    background: #4caf50;
}
.chat .avatar .status.busy {
    background: #ffc107;
}
.chat .avatar .status.offline {
    background: #ed4e6e;
}
.chat-users .user .status {
    bottom: 0;
    left: 28px;
}
.chat .avatar .status {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    position: absolute;
}
.chat-users .user .name {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-users .user .mood {
    font: 200 14px/20px "Raleway", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*****************CHAT BODY *******************/
.chat-body h6 {
    font-size: 20px;
    margin: 0 0 20px;
}
.chat-body .answer.left {
    padding: 0 0 0 58px;
    text-align: left;
    float: left;
}
.chat-body .answer {
    position: relative;
    max-width: 600px;
    overflow: hidden;
    clear: both;
}
.chat-body .answer.left .avatar {
    left: 0;
}
.chat-body .answer .avatar {
    bottom: 36px;
}
.chat .avatar {
    width: 40px;
    height: 40px;
    position: absolute;
}
.chat .avatar img {
    display: block;
    border-radius: 20px;
    height: 100%;
}
.chat-body .answer .name {
    font-size: 14px;
    line-height: 36px;
}
.chat-body .answer.left .avatar .status {
    right: 4px;
}
.chat-body .answer .avatar .status {
    bottom: 0;
}
.chat-body .answer.left .text {
    background: #ebebeb;
    color: #333333;
    border-radius: 8px 8px 8px 0;
}
.chat-body .answer .text {
    padding: 12px;
    font-size: 16px;
    line-height: 26px;
    position: relative;
}
.chat-body .answer.left .text:before {
    left: -30px;
    border-right-color: #ebebeb;
    border-right-width: 12px;
}
.chat-body .answer .text:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    border: 18px solid transparent;
    border-bottom-width: 0;
}
.chat-body .answer.left .time {
    padding-left: 12px;
    color: #333333;
}
.chat-body .answer .time {
    font-size: 16px;
    line-height: 36px;
    position: relative;
    padding-bottom: 1px;
}
/*RIGHT*/
.chat-body .answer.right {
    padding: 0 58px 0 0;
    text-align: right;
    float: right;
}

.chat-body .answer.right .avatar {
    right: 0;
}
.chat-body .answer.right .avatar .status {
    left: 4px;
}
.chat-body .answer.right .text {
    background: #7266ba;
    color: #ffffff;
    border-radius: 8px 8px 0 8px;
}
.chat-body .answer.right .text:before {
    right: -30px;
    border-left-color: #7266ba;
    border-left-width: 12px;
}
.chat-body .answer.right .time {
    padding-right: 12px;
    color: #333333;
}

/**************ADD FORM ***************/
.chat-body .answer-add {
    clear: both;
    position: relative;
    margin: 20px -20px -20px;
    padding: 20px;
    background: #46be8a;
}
.chat-body .answer-add input {
    border: none;
    background: none;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    padding: 0;
    color: #ffffff;
}
.chat input {
    -webkit-appearance: none;
    border-radius: 0;
}
.chat-body .answer-add .answer-btn-1 {
    /*background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-40.png") 50% 50% no-repeat;*/
    right: 56px;
}
.chat-body .answer-add .answer-btn {
    display: block;
    cursor: pointer;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    margin-top: -18px;
}
.chat-body .answer-add .answer-btn-2 {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-41.png") 50% 50% no-repeat;
    right: 20px;
}
.chat input::-webkit-input-placeholder {
   color: #fff;
}

.chat input:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

.chat input::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

.chat input:-ms-input-placeholder {  
   color: #fff;  
}
.chat input {
    -webkit-appearance: none;
    border-radius: 0;
}


/* inbox */

.float-label-control { position: relative; margin-bottom: 1.5em; }
    .float-label-control ::-webkit-input-placeholder { color: transparent; }
    .float-label-control :-moz-placeholder { color: transparent; }
    .float-label-control ::-moz-placeholder { color: transparent; }
    .float-label-control :-ms-input-placeholder { color: transparent; }
    .float-label-control input:-webkit-autofill,
    .float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
    .float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
        .float-label-control input:focus,
        .float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control textarea:focus { padding-bottom: 4px; }
    .float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
    .float-label-control textarea { padding: 0.1em 0em 5px 0em; }
    .float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
    .float-label-control input.empty + label,
    .float-label-control textarea.empty + label { top: 0.1em; font-size: 1.5em; animation: none; -webkit-animation: none; }
    .float-label-control input:not(.empty) + label,
    .float-label-control textarea:not(.empty) + label { z-index: 1; }
    .float-label-control input:not(.empty):focus + label,
    .float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
    .float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
    .float-label-control.label-bottom input:not(.empty) + label,
    .float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }


@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}


    </style>
</head>
<body onLoad="ajax();">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
<div class="content container-fluid bootstrap snippets">
      <div class="row row-broken">
        <div class="col-sm-3 col-xs-12">
          <div class="col-inside-lg decor-default chat" style="overflow: hidden; outline: none;" tabindex="5000">
            <div class="chat-users">
              <h6>Online</h6>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="User name">
                    <div class="status online"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="User name">
                    <div class="status busy"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="User name">
                    <div class="status offline"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
                <div class="user">
                    <div class="avatar">
                    <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="User name">
                    <div class="status off"></div>
                    </div>
                    <div class="name">User name</div>
                    <div class="mood">User mood</div>
                </div>
            </div>
          </div>
        </div>
        <div class="col-sm-9 col-xs-12 chat" style="overflow: hidden; outline: none;" tabindex="5001">
          <div class="col-inside-lg decor-default">
            <div class="chat-body">
              <h6>Chat</h6>
              
              <div id="chat"></div>
          
              
              <form action="" method="post">
              <div class="answer-add float-label-control">
            
                <input type="text" name="message" placeholder="พิมพ์ข้อความ" autocomplete="off">
                <input type="submit" class="answer-btn answer-btn-1" style="color:#46be8a;" name="submit" value="Send">
              	
              </div>
              
              
              </form>
              <?php
			  if(isset($_POST['submit'])){
			  	$query = "insert into chat (user_id,message) values ('1','".$_POST["message"]."')";
				
				$run = $con->query($query);
				
				/*if($run)
				{
					echo "<embed loop='flase' src='' hidden='true' autoplay='true'/> ";
				}*/
			  }
			  ?>
              
            </div>
          </div>
        </div>
      </div>
    </div>

<script src="js/bootstrap.js"></script>
<script type="text/javascript">
	$(function(){
    $(".chat").niceScroll();
	
	
})



</script>





<script>
/* Float Label Pattern Plugin for Bootstrap 3.1.0 by Travis Wilson
**************************************************/

(function ($) {
    $.fn.floatLabels = function (options) {

        // Settings
        var self = this;
        var settings = $.extend({}, options);


        // Event Handlers
        function registerEventHandlers() {
            self.on('input keyup change', 'input, textarea', function () {
                actions.swapLabels(this);
            });
        }


        // Actions
        var actions = {
            initialize: function() {
                self.each(function () {
                    var $this = $(this);
                    var $label = $this.children('label');
                    var $field = $this.find('input,textarea').first();

                    if ($this.children().first().is('label')) {
                        $this.children().first().remove();
                        $this.append($label);
                    }

                    var placeholderText = ($field.attr('placeholder') && $field.attr('placeholder') != $label.text()) ? $field.attr('placeholder') : $label.text();

                    $label.data('placeholder-text', placeholderText);
                    $label.data('original-text', $label.text());

                    if ($field.val() == '') {
                        $field.addClass('empty')
                    }
                });
            },
            swapLabels: function (field) {
                var $field = $(field);
                var $label = $(field).siblings('label').first();
                var isEmpty = Boolean($field.val());

                if (isEmpty) {
                    $field.removeClass('empty');
                    $label.text($label.data('original-text'));
                }
                else {
                    $field.addClass('empty');
                    $label.text($label.data('placeholder-text'));
                }
            }
        }


        // Initialization
        function init() {
            registerEventHandlers();

            actions.initialize();
            self.each(function () {
                actions.swapLabels($(this).find('input,textarea').first());
            });
        }
        init();


        return this;
    };

    $(function () {
        $('.float-label-control').floatLabels();
    });
})(jQuery);
</script>
</body>
</html>

รอบกวนด้วยนะค่ะพี่นิค

chickenkook 23-08-2016 15:29

ความคิดเห็นที่ 2

การใช้งานและปรับแต่งที่ซับซ้อนคงต้องลองดูเอง

สว่นการจัดตำแหน่งซ้ายขวา ของข้อมูลการ chat ลองใช้วิธีใช้เงื่อนไขสถานะของผู้สนทนา เป็นตัวกำหนด
เช่นผู้ใช้งานนั้นๆ อยู่ด้านซ้ายเสมอ คู่สนทนาอยู่ด้านขวา ตรงนี้ขึ้นกับการออกแบบการวางข้อมูล
ส่วน scroll ใช้ jquery ช่วยน่าจะได้ http://rocha.la/jQuery-slimScroll

หรือลองดูการกำหนด การ scroll นี้เป็นแนวทาง

ลองใช้ firebase กับการแสดงข้อมูล realtime ฝึกหัดจากตัวอย่าง ตอนที่ 1

https://www.ninenik.com/content.php?arti_id=520 via @ninenik

ninenik 23-08-2016

ความคิดเห็นที่ 3

คิดหนูคิดว่า มันเป็นที่ว่า ไม่ยอมเป็นบล็อกๆค่ะ
ต้องใส่ โค้ดนี้เข้าไปมันถึงจะแยกข้อความกันได้

 <?php 
			  	while($row = $run->fetch_array()) : 
			  ?>
              <div class="answer left">
                <div class="avatar">
                  <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                  <div class="status offline"></div>
                </div>
                <div class="name"> <?=$row["user_firstname"]; ?></div>
                <div class="text">
                  <?=$row["message"]; ?>
                </div>
                <div class="time"><? echo formatDate($row["date"]); ?></div>
              </div>
              
              
              <? while($row1 = $run1->fetch_array()) : ?>
              
              <div class="answer right">
                <div class="avatar">
                  <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">
                  <div class="status offline"></div>
                </div>
                <div class="name"><?=$row1["user_firstname"]; ?></div>
                <div class="text">
                  <?=$row1["message"]; ?>
                </div>
                <div class="time"><? echo formatDate($row1["date"]); ?></div>
              </div>
                 

			  <?php  endwhile; ?>  
			  <?php endwhile; ?>

สมมุติว่าคุยกันมี 6 ข้อความ ต้องใส่โค้ดในส่วนข้างยน 6 ข้อความ
อย่างนี้พี่นิค พอมีคำแนะนำ เกี่ยวการวนลูปไหมค่ะ ไม่รุ้ว่าต้องทำยังไงอ่ะค่ะ ไม่มีแนวทางเลย

chickenkook 23-08-2016 17:27

ความคิดเห็นที่ 4

สำคัญน่าจะอยู่ในส่วนของกำหนดตารางเก็บข้อมูล ต้องใช้ตารางเดียวกัน วนลูปแค่ whlie เดียว แล้วเอาค่า
user_id มาเป็นตัวกำหนดจัดซ้ายขวา ประมาณนี้

<?php
while($row = $run->fetch_array()) :  
?>
             <div class="answer <?=($_SESSION['ses_user_id_คนที่กำลังสนทนา']==$row['user_id_ที่บันทึก'])?"right":"left"?>">  
               <div class="avatar">  
                 <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">  
                 <div class="status offline"></div>  
               </div>  
               <div class="name"> <?=$row["user_firstname"]; ?></div>  
               <div class="text">  
                 <?=$row["message"]; ?>  
               </div>  
               <div class="time"><? echo formatDate($row["date"]); ?></div>  
             </div>  

<?php } ?>

ไว้ทำเป็นบทความ php chat ajax อย่างง่าย ในเว็บไว้เป็นแนวทาง

จริงๆ สามารถไปใช้ตัวฟรีได้ หรือไม่ก็ต้องลองใช้แบบ nodejs แบบนั้นจะเหมาะกว่า แต่ยังไม่เคยลองเหมือนกัน
ส่วนการใช้ setInterval เพื่อโหลดข้อมูล chat ที่กำลังใช้อยู่ อาจจะทำให้ server ทำงานหนัก ถ้ามีคนใช้งานจำนวนาก ต้องลองทดสอบดู

ninenik 23-08-2016

ความคิดเห็นที่ 5

ขอบคุณค่ะพี่นิค เดี๋ยวจะลองปรับดู และนำไปประยุกต์นะค่ะ ขอบคุณสำหรับบทความดีๆค่ะ ขอบคุณสำหรับความรู้ใหม่ๆนะค่ะพี่นิค :) ขอบคุณค่ะ

chickenkook 23-08-2016 21:19

ความคิดเห็นที่ 6

ลองดูเนื้อหานี้เป็นแนวทาง

สร้าง php ajax chat ใช้งานร่วมกับฐานข้อมูล อย่างง่าย

https://www.ninenik.com/content.php?arti_id=724 via @ninenik

ninenik 23-08-2016

ความคิดเห็นที่ 7

ขอบคุณค่ะพี่นิค ^^

chickenkook 25-08-2016 11:56

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน