jQuery scroll to bottom of chatbox - javascript

I have 3 chat box nested in its parent and am using jquery to automatically scroll to the bottom the chat messaging area.
chatboxes
The scrolling to bottom work if the chatbox is only 1 but if its becomes two or 3 or more and I append more content to the its message area then the scroll bar will jump to the middle of the div and now it stops scrolling to the bottom as before.
$(document).on("keyup",".textareaxmsg",function(vnt){
if(vnt.keyCode === 13 ){
if($.trim($(this).val())){
var conTent = "<div class='b5d_wa msgb'><div class='d_bzAe_5'><span><span>" +$(this).val() +"</span></span></div></div>";
$(this).parents(".msg_body_a").children(".msga").append(conTent);
$(this).val("");
$(this).parents(".chat_body").children(".msg_body_a").scrollTop($(".msg_body_a")[0].scrollHeight);
}else{
$(this).val("");
}
}
});
<div class="c_boxcnt">
<div class="chat_box">
<div class="chat_header">
<div class="l_aZn_5a">
<p>James Oduro </p>
<span class="closechat "><i class="fa fa-times tooltip" title="Close"></i></span> <span class="minimizechat "></span><span class="minimizechat "><i class="fa fa-camera tooltip" title="Add Photos"></i></span>
</div>
<div class="l_aZn_5a">
<div class="cupht"><img src="uploaded/1033761452673232.jpg" /></div>
</div>
</div>
<div class="chat_body">
<div class="msg_body_a">
<div class="msga">
<div class="b5d_wa">
<div>
<div class="dz_d5ae"><img src="uploaded/1033761452673232.jpg" height="30" width="30"/></div>
<div class="d_bzAe_4">
<span class="a_r5ia"><span>made my birthday a wonderful one. God richly bless you in </span></span>
</div>
</div>
</div>
</div>
<div class="mbox">
<form method="post" action="#">
<textarea class="textareaxmsg" placeholder="Type a message..." title="Type a message"></textarea>
</form>
</div>
</div>
</div>
</div>
</div>

This worked but it is a bad code practice:
Since we can set the vertical position of the scroll area , all I did was to increase the position to uncountable number.
if( $(this).parents(".msg_body_a").children(".msga").append(conTent)){
$(this).parents(".chat_body").children(".msg_body_a").scrollTop(1000 * 1000 * 5000 *2 * 1000 *90000); /* set uncountable number */
$(this).val("");
};

Related

Starting the scroll to the bottom of a div tag

I know its simple and easy to do but in my case i dont know why its not working,
I have div with scroll and i want it to start in bottom. I have read some question here and search in google but its not working into my program. this is my jquery code it start in bottom but when i scrolled it will always back in bottom.so i remove the the set interval and i just call the function updateScroll(); but the scroll start in top again guys help me
<script type="text/javascript">
function updateScroll(){
var element = document.getElementById("msgss");
element.scrollTop = element.scrollHeight;
}
setInterval(updateScroll,1000);
</script>
this is my div tag
<div class="col-md-6 convo">
<chat-log :messages="messages" id="msgss"></chat-log>
<div class="row">
<div class="col-md-12 chat-composer">
<textarea class="compose" type="text" name="" placeholder="Type your Message" v-model="messageText" #keydown="vmsg"></textarea>
<button type="button" name="button" class="btn btn-primary send" #click="sendMessage">Send</button>
</div>
</div>
</div>
And this is the content of the <chat-log :messages="messages" id="msgss"></chat-log>
<template lang="html">
<div class="chat-log">
<chat-message v-for="message in messages" v-bind:key="messages.text" :message="message"></chat-message>
<div class="empty" v-show="messages.length === 0">
Nothing here yet!
</div>
</div>
</template>
and the css
#msgss{
overflow-y: auto;
height: 540px;
}
Please try this
window.setInterval(function() {
var element = document.getElementById('msgss');
element.scrollTop = element.scrollHeight;
}, 1000);

jQuery click only occurs once

I am creating a random quote generator. Every time I click the button "Get Quote", a new quote should be generated from an API, and the background color is changed. However, while the background color changes every time I click, the quote only changes the first time I click the button.
My HTML is as follows:
<body>
<div class="container-fluid">
<div id="centerThis" style="background: transparent">
<div id=target1>
<h1 class="text-center">Random Quote:</h1>
<div class="quote">
<blockquote>
<p id="quoteT">Humans are allergic to change. They love to say, 'We've always done it this way.' I try to fight that. That's why I have a clock on my wall that runs counter-clockwise.</p>
<footer id="quoteA">Grace Hopper</footer>
</blockquote>
</div>
<div class="row">
<div class="col-xs-2">
<i class="fa fa-twitter" aria-hidden="true"></i></button>
</div>
<div class="col-xs-2">
<i class="fa fa-tumblr" aria-hidden="true"></i></button>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<button id = "getQuote" class = "btn colorButton">
Get Quote
</button>
</div>
</div>
</div>
<div id="target2">
<h5 id="byAnna" class="text-center">by anna</h5>
</div>
</div>
</div>
</body>
My jQuery looks like this (I left out the code for randColor and some other un-important parts):
$(document).ready(function() {
$("#target1").css("color",randColor);
$("#target2").css("background", randColor);
$("body").css("background", randColor);
$(".colorButton").css("background", randColor);
$("#getQuote").on("click", function(){
randColor = getRandomColor();
$("#target1").css("color",randColor);
$("#target2").css("background", randColor);
$("body").css("background", randColor);
$(".colorButton").css("background", randColor);
$.ajax({url: "http://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", success: function(result){
$(".quote").html("<blockquote><p>" + result.quoteText + "</p><footer>" + result.quoteAuthor + "</footer></blockquote>");
}});
});
});
Thanks for any help!
It seems that you have an error on your URL:
http://crossorigin.me/http://api.forismatic...
Do you see the Ajax request on the web inspector each time you click on the button?
Regards,
Jimmy
EDIT :
The issue is the text color:
It's the same as the bg.
Try to add this line in JS:
$(".quote").css("color", "black");

