Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    2
    Member #
    28934
    How do I make this chat box work? Sorry, I'm really new at this. Please bear with my super simple design, and my multiple mistakes I probably have. I really need to figure this out 'cause this is my final exam, and I can't understand half of my tags. Thanks in advance.

    This is my html file:

    <html>
    <head><title>South Africa! It and Its Culture!</title>
    <link rel="stylesheet" type="text/css" href="externalSTYLE.css">
    </head>
    <body>
    <div class="up">
    South Africa! It and Its Culture!
    </div>
    <div class="left">
    Links to Other Pages of Our Website:
    <p>
    <ul>
    <li>Home</li>
    <li>Myths</li>
    <li>Traditions</li>
    <li>Nelson Mandela</li>
    <li>Tourist Spots</li>
    </ul>
    </p>

    </div>
    <div class="center">
    <br />
    <img src="http://ponspontisterra.files.wordpre...outhafrica.jpg">
    <P>
    <p>
    <b>South Africa</b> is located at the Western Hemisphere. It is currently...
    </p>
    </div>
    <div class="right">
    <div id="wrapper">
    <div id="menu">
    <p class="welcome">Welcome, <b>People Interested in South Africa</b></p>

    <div style="clear:both"></div>
    </div>
    <div id="chatbox"><div class='msgln'>

    <form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
    </form>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});
    $("#usermsg").attr("value", "");
    return false;
    });

    //Load the file containing the chat log
    function loadLog(){
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
    url: "log.html",
    cache: false,
    success: function(html){
    $("#chatbox").html(html); //Insert chat log into the #chatbox div
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
    }
    },
    });
    }
    setInterval (loadLog, 2500); //Reload file every 2.5 seconds

    //If user wants to end session
    $("#exit").click(function(){
    var exit = confirm("Are you sure you want to end the session?");
    if(exit==true){window.location = 'index.php?logout=true';}
    });
    });
    </script>
    </div>
    </body>
    </html>

    My CSS:

    body { background: brown;
    text-align: center;
    font-family: algerian;
    font-style: italic;
    color: black; }

    p { text-indent: 30px;
    text-align: left;
    padding-left: 30px; }

    img { height: 100px; width: 200px;
    text-align: center;
    border-style: solid;
    border-color: black;
    border-width: 10px; }

    .up { position: absolute; left: 58px; right: 42px; height: 70px; width: 1210px;
    background: url("http://www.aworldaware.org/images/af...-landscape.jpg");
    font-size: 250%;
    border-style: solid;
    border-color: black;
    border-width: 10px; }

    .left { position: absolute; left: 50px; top: 140px; height: 400px; width: 200px;
    background: #FEF0C9;
    font-size: 125%;
    border-style: solid;
    border-color: black;
    background-image: url("http://www.aworldaware.org/images/af...-landscape.jpg");
    border-width: 10px; }

    .center { position: absolute; left: 308px; top: 140px; height: 700px; width: 725px;
    background: #FEF0C9 url("http://www.isle-dso.eu.dodea.edu/et/...chmentbase.jpg") center no-repeat;
    font-size: 125%;
    border-style: solid;
    border-color: black;
    border-width: 10px; }

    .right { position: absolute; right: 50px; top: 140px; height: 400px; width: 200px;
    text-align: center;
    background: #FEF0C9;
    font-size: 100%;
    border-style: solid;
    border-color: black;
    background-image: url("http://www.aworldaware.org/images/af...-landscape.jpg");
    border-width: 1px; }

    form, p, span {
    margin:0;
    padding:0; }

    input { font:12px arial; }

    a {
    color:#0000FF;
    text-decoration:none; }

    a:hover { text-decoration:underline; }

    #wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:url("http://www.isle-dso.eu.dodea.edu/et/...chmentbase.jpg") center no-repeat;
    width:220px;
    border:10px solid Black; }

    #loginform { padding-top:18px; }

    #loginform p { margin: 5px; }

    #chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:url("http://www.photos-public-domain.com/...ht-texture.jpg");
    height:500px;
    width:180px;
    border:1px solid #ACD8F0;
    overflow:auto; }

    #usermsg {
    width:200px;
    border:1px solid #ACD8F0; }

    #submit { width: 60px; }

    .error { color: #ff0000; }

    #menu { padding:12.5px 25px 12.5px 25px; }

    .welcome { float:left; }

    .logout { float:right; }

    .msgln { margin:0 0 2px 0; }

    My index.php

    <?
    session_start();

    if(isset($_GET['logout'])){

    //Simple exit message
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
    fclose($fp);

    session_destroy();
    header("Location: index.php"); //Redirect the user
    }

    function loginForm(){
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
    <p>Please enter your name to continue:</p>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" />
    <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
    </div>
    ';
    }

    if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
    $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
    echo '<span class="error">Please type in a name</span>';
    }
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Chat - Customer Module</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    </head>

    <?php
    if(!isset($_SESSION['name'])){
    loginForm();
    }
    else{
    ?>
    <div id="wrapper">
    <div id="menu">
    <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
    <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
    <div style="clear:both"></div>
    </div>
    <div id="chatbox"><?php
    if(file_exists("log.html") && filesize("log.html") > 0){
    $handle = fopen("log.html", "r");
    $contents = fread($handle, filesize("log.html"));
    fclose($handle);

    echo $contents;
    }
    ?></div>

    <form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
    </form>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});
    $("#usermsg").attr("value", "");
    return false;
    });

    //Load the file containing the chat log
    function loadLog(){
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
    url: "log.html",
    cache: false,
    success: function(html){
    $("#chatbox").html(html); //Insert chat log into the #chatbox div
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
    }
    },
    });
    }
    setInterval (loadLog, 2500); //Reload file every 2.5 seconds

    //If user wants to end session
    $("#exit").click(function(){
    var exit = confirm("Are you sure you want to end the session?");
    if(exit==true){window.location = 'index.php?logout=true';}
    });
    });
    </script>
    <?php
    }
    ?>
    </body>
    </html>

    And my post.php

    <?
    session_start();
    if(isset($_SESSION['name'])){
    $text = $_POST['text'];

    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
    }
    ?>

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Either put an image up, or post it where people can get to it. I doubt very few people are going to open a zip file from someone they don't know.

    I won't !

  4. #3
    Junior Member
    Join Date
    Aug 2011
    Posts
    2
    Member #
    28934
    Quote Originally Posted by Webzarus, post: 216566
    Either put an image up, or post it where people can get to it. I doubt very few people are going to open a zip file from someone they don't know.

    I won't !
    Sorry, I'll remember that next time.

  5. #4
    Banned
    Join Date
    May 2011
    Location
    Fairfax, CA
    Posts
    2,036
    Member #
    28003
    Liked
    126 times
    Check out ajax chat from blueimp.net thats what i use!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

background cream color

,
background image color creame
,
chatbox html css3
,

cream color background

,
create a chatbox in html css3
,
creme color bakcground
,
free backgrounds
,
light cream color background
,
watercolor texture
Click on a term to search for related topics.
All times are GMT -6. The time now is 12:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com