Chat div in ajax using css. Am building a chat system using ajax, when the chat text exceeds the length of the screen, the newly text message tends to scroll downward beneath the chat text input form instead of scrolling upward and as a result, newly sent message cannot be been unless you scroll downward. Below is how I built my css. any help will be appreciated
JS:
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: "POST",
url:'chatposts.php',
data:"uname="+uname,
success:function(data) {
$('#chatdisplay').html(data);
} })
var elem = document.getElementById('comdisplay');
elem.scrollTop = elem.scrollHeight;
}, 10000);
});
CSS:
.chatdisplay {
background-color:#FF00FF;
min-width:100px;
height:auto;
margin-left:56px;
padding:10px 0 10px 10px;
margin-top:1px;
font-size:12px;
color:#000;
}
#chatbox {
display:block;
bottom:0;
margin-left: 0px;
position:fixed;
width:100%;
}
HTML:
<div id="chatdisplay" >
Display chat message...
</div>
<div id="chatbox">
<form action="" method="post" name="chat_form">
<input name="chat_comment" class="comment" type="text" id="chat_comment">
<input name="chatBtn" class="chatBtn" id="chatbtn" type="submit" value="Chat" />
</form>
</div>
PHP:
<?php
require('db.php');
$result = $db->prepare('
select * from chat where pid=:pid order by cmid');
$result->execute(array(':pid' => '43'));
$countcom=$result->rowCount();
while ($full = $result->fetch()) {
$cmid=htmlentities($full['cmid'], ENT_QUOTES, "UTF-8");
$cname1=htmlentities($full['comment'], ENT_QUOTES, "UTF-8");
$comment_pic2=htmlentities($full['user_pic66'], ENT_QUOTES, "UTF-8");
$tt=htmlentities($full['c_time'], ENT_QUOTES, "UTF-8");
$bb=htmlentities($full['user_name66'], ENT_QUOTES, "UTF-8");
?>
<div id="chatdisplay<?php echo $cmid;?>" class="chatdisplay" >
<img width="20" height="20" src='http://localhost/sri_chat/db/photo/<?php echo $comment_pic2;?>' />
<?php
echo $bb;
?>: <?php echo $cname1;?>
</div>
<?php }?>
I don't think this is possible with pure CSS. But you could do it with JavaScript.
Example:
HTML: (A bit different than yours, but same concept)
<div class="message">
<p>This was the first message</p>
<p>Another message</p>
<p>A third message about something a bit longer</p>
</div>
<button>New message</button>
JS: (I used jQuery in this example)
var button = $('button');
var container = $(".message");
button.on('click', function() {
container.append('<p> A new message</p>');
container.scrollTop(container[0].scrollHeight);
});
Demo:
http://jsfiddle.net/u4u33286/3/
Well the best way to solve the problem would be to invert how you are putting the messages into the box (newest at top) but if you want them at the bottom.
var chatBox = document.getElementById("chatdisplay");
chatBox.scrollTop = chatBox.scrollHeight;
Should do it.
http://www.w3schools.com/jsref/prop_element_scrolltop.asp
For more info on the Dom property
*Kris beat me to it
Related
I have developed a comments editing system in my blog application.
When a user clicks on the page of a select blog post, a #foreach loop iterates through that post's comments and displays each one in the view underneath the Post's main content.
It is also possible for a user to edit a comment's content. User's click an edit button on the comment and a JavaScript function renders its <textarea> editable as well as unhides a "save" button. Once edited and the user hits save, a second JavaScript function sends the updated content to a Controller method which updates the relevant comment on the database.
The code I've produced works fine when there is one comment under the blog post, however, when there are multiple comments on the page, the JavaScript is not able to distinguish which comment is referenced - for example, pressing the edit button on one comment makes the save button appear for all comments.
Is there a straightforward way I can encapsulate the JavaScript for each comment?
Or is the best approach to produce unique Ids for each Comment? If so, what would be the best approach?
My code for your reference is below, though please note I am still new to web scripting and any pointers are appreciated.
THE VIEW (RAZOR):
#model List<Assignment_3.Models.CommentSubmission
//Blog Post
//Comments
#foreach (var item in Model)
{
//Comment information
//The textarea
<textarea rows="10" readonly class="descriptionForm" id="DescriptionText">#item.Body</textarea>
//The Edit button
<div style="text-align:right">
<img class="edit_icon" src=#Url.Content("~/Images/edit.png") alt='edit' height=15 width=15 />
<br />
//The Save button once editing is complete
<button type="submit"class="btn1" style="visibility: hidden">
<p class="split-btn-name">Save</p>
<span class="separator"></span>
<p><span class="glyphicon glyphicon-ok"></span></p>
</button>
</div>
}
<script>
//Make textarea editable and unhide the edit save button
$(document).ready(function () {
$(".edit_icon ").click(function () {
$(".descriptionForm").removeAttr("readonly");
$(".btn").removeAttr("style");
});
});
//Send updated content to Controller and update database
$(".btn1").click(function () {
$(".btn1").hide();
$(".descriptionForm").setAttribute('readonly');
var text1 = document.getElementById('DescriptionText').value;
var url = "/Comments/EditComment?id=#item.Id&s="+ text1;
$.post(url, null, function (data) {
});
});
</script>
THE CONTROLLER:
public void EditComment(int id, string s)
{
var cS = _context.CommentSubmissions
.Where(c => c.Id == id).
FirstOrDefault();
//The Comment's text body
cS.Body = s;
_context.Entry(cS).State = EntityState.Modified;
_context.SaveChanges();
}
UPDATE
ANSWER (thanks to Greg):
FORM:
<div class="row" style="padding: 15px;">
<div data-rel="#item.Id">
<textarea rows="10" readonly class="textarea">#item.Body</textarea>
<div style="text-align:right">
<p>
Edit <img class="edit_icon" src=#Url.Content("~/Images/edit.png") alt='Edit' height=15 width=15 id="EditIcon" />
</p>
#*The Save button once editing is complete*#
<input type="button" data-input="edit" value="Save" style="visibility: hidden" id="saveButton">
</div>
</div>
</div>
JQUERY:
<script>
$(function () {
$(".edit_icon").click(function () {
var container = $(this).closest('.row');
var id = parent.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.removeAttr("style");
content.focus();
content.removeAttr('readonly');
});
$("#saveButton").click(function () {
var container = $(this).closest('.row');
var id = container.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.hide();
content.prop('readonly', true);
var text1 = descriptionForm.value;
var url = "/Comments/EditComment?id=" + id + "&s=" + text1;
$.post(url, null, function (data) {
});
});
});
</script>
As denoted in the comment, your JavaScript has nothing unique to anchor on. So it modifies all elements that meet your criteria, to resolve this you can achieve with a unique identifier or structuring your markup better.
In your case, you have a button with a type="submit" which will instantly cause a post back. Not sure if that is indeed your intent, but you could do:
#foreach(var content in Model)
{
<form name="content.Id" action="Blog/Save" method="post">
</form>
}
In this instance, the post back from your submit could directly hit the server. But, post backs aren't cool. To rectify via Ajax, you can do.
#foreach(var content in Model)
{
<div class="container">
<div data-rel="#content.Id">
<!-- Put form data, or whatever here. -->
<input type="button" data-input="edit">Edit</input>
</div>
</div>
}
Now you have a unique value, clean structure, and you can move throughout the hierarchy fairly easy. So, for JavaScript you could do:
function editBlog(element) {
var container = document.querySelector(element).closest('[data-rel]');
}
I believe that is the ideal approach for JavaScript, I'm a custom to jQuery or a framework like Vue. So double check the syntax. But in theory, the JavaScript will scale from the button event to the parent node, then retrieve the child id. Similar mapping or templates can occur, so you can post the data to your action.
Hopefully this helps.
Update: You may get some domain error, but I hope not. Anyways, this is a really simple example.
Container : Simple element to act as a wrapper.
Row : Allow you to create a row for element structure.
Column : Will space around, to fit within window.
The point, is the jQuery will recurse up from the button, to the column, to the row, to the section id, to the container. But, it won't affect any other element on the page. If the jQuery was changed, to not affect a specific element, for instance:
$('button').click(function (e) {
$(this).text('Edit'); // Only this element
$('button').text('Edit'); // All button elements
});
$(function () {
$('button').click(function () {
var container = $(this).parents('.container');
var id = parent.find('div[data-rel]');
var rows = parent.find('.row');
var columns = parent.find('.column');
alert('The section id: ' + id.val());
console.log(container.html());
console.log(id);
console.table(rows);
console.table(columns);
});
});
.container {
width: 100%;
padding: 1rem;
box-shadow: 2px -1px 1px -2px, -1px 2px 1px -2px;
}
.row {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
.column {
width: 33.3%;
}
.column:last-of-type {
width: 10%;
}
.column span {
width: 100%;
padding: .2rem;
display: inline-block;
}
.column label {
width: 95%;
}
.column button {
width: 100px;
}
.column input, .column textarea {
width: 95%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-rel="1">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button name type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div data-rel="2">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
The code works, but you may have security enabled that may not allow it to work. But the example is the important part.
It is like comment box. People are able to post their comments. Here I have one text area and and a div. If click one a button the comment has to be done. The comment should display in a div. I have given an external link,
wich allows edit the text how they want.
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"> </script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h4>First Textarea</h4>
<textarea name="area1" cols="40"></textarea>
</div>
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick=""> Submit</button>
<div id="demo" style="width:300px; height:200px; border:1px solid #333;"></div>
First, you need to give your textarea an Id value:
<textarea id="commentEditor" name="area1" cols="40"></textarea>
Then, in your script after you have created the editor, you need to create a function that can extract the text from your NicEdit box and put it into a div.
function SubmitComment {
var editor = nicEditors.findEditor("commentEditor"); //find the editor by the ID
var commentText = editor.getContent(); //this gets the actual text content from it
//then assign the div with your content
var commentDiv = document.getElementById('demo');
commentDiv.innerHTML = commentText;
//afterwards, you can clear the comment entry box
editor.setContent("");
}
Make sure you tell your button to trigger this function
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick="SubmitComment"> Submit</button>
I require assistance on hit detection in javascript. I have tried many scripts but they all do not work.
My current code:
function collision($div1, $div2) {
// nothing, this is where my collision detection needs to be
}
My divs:
<style>
/* CSS */
/* character */
#character {
position:absolute;
}
/* masses */
#bluemass {
position:absolute;
}
</style>
<center>
<div class="bluemass" id="bluemass">
<img src='./pic/bluemass.png' height='35' width='35' />
</div> </center>
<div class="character" id="character">
<img src="./pic/char.png" alt="info" height="90" width="90" />
<br>
<?
$v = $_GET["username"];
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$v</div>";
?>
<?
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$mass</div>";
?>
</div>
How would I detect if the div character collides/overlaps with the div bluemass? Thanks in advance, this is my testing site.
You can start with something like:
function collision($div1, $div2) {
//
var rect1={
"top":$div1.offset().top,
"left":$div1.offset().left,
"width":$div1.offset().width(),
"height":$div1.offset().height()
};
var rect2={
"top":$div2.offset().top,
"left":$div2.offset().left,
"width":$div2.offset().width(),
"height":$div2.offset().height()
};
// Standard rect-overlap checking code here
}
I wouldn't call this a complete solution because I know you need to additionally account for certain other things, like possibly page margins/padding/etc, but hopefully this will get you started.
i have a div name all contact in which there is many name when i click anyone name this name show me in other div name receiver its work fine problem is this when page reload name gone from reciver div which i click will you please tell me how to made it when page refresh div data not gone untill i go to other page.
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 625px;
width: 300px;
overflow-y:scroll;
}
<div id='receiver'>
<h3>receiver</h3>
<!-- NOTICE THAT THIS IS NEW NOW... -->
<!-- IT IS IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
<p class='bubbled-data'></p>
</div>
<div id = 'contact'>
<h1 align="left"> all contacts </h1>
<div id="usersOnLine">
<h2>
<?php
foreach ($result as $key => $val) {
echo "<span class='clickAble'>" . $val['email'] . "</span>";
echo "<br>";
echo "<br>";
}
?>
</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT - JQUERY -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function (evt) {
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
});
});
})(jQuery);
</script>
So you want retain the name in receiver div after page reload.
You can use html Local Storage,
Refer HTML Local Storage Objects
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
if(window.performance)
{
if(performance.navigation.type == 1 )
{
var nameValue = localStorage.getItem("nameValue");
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
receiver.find(".bubbled-data").text(nameValue);
}
}
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function (evt) {
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
localStorage.setItem("nameValue", nameValue);
});
});
})(jQuery);
</script>
Try this.
I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>
in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"