I am making a chat app like google hangout or snapchat with html, css and javascript. When I want to append a chat, I use
$(id_name).after(message)
I can append the message but what I want to know is that the message did not show on the screen without scrolling manually. How can I show the message that I append automatically? Please help me.
Following is the my code.
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
I append the message into the "talk_chat_detail".
Change your $target.animate to $target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);})
here is the working fiddle :
https://jsfiddle.net/Le1by7z0/
You can just use append and animate in jquery. Here is the sample code ..
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#test {
width: 200px;
height: 400px;
overflow: scroll;
}
#test div {
width: 200px;
}
</style>
</head>
<body>
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
<input type="text" id="message" placeholder="write message" />
<input type="button" id="sendMessage" value="Send" />
<script>
$(document).ready(function() {
$("#sendMessage").on('click', function() {
var mes = $("#message").val();
$("#talk_chat_detail").append(mes + "<br/>")
$("#talk_chat_detail").animate({
scrollTop: $target.prop("scrollHeight")
}, 30);
});
});
</script>
</body>
</html>
$(document).ready(function() {
$('#send').click(function() {
var message = $("#message").val();//Here comes dynamic data binding
var appendMessage = '#messageArea';//Message to append in div section
$(appendMessage).append('<div style=height:10px;background:white;float:right>' + message + '</div> <br><hr>'); //user message dynamic div
var $target = $(appendMessage); // user dynamic div appended
$target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);
})
});
#messageArea {
width:320px;
height:400px;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="text" id="message" placeholder="User Message" />
<button type="button" id="send">append text message</button>
<div id="messageArea">
<div style="height:1000px;background-color:wheat"></div>
</div>
</body>
Hope this helps
Use scrollTop to scroll to the bottom of the page after you append the message
var $target = $('#talk_chat_detail');
$target.animate({scrollTop: $target.prop("scrollHeight") }, 300);
You can use scrollTop, you just need to add following code right after the append call of your message and it will automatically scroll to the message,
$('html, body').animate({
scrollTop: $("div").offset().top
}, time);
div => Dom Element where you want to move scroll.
time => milliseconds, define the speed of the scroll.
Related
hello i'm using javascript to show and hide element. its working but when loading the page the element still visible until i click on the button then it will be hiding. in my case i need the opposite ( the element should not be visible on loading page until i click on the button)
this is my code :
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
(function($){
$(document).ready(function(){
$('#hideshow').click(function(){
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
did i miss something ?
Apply display:none:
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
Alternatively you can hide it programmatically on page load:
$('.price-rules-table-wrapper').hide();
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
I need to change the color at the word inside my div. It's filled dinamically, there is a javascript function that read on DB and write through the ID of my div.
I'm trying to color the word INFO (only INFO), without success:
$("div:contains('INFO')").each(function () {
$(this).html($(this).html().replace("INFO", "<span class='green'>INFO</span>"));
});
/* THis is only an example*/
document.getElementById('textLog').innerHTML ="Load[DB]: INFO";
.green {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="menuLog">
<div class="log">
<h3 class="textStyle">Log</h3>
<div id="textLog" class="silverStyle" name="textLog" required></div><br>
</div>
</div>
You can grab the element that contains the text you want, as you are already trying to do, then use an html replacement for just the word INFO:
$('div:contains("INFO")').html(function () {
return $(this).html().replace(/INFO/g, "<span style='color: green'>INFO</span>");
});
Updated Fiddle based on all extra requirements found in comments: https://jsfiddle.net/bL24mw97/
Try this.
function changeColor() {
$( "span:contains('Info')" ).css( "color", "green" );
}
document.getElementById('textLog').innerHTML = "<span>Info<span>";
document.getElementById('textLog1').innerHTML = "<span>Info<span>";
document.getElementById('textLog2').innerHTML = "<span>Info<span>";
//This part emulates the data loading
//setTimeout(function(){
// console.log('Data populated....');
// //when finished you must call the function
// changeColor();
//; }, 500);
changeColor();
.green {
color: green;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="textLog" class="silverStyle" name="textLog" required></div>
<div>TEST</div>
<div id="textLog1" class="silverStyle" name="textLog" required></div>
<div id="textLog2" class="silverStyle" name="textLog" required></div>
</body>
</html>
You need to call the changeColor() method to change the color, do it when the function that fill the info finish.
I read all your helps, but anyone didn't satisfied my question, someone went
near to solve it, but the problem was always the same, your examples
colored only one word, so I changed the reg exp:
$('#textLog').html('INFO start <br> INFO loadDB <br> WARN connection <br> ERROR DB not exist');
changeColor();
function changeColor() {
$('div:contains("INFO")').html(function () {
return $(this).html().replace(/INFO/g, "<span style='color:green'>INFO</span>");
});
$('div:contains("WARN")').html(function () {
return $(this).html().replace(/WARN/g, "<span style='color:orange'>WARN</span>");
});
$('div:contains("ERROR")').html(function () {
return $(this).html().replace(/ERROR/g, "<b><span style='color:red'>ERROR</span></b>");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textLog" class="silverStyle" name="textLog" required></div><br>
This question is a followup to a question asked a while ago.
Here is my block of code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div>
<a class="link" href="#about" data-link="first">Instructions</a> •
<a class="link" href="#about" data-link="second">Video</a> •
</div>
<div>
<div class="instruction_type" data-link="first">
<p>TEXT 1</p>
</div>
<div class="instruction_type" data-link="second">
<p>TEXT 2</p>
</div>
</div>
</body>
<script type="text/javascript">
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
</script>
It is functional! However, currently, you load the page and see two clickable links: "Instructions" and "Video." The rest of the page is blank.
I would like the page to DEFAULT to "Instructions" and then if you click "Video" it changes the content of the page.
To be clear: functional code, want to have the page display Instructions upon loading.
Just add this code to the end of your javascript:
$('.link:first').click();
This way, when the page loads, the first button is clicked..
Your javascript code would be something like this:
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
$('.link:first').click();
You are hiding both with this line:
<script type="text/javascript">
$('.instruction_type').hide();
You could change it to:
<script type="text/javascript">
$('.instruction_type[data-link=second]').hide();
To only hide the second one.
Why not use CSS instead, here's a FIDDLE
.instruction_type {
display: none;
}
.instruction_type:nth-child(1) {
display: block;
}
then in jQuery
$('.instruction_type[data-link="' + $(this).data('link') + '"]').fadeIn(300, 'linear').siblings('.instruction_type').fadeOut(300, 'linear');
Hey so I'm trying to use jTicker to say messages that can react to user input.
The way jTicker works, it affects text between html element tags.
In this example, I'm trying to use jQuery to modify the text between a certain set of tags that is being tickered? by jTicker. The problem is that whenever I try to change the text, jTicker only uses the text that was between the tags when the page first loaded and not the new text.
How can I fix this code so that the text that jTicker is affecting can be changed on the fly?
Javascript:
<script src="jquery.jticker.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#messageId").ticker({
rate: 40,
delay: 900,
transition: "fade",
});
$(".stop").click(function(){
$("#messageId").trigger("stop");
return false;
});
$(".play").click(function(){
$("#messageId").trigger("play");
return false;
});
});
function test() {
$('#theMessage').text('New text!');
}
</script>
Html:
<body>
<div id="messageId">
<p id="theMessage">Old text</p>
</div>
<div>
<input type="button" value="Test"
class="play" onClick="test();" />
</div>
</body>
function test() {
$('#theMessage').text($("#messageId").text());
}
resizable not working from 2nd click can you explain me why?
In the below code, actually i am trying to add shirt and pant to the div. and when they are added, I have to resize them so i have even added resize button. Resize is working for the first time and when ever we try to add another shirt or pant. resize is not working. May i know the reason and help me out in finishing this project.
<html lang="en">
<head>
<title>Outfit Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
// sets draggable the elements with id="shirt"
$('#shirt').draggable({
cursor: 'move', // sets the cursor apperance
containment: '#leftpanel' // sets to can be dragged only within its parent
});
// sets draggable the paragraph inside #trousers
$('#trousers').draggable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#btn').click(function() {
// removes all LI with class="cls" in OL
$('#shirt').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#trousers').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
});
});
var shirt;
var pant;
function selectshirt(src)
{
shirt = src;
path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
invisible("middlepanel");
visible("rightpanel");
document.getElementById("shirt").innerHTML=path;
document.getElementById("cart").style.visibility="visible";
}
function selectpants(src)
{
pant = src;
path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
document.getElementById("trousers").innerHTML=path;
}
function addtocart()
{
alert("Shirt:"+shirt+"\npant:"+pant);
}
function changeshirt()
{
visible("middlepanel");
invisible("rightpanel");
}
function changepant()
{
visible("shirtcontainer");
invisible("pantcontainer");
}
function visible(containername)
{
document.getElementById(containername).style.visibility="visible";
}
function invisible(containername)
{
document.getElementById(containername).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
<div id="shirt" style="left:0;height:300px;width:300px;"></div>
<div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div>
<div style="left:0;height:70%;" id="cart">
<button onclick="changeshirt()">Change Shirt</button>
<button onclick="addtocart()">Add to cart</button>
<button id="btn">Resize</button>
</div>
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="shirtcontainer">
<img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
</div>
</div>
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="pantcontainer">
<img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
</div>
</div>
</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>
Please help me in this and make rezizable working from 2nd click also.
First of all I'm sorry because I'm on my iphone and it's quite hard to read your code.
However there could be some problems:
1)you don't refresh the resizable element,may try to reinitalize the plugin function
2) you are trying to resize a duplicated id.
3) if you are adding to append something and you want to use a click function or similar you have to bind it with $(document).on(event,element,function(){})
Brutal Solution
Destroy and reinitalize the element
#Dheed Thanks for the solution. As you said , i have tried destroying it and reinitialized
$("#shirt").resizable("destroy");
$("#shirt").resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
This worked for me.
Thank you so much Dheed