CODEWITHSUNDEEP
javascriptjquerycss
TruePS
TruePS

Reputation: 523

How to multiple open chat boxes using Jquery?

I want to open one chat box for every user.I have one div in the code I want the same div to open for every user(much like facebook) when i click on say 5 users 5 chatboxes gets open but here I am stuck the chat box is opening for only one user.If anybody know the same thing using Javascript do respond.

Here is my code

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <style>
        body {
            margin:0;
            padding:0;
        }
        #contact {
            position:absolute;
            right:2px;
            bottom:2px;
            width:270px;
            font-size:12px;
        }
        #contact #button {
            position:relative;
            right:0;
            bottom:0;
            padding:0 0 0 200px;
        }
        #contact #button a {
            padding:0 5px;
            text-align:right;
            background:green;
            cursor:pointer;
        }
        #contact form {
            border:1px solid #666;
            background:#dfdfdf;
            padding:10px;
            display:none;
        }
        form label {
            float:left;
            width:40%;
        }
        form input[type=text] {
            float:left;
            width:50%;
        }
        form input[type=text] {
            float:left;
            width:50%;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

    </script>
    <script>
        function abc() {
            var val = '#Prashant a';
            $(val).on('click', function() {
                $('#contact form').toggle();
            });
        }
    </script>
</head>

<body>
    <div id="contact" style="width: 500px">
        <ul id="button">
            <li style="display: inline-block" id="Prashant" onclick="abc()"> <a>Prashant</a>
            </li>
            <li style="display: inline-block" id="Katrina" onclick="abc()"><a>Katrina</a>
            </li>
            <li style="display: inline-block" id="Priyanka" onclick="abc()"><a>Priyanka</a>
            </li>
            <li style="display: inline-block" id="Kareena" onclick="abc()"><a>Kareena</a>
            </li>
            <li style="display: inline-block" id="Anushka" onclick="abc()"><a>Anushka</a>
            </li>
        </ul>
        <!--<div id="button"><a>Contact Us</a></div>  -->
        <form>
            <div>
                <label for="message">Message<i class="icon-star"></i>
                </label>
                <textarea id="message" name="message" cols="11" rows="11"></textarea>
            </div>
            <div>
                <input id="send" name="send" type="submit" value="Send" />
            </div>
        </form>
    </div>
</body>

Upvotes: 2

Views: 4232

Answers (2)

Martin Forsstedt
Martin Forsstedt

Reputation: 52

well, I would watch for the click event and then append the new div to the existing div like so: 

$('a.user').click(function(){
    var newDiv = '<div></div>';
    $('#contact').append(newDiv);
});

And then its just a matter of styling?

Quick and dirty but you get the point - http://jsfiddle.net/36pcu/3/

Upvotes: 1

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

You will get a logic from here

Add a class user to contact list and call it from JavaScript. Append form for every user in body

$(document).ready(function() {
    $(".user").on('click', function () {
        $("body").append($('#contact form').html());
    });
});



<div id="contact" style="width: 500px">
<ul id="button">
    <li style="display: inline-block" id="Prashant" class="user"> <a>Prashant</a>

    </li>
    <li style="display: inline-block" id="Katrina" class="user"><a>Katrina</a>

    </li>
    <li style="display: inline-block" id="Priyanka" class="user"><a>Priyanka</a>

    </li>
    <li style="display: inline-block" id="Kareena" class="user"><a>Kareena</a>

    </li>
    <li style="display: inline-block" id="Anushka" class="user"><a>Anushka</a>

    </li>
</ul>
<!--<div id="button"><a>Contact Us</a></div>  -->
<form>
    <div>
        <label for="message">Message<i class="icon-star"></i>

        </label>
        <textarea id="message" name="message" cols="11" rows="11"></textarea>
    </div>
    <div>
        <input id="send" name="send" type="submit" value="Send" />
    </div>
</form>

Upvotes: 1

Related Questions