JQuery .on("click"... works intermitently

I have a piece of code:
$("body").on("click", ".reply-button", function(){
alert("test");
});
That is suppose to alert me when I click on an element that is generated on the fly (it is not part of the DOM when this code is executed).
Sometimes it works just as it's suppose to. I click the button and a little alert pops up. However, other times it stop working. Nothing I bind to it will work. If I bind to the container div (also generated on the fly), it does work, but not if I change the handler to incorporate button.
I am asking for what could be the possible reasons for this error? I do not know how to go about debugging this. My first guess was that it was something due to stopImmediatePropagation or stopPropagation but I couldn't find that being used in the same area.
Does anyone have any idea on how I should go about debugging this?
EDIT:
How is the DOM being generated?
I get the HTML from a template that's hidden.
var html = $("#template").html();
Then I append the template to a div container
$("#container").append(html);
EDIT2:
Here is the template being pulled:
<div id="tweets-container" class="feed-wrapper">
</div>
<div id="tweet-template" style="display:none;">
<!-- Tweet 1 -->
<div class="tweet animated" data-scannedTweetId="s_id">
<!-- User -->
<div class="tweet-user">
<!-- User picture -->
<img class="tweet-user-picture" src="s_twt_owner_profile_img_url" />
<!-- User info -->
<div class="tweet-user-info">
<!-- User name -->
<div class="tweet-user-info-name">
s_twt_owner_name (#s_twt_owner_sn)
</div>
<!-- User biography -->
<div class="tweet-user-info-biography">
s_twt_owner_desc
</div>
</div>
</div>
<!-- User statistics (following, followers, and tweets) -->
<span class="tweet-statistics animated">
<div class="following">
<div class="statistic-count">s_twt_owner_num_following</div>
<div class="statistic-label">following</div>
</div>
<div class="followers">
<div class="statistic-count">s_twt_owner_num_follower</div>
<div class="statistic-label">followers</div>
</div>
<div class="tweets">
<div class="statistic-count">s_twt_owner_num_twt</div>
<div class="statistic-label">tweets</div>
</div>
</span>
<!-- Tweet bars/graph -->
<div class="side-information animated">
<div class="bar-wrapper">
<!-- Actual bars -->
<div class="bars">
<div class="bar big-bar bar-green" style="height: tqes_heightpx; background: tqes_color;" data-toggle="tooltip" data-placement="top" title="tq_engage_score"></div>
<div class="bar bar-yellow" style="height: tqrs_heightpx; background: tqrs_color;" data-toggle="tooltip" data-placement="top" title="tq_relevancy_score"></div>
<div class="bar bar-light-green" style="height: sks_heightpx; background: sks_color;" data-toggle="tooltip" data-placement="top" title="s_klout_score"></div>
<div class="bar bar-green" style="height: sls_heightpx; background: sls_color;" data-toggle="tooltip" data-placement="top" title="s_legitimacy_score"></div>
<div class="bar bar-gray" style="height: tqgs_heightpx; background: tqgs_color;" data-toggle="tooltip" data-placement="top" title="tq_geography_score"></div>
</div>
<!-- Labels that correspond with each bar -->
<div class="bar-labels">
<div class="bar-label big-bar-label" data-toggle="tooltip" data-placement="bottom" title="Score">tq_engage_score</div>
<div class="bar-label-icon" style="font-size: 12px; color: #000;" data-toggle="tooltip" data-placement="bottom" title="Relevancy">
<i class="fa fa-bullseye"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Influence">
<i class="fa fa-users"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Legitimacy">
<i class="fa fa-check-circle"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Geography">
<i class="fa fa-map-marker"></i>
</div>
</div>
</div>
<!-- Notes below the bars/graph -->
<div class="explanations">
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-first-comment"> </i>
<div class="explanation-text">
comment_one
</div>
</div>
</div>
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-second-comment"> </i>
<div class="explanation-text">
comment_two
</div>
</div>
</div>
</div>
</div>
<!-- Tweet score -->
<div class="score-wrapper">
<div class="score animated">tq_engage_score</div>
</div>
<!-- Tweet content -->
<div class="tweet-content">
s_twt_text
</div>
<!-- Time since tweet was posted -->
<div class="tweet-time-elapsed">
s_twt_time
</div>
<!-- Area below tweet with reply textarea and buttons -->
<div class="tweet-reply-section animated">
<!-- Reply textarea -->
<textarea class="tweet-reply animated">#s_twt_owner_sn </textarea>
<!-- Buttons -->
<div class="buttons animated">
<!-- Small buttons on top of reply button -->
<div class="top-buttons">
<span class="character-count">
</span>
</div>
<!-- Reply button -->
<div class="reply-button">
Reply <i class="fa fa-reply"></i>
</div>
</div>
</div>
</div>
</div>
JavaScript:
/**
* Add a tweet to the feed.
*/
function _addTweetToFeed(tweet, keywords) {
/** Get the tweet template */
var tweetHtml = $('#tweet-template').html();
// add score heights and colors properties to the tweet
tweet = _setScoreBars(tweet);
/** Linkify elements of the tweet */
tweet.s_twt_text = twitterify(tweet.s_twt_text); // the tweet
tweet.s_twt_owner_desc = twitterify(tweet.s_twt_owner_desc);
// fix search terms to be highlighted
tweet.s_twt_text = _highlightSearchTerms(tweet.s_twt_text, keywords); // the tweet
tweet.s_twt_owner_desc = _highlightSearchTerms(tweet.s_twt_owner_desc, keywords);
// change from twitter links to readable links
tweet = _fixTweetLinks(tweet);
/** Make numbers readable */
tweet.s_twt_owner_num_following = abbrNum(tweet.s_twt_owner_num_following, 1);
tweet.s_twt_owner_num_follower = abbrNum(tweet.s_twt_owner_num_follower, 1);
tweet.s_twt_owner_num_twt = abbrNum(tweet.s_twt_owner_num_twt, 1);
/** Loop through the properties of tweet object and populate tweetHtml with them */
for (var prop in tweet) {
if (tweet.hasOwnProperty(prop)) {
tweetHtml = _replaceAll(tweetHtml, prop, tweet[prop]);
}
// add comments
tweetHtml = _addComments(tweet, tweetHtml);
/** If both location and url are not present, remove the comma */
if (!(tweet.s_twt_owner_loc && tweet.s_twt_owner_url)) {
$('#url_comma').html('');
}
}
$('#tweets-container').append(tweetHtml);
}
"Sometimes it works just as it's suppose to" this line alone suggests that you run your code prior to DOM creation. sometimes your browser creates the dom fast enough and the handler is being attached to the body, and sometimes your javascript runs first and it isnt being attached. wrap your code in this:
$(function(){
$("body").on("click", ".reply-button", function(){
alert("test");
});
});
Does anyone have any idea on how I should go about debugging this?
Sometimes it's best to pull out a tiny portion of code, and see if it works in isolation. For example: http://jsfiddle.net/6v7z9fak/
js:
$("body").on("click", ".reply-button", function(){
alert("test");
});
html:
<button type="button" class="reply-button">Reply</button>
As you'll see, it works fine. So you can be confident that the error is not in that bit of code alone. It is either another part of the code, or how the parts are interacting together, or something else. Now slowly add more code, test, and see where it breaks.

Auto increment step number if element is visible

Attempting to auto increment step numbers for a form. Certain elements of the form may hide or show dependent on answers from above.
HTML
<div class="confirmation-step">
<span class="step-number"></span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number"></span>
</div>
jQuery
$('.confirmation-step').each(function() {
if($(this).is(':visible')) {
//set variable stepNum
//Haven't come up with anything good yet
} else {}
$(this).find('.step-number').html(stepNum);
});
Sample Output
<div class="confirmation-step">
<span class="step-number">1</span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number">2</span>
</div>
Thanks!
How about
$('.confirmation-step:visible .step-number').text(function(i) {return i+1;});
FIDDLE

how to make UI(user interface) responsive for all width?

I make one UI after googling .But my UI is not responsive it not look good when I increase the window size or decrease the window size/.
Here is my fiddle
http://jsfiddle.net/X8HV9/1/show/
I have only two issues
"up level" button it look good when window size is more (full screen).When I decrease the size of window it changes it position.But next and previous button look good.
When you click "add" button it show pop up screen when screen size is more(full screen).but it hide when screen is smaller.
can I give width in %?
<div data-role="page" id="home">
<div class="main_cont">
<div class="cb"></div>
<section>
<div class="contentbox">
<div class="actionbar">
<a href="#" class="previous" id="previous_h"><i
class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
class="iconnext"></i>Next</a>
<a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
<div class="cb"></div>
</div>
</div>
</section>
<footer id="firstPageFooter">
<button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>
</footer>
<div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">Test Case ID:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase"/>
</div>
Done
</div>
</div>
Thanks
Yes you can use % scaling with width,height,top,left,margins
for example in your css:
#next_h{
position:absolute;
width:10%;
}
this will set width to 10% of window's width
if you want to scale when window is below certain width,
you can use javascript:
if($(window).outerWidth() < 500){
$('#next_h).css({
'position':'absolute',
'width':'80%',
'height':'10px'
});
}
something like this.
you might be interested in this post too

Categories