Click here to Skip to main content
15,353,606 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
  <div class="chat-body better-scrollbar">
            <ul data-bind="foreach: chatMessages">
                <li>
                    <div class="chat-message" data-bind="css: $data.isMine() === true ? 'ismine' : 'isother'">
                        <div class="left-side">
                            <img src="~/Content/icons/avatar1.png" class="message-avatar" data-bind="attr: { src: $data.avatar }" />
                        </div>
                        <div class="message-content" data-bind="attr: { id: 'message-' + $data.id() }">
                            
                            
                                class="glyphicon glyphicon-time">
                                <span >
                            </span>
                            

                        </div>
                        <div class="stick-message">
                            <a href="#" data-bind="click: $parent.stickMess.bind($parent, $data)"></a>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
        <div class="chat-input">
            ^__i class="glyphicon glyphicon-send">
            <div class="actions">
                <label for="btnUpload" class="custom-file-upload">
                    <img src="~/Content/icons/photo1.png" alt="" />
                </label>
                <input type="hidden" id="userReceiverId" value="" />
                <input type="file" id="btnUpload" accept="image/*" name="files" />
                <a id="emojibtn" href="#"><img src="~/Content/icons/smile1.png" /></a>
            </div>
            <div class="emoticon-container hidden" id="emojis-container">
                <a href="#">
                    <input type="hidden" value=":)" />
                    <img src="~/Content/emojis/emoji1.png" />
                </a>
                <a href="#">
                    <input type="hidden" value=":P" />
                    <img src="~/Content/emojis/emoji2.png" />
                </a>
                <a href="#">
                    <input type="hidden" value=":O" />
                    <img src="~/Content/emojis/emoji3.png" />
                </a>
                <a href="#">
                    <input type="hidden" value=":-)" />
                    <img src="~/Content/emojis/emoji4.png" />
                </a>
                <a href="#">
                    <input type="hidden" value="B|" />
                    <img src="~/Content/emojis/emoji5.png" />
                </a>
                <a href="#">
                    <input type="hidden" value=":D" />
                    <img src="~/Content/emojis/emoji6.png" />
                </a>
                <a href="#">
                    <input type="hidden" value="<3" />
                    <img src="~/Content/emojis/emoji7.png" />
                </a>
            </div>
            <input id="chat-message" type="text" value="" data-bind="value:message, valueUpdate: 'afterkeydown', event: { keypress: onEnter }" placeholder="Type mesage here...." />
        </div>
    </div>

    @*end private chat*@ 


    <div class="col-md-3 right" >
        <div class="header">
            <h5>ALL FRIENDS (<span data-bind="text: filteredChatUsers().length">0</span>)</h5>
        </div>
        <div class="chat-users better-scrollbar">
            <ul id="user-list" data-bind="foreach: filteredChatUsers" >
                <li data-bind="click: $parent.joinSingleRoom.bind($parent, $data)" >
                    <div class="user-inner">
                        <div class="left-side">
                            <img src="~/Content/icons/avatar1.png" data-bind="attr: { src:$data.avatar }" class="user-avatar" />
                        </div>
                        <div class="right-side">
                            <input type="hidden" class="username" data-bind="value:$data.userName" />
                            
                            <!-- ko if: $data.device -->
                            
                            <!-- /ko -->
                            @*<small data-bind="text: $data.device"></small>*@

                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="search-user">
            <input type="text" class="" placeholder="Search someone..." data-bind="value: filter, valueUpdate: 'afterkeydown'" />
        </div>
    </div>
</div>


What I have tried:

hi, here is the html code for list of users, private talk but i want is ...when click user name from list ... popup dragable chat window for private chat has to come...so how can i create this ...how can i do this ??? pls help me
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900