CODEWITHSUNDEEP
javascriptjqueryajaxhtml
giantmalik
giantmalik

Reputation: 137

chat box close and open not working from template

This is the Live Chat template from http://www.bypeople.com/css-chat/ and i even checked this template from their:

http://codepen.io/m412c0/pen/rohwn?editors=100

which is working online but when i downloaded their source code then it does not. Here is their ZIP file link:

http://www.uploadmb.com/dw.php?id=1444229266

Here is i also tried to edit i only replaced: <script src="js/index.js"></script> with <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

My edited Code:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Live Chat - CodePen</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
     <script src="js/index.js"></script>

</head>

<body>

  <html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Live Chat</title>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">

</head>
<body>

    <div id="live-chat">

        <header class="clearfix">

            <a href="#" class="chat-close">x</a>

            <h4>John Doe</h4>

            <span class="chat-message-counter">3</span>

        </header>

        <div class="chat">

            <div class="chat-history">

                <div class="chat-message clearfix">

                    <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:35</span>

                        <h5>John Doe</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

                <div class="chat-message clearfix">

                    <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:37</span>

                        <h5>Marco Biedermann</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

                <div class="chat-message clearfix">

                    <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:38</span>

                        <h5>John Doe</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

            </div> <!-- end chat-history -->

            <p class="chat-feedback">Your partner is typing…</p>

            <form action="#" method="post">

                <fieldset>

                    <input type="text" placeholder="Type your message…" autofocus>
                    <input type="hidden">

                </fieldset>

            </form>

        </div> <!-- end chat -->

    </div> <!-- end live-chat -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
     <script src="js/index.js"></script>

</body>
</html>

  <script src="js/index.js"></script>

</body>

</html>

Kindly help i have lost myself :(

Upvotes: 2

Views: 389

Answers (1)

user5383734
user5383734

Reputation:

There too many times that you included index.js. And try to modify

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

to

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

The whole code example:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Live Chat - CodePen</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Live Chat</title>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">

</head>
<body>

    <div id="live-chat">

        <header class="clearfix">

            <a href="#" class="chat-close">x</a>

            <h4>John Doe</h4>

            <span class="chat-message-counter">3</span>

        </header>

        <div class="chat">

            <div class="chat-history">

                <div class="chat-message clearfix">

                    <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:35</span>

                        <h5>John Doe</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

                <div class="chat-message clearfix">

                    <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:37</span>

                        <h5>Marco Biedermann</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

                <div class="chat-message clearfix">

                    <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                    <div class="chat-message-content clearfix">

                        <span class="chat-time">13:38</span>

                        <h5>John Doe</h5>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

                    </div> <!-- end chat-message-content -->

                </div> <!-- end chat-message -->

                <hr>

            </div> <!-- end chat-history -->

            <p class="chat-feedback">Your partner is typing…</p>

            <form action="#" method="post">

                <fieldset>

                    <input type="text" placeholder="Type your message…" autofocus>
                    <input type="hidden">

                </fieldset>

            </form>

        </div> <!-- end chat -->

    </div> <!-- end live-chat -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/index.js"></script>


</body>

</html>

Upvotes: 1

Related Questions