I am creating a chat service, everything works fine except for one little detail, the scrollbar. I'm using the jQuery Custom Scrollbar plugin.
It doesn't go to the bottom, sometimes it's does really well but sometimes it stuck in the half from the last message, I have been working in this detail for one week and I can't figure out what's the problem yet.
Here's my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>---</title>
<!-- Main CSS -->
<link rel="stylesheet" href="css/default.css">
<!-- Extra CSS -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<!-- All JS Scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.elastic.source.js"></script>
<script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="js/flowtype.js"></script>
<script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Perfect Scrollbar
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<script src="js/perfect-scrollbar.js"></script>-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if !IE]><!--><script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</head>
<body onload="initialize()">
<div class="row">
<div id="chat_intro">
<div class="chat_caller" onclick="goToChat()">
<h1>Enter</h1>
</div>
</div>
</div>
<div id="chat_box">
<div id="chat_top" hidden="hidden">
<div id="chat_header">
<h4>Personal support</h4>
<p>Find the best product for you.</p>
</div>
<div id="chat_avatar"></div>
</div>
<div id="chat_container">
<div id="history_div">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" type="text" onkeypress="chatHandler(event)">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#chat_box').hide();
$('#chat_footer').hide();
});
</script>
</script>-->
</body>
</html>
And now, the JS:
function goToChat() {
origin = BANNER_NAME + "_" + uid + metaData;
$("#chat_intro").hide();
$("#chat_box").show();
$("#chat_top").show();
$("#chat_container").show();
$("#chat_footer").show();
$("#history_div").mCustomScrollbar( {
theme : "dark-thick",
advanced : {
updateOnContentResize : true
}
});
document.getElementById('input_area').focus();
chat();
}
function chatHandler(event) {
// ENTER key
var key;
if (window.event) // IE8 and earlier
{
key = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
key = event.which;
}
InputInterface.restartTimeout();
if (key == 13) {
chat();
$('#input_area').focus();
event.keyCode = 0;
}
}
function chat() {
// Build request
var chatText = "";
if (!initialized) {
chatText = "hi";
}
else {
chatText = input_area.value;
if(chatText.trim()=="")return;
var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
history_mc.innerHTML += userAnswer;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
$("#history_div").mCustomScrollbar("scrollTo", "bottom");
});
$(input_area).val("");
if(getUrlParameter("isMobile") == "true") hideKeyboard();
}
$("#deleteThis").remove();
InputInterface.prepareSending(chatText);
setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE;
$("#history_div").mCustomScrollbar("scrollTo", "bottom");});
if(!initialized){
InputInterface.flush();
initialized = true;
}
}
//Start calling recursively getMsgId until the retries max out or succesfully get an Id
function getResponse(json) {
start = new Date().getTime();
processRetries = 0;
responseRetries = 0;
getMessageId(json);
}
function displayResponse(response) {
$("#deleteThis").remove();
history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
if (DEBUG) console.log("#conv"+response_number);
$("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
response_number++;
},250);
document.getElementById('input_area').focus();
}
I hope you can shine me with you jedi powers, thank you so much.
Greetings.
Related
I made a simple "spacebar simulator" game with HTML and JavaScript. Every time the user presses spacebar an image is replaced with another one, and when the key is released it is reset to the original image.
I would like to add a counter to the page, which counts the number of times the user has pressed spacebar. The source code is below:
var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
if(e.which == 32){
$("#spacebar").attr("src", "./assets/spacebar_pressed.png")
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
var button = document.getElementById('counter'),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
<span id="counter"><p></p></span>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed</p><p id="counter">0</p><p> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
So set up a page level variable and increment it in the keydown event handler.
Your attempt at the "button" click code didn't work because the p element that needed to be clicked had no content inside of it, so it wasn't rendering on the screen and therefore there was nothing to click on.
Also, you can't have more than one element with the same id and it's invalid to put a p inside of a span.
var counter = 0; // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
if(e.which == 32){
counter++; // Increment the counter
$("#spacebar").attr("src", "./assets/spacebar_pressed.png");
count.textContent = counter; // Log the count
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed <span id="counter">0</span> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
before i reinvent the wheel, i wanted to know if anyone already has written a js/jquery library that allows user to select multiple div elements by left clicking and holding the hot keys (just like in windows)
Currently i have only this much
http://jsfiddle.net/abarik/nv9hnusu/3/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by abarik</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.selected {
background-color:green;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.selectable').click(function (e) {
// $('.console').append('shiftKey'+e.shiftKey)
$('.console').append('ctrlKey'+e.ctrlKey)
if (e.ctrlKey) {
$(this).toggleClass('selected');
}
});
var ids = new Array();
$('#btn').click(function () {
var selected_activities = $('.selected');
var ids = new Array();
selected_activities.each(function () {
var id_str = $(this).attr("id");
var id_arr = id_str.split("_");
var selval = id_arr[1];
if (selval != 'undefined' && selval != '' && selval != null) {
ids.push(selval);
}
});
alert(ids);
});
});//]]>
</script>
</head>
<body>
<div class="left_column">
<div class="selectable selected" id="participant_1">----1----</div>
<div class="selectable" id="participant_3">----2----</div>
<div class="selectable selected" id="participant_5">----3----</div>
</div>
<div class="right_column">
<div class="selectable" id="participant_2">----4----</div>
<div class="selectable" id="participant_4">----5----</div>
<div class="selectable" id="participant_6">----6----</div>
</div>
<input type="button" id="btn" value="Get selected ids">
<div class="console">ctrlKeyfalsectrlKeyfalsectrlKeytruectrlKeytrue</div>
</body></html>
found an library that does exactly what i need to http://evulse.github.io/finderSelect/
I have written the following function within the success of another ajax call :
I have used the readymade jquery and rapheal function for the venn diagram and used both there js ,here's the code :
( function($) {
$(function() {
$('#venn-demo').venn({ numSets: 3,
universeLabel : 'All rate centers '
});
$('.new-venn').click(function() {
$('#venn-demo').html('').venn({
numSets : $(this).attr('data-num-sets')
});
$('#region-list').html('');
});
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions')
, arNames = []
;
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
}
$('#region-list').html( arNames.join(', ') );
});
});
})(jQuery);
The resulting venn diagram should be clickable but it is not, also I am getting this error:
e.attr is not a function
How should I make this work?
Use this code for click function in venn diagram :
Download : http://www.filedropper.com/vennchart
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Venn</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="./css/main.css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/raphael-min.js"></script>
<script type="text/javascript" src="./js/jquery.venn.js"></script>
</head>
<body onload="vennLoad()">
<div id="venn-demo" style="margin: 0 auto; width: 430px; height: 300px"></div>
<div style="text-align: center;">Active Regions: <span id="region-list"></span></div>
<script type="text/javascript">
( function($) {
$(function() {
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions'), arNames = [];
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
console.log(arNames);
}
$('#region-list').html( arNames.join(', ') );
$('#venn-demo').find("svg").remove();
var regionVal = $('#region-list').text();
vennLoad(regionVal);
});
});
})(jQuery);
function vennLoad(regionVal){
$('#venn-demo').venn({ numSets: 3, setLabels:['AA: 60 ', 'BB: 70', 'CC: 30'] });
}
</script>
</body>
</html>
I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="finance.css"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="flotr.js"></script>
<script type="text/javascript" src="HumbleFinance.js"></script>
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript">
var priceData=[];
var dateData=[];
var NewdateData = [];
var NewData=[];
var date1 ;
var date2;
function callMe()
{
alert('dddw');
}
function drawChart(data)
{
for (var i = 0; i < data.jobs.length; i++) {
priceData.push([i, data.jobs[i].INCPU]);
dateData.push(data.jobs[i].Dater);
}
HumbleFinance.init('finance', priceData , dateData);
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
date1 = dateData[xmin];
date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] + ' - ' + dateData[xmax]);
alert(date1);
alert(date2);
This two alerts are being called continously .
}
);
}
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv',
{
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
},
onFailure: function(){ alert('Something went wrong...') }
});
});
</script>
</head>
<body>
<form id="sample">
<div id="finance">
<div id="dateRange">
</div>
</div>
</form>
</body>
</html>
The div dateRange is being updated only once , but the two alerts are being executed continuously
Please help ( Like the div tag , i want my alerts also want once )
It sounds like the custom event 'flotr:select' is being fired continuously.
Looking at the limited code provided i suspect that updating the 'dateRange' element is firing the 'flotr:select' event.
if you have firebug or google chrome, put a break point into the code and examine the call stack.