java chatbubbles right and left for firebase messages - javascript

I work currently on a messaging application on browser.
In my android app I can align the chat bubbles right or left , my question now how can i do this now in the web?
Android Image
Web Image
The Code for Web-Chatbubbles:
#messages {
overflow-y: auto;
float: left;
min-width: 100px;
margin-bottom: 10px;
height: calc(100% - 80px);
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
background: skyblue;
border-radius: 12px;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
Now my first question : How can i align the separate items left or right?
And my second question : In the image above the timestamp is not in the bubble how can i align it under the message end align end at the message end?
Current code for timeStamp:
display: inline-flex;
color: black;
font-style: italic;
font-size: 12px;
float: right;
Here is my HTML-Code for the message-list:
<div id="messages">
<span id="message-filler"></span>
</div>
And here the JavaScript :
if (!div) {
var container = document.createElement('div');
container.innerHTML = FriendlyChat.MESSAGE_TEMPLATE;
div = container.firstChild;
div.setAttribute('id', key);
this.messageList.appendChild(div);
}
div.querySelector('.timeStamp').textContent = '15:53';
var messageElement = div.querySelector('.message');
if (text) { // If the message is text.
messageElement.textContent = text;
// Replace all line breaks by <br>.
messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
} else if (imageUri) { // If the message is an image.
var image = document.createElement('img');
image.addEventListener('load', function () {
this.messageList.scrollTop = this.messageList.scrollHeight;
}.bind(this));
this.setImageUrl(imageUri, image);
messageElement.innerHTML = '';
messageElement.appendChild(image);
}
setTimeout(function () { div.classList.add('visible') }, 1);
this.messageList.scrollTop = this.messageList.scrollHeight;
this.messageInput.focus();
};
Thanks in advance (:

Related

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

How make a textarea with tags in react that have clickable dropdown

Id like to make a component in react that allows me to have a textarea with tags that can be inserted when clicked from a dropdown. Id also like this textarea to be able to mix text aswell. I have currently been trying to use tagify with react but I cant seem to figure out a way to the tagify's function that adds the tag to be accessed by the onClick that is connected to the dropdown.
Any ideas?
I believe you can get your answer in this URL of other question asked on StackOverflow https://stackoverflow.com/a/38119725/15405352
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
// yeah, browser sniffing sucks, but there are browser-specific quirks to handle that are not a matter of feature detection
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
// iOS adds 3px of (unremovable) padding to the left and right of a textarea, so adjust highlights div to match
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
$toggle.on('click', function() {
$container.toggleClass('perspective');
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #f0f0f0;
}
.container, .backdrop, textarea {
width: 460px;
height: 180px;
}
.highlights, textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
button {
display: block;
width: 300px;
margin: 30px auto 0;
padding: 10px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
}
.perspective .backdrop {
transform:
perspective(1500px)
translateX(-125px)
rotateY(45deg)
scale(.9);
}
.perspective textarea {
transform:
perspective(1500px)
translateX(155px)
rotateY(45deg)
scale(1.1);
}
textarea:focus, button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>
<button>Toggle Perspective</button>
Reference- https://codepen.io/lonekorean/pen/gaLEMR for example

How to add static text after animated text in CSS

I've just started a couple of days in web development.
I need help for - I have two texts in the HTML (p tag) on the same line, one linked to JS with an "ID" and the other to CSS with "Class" and by using keyframes, and I've been trying to add a static text on the same line that displays after the animated text.
I'm trying to output - Where the First text animates by default, and when JS actions are triggered, that is by clicking on the button, the second text should display a static text on the same line as the first text.
My code:
JavaScript
CSS
HTML
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
#second-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>
Please, Help me figure out what went wrong in my code?
Is that what you are looking for ?
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
document.getElementById("second-text").classList.remove("first-text");
document.getElementById("second-text").classList.add("newClass");
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
.newClass{
margin: 30px;
font-size: 20px;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>

Add delay to show loading GIF on button, then close div (to load results)

I would like to have a button, that when clicked shows a pre-loading gif for 1-second, and then closes the div #sidefilter, that the user has open.
I have been able to get both of them working independently, but they are not working as intended, I think I need to add a delay to #dismissiefilter, and then end the loading GIF when executed.
What needs to be added to enable the above to happen?
$('.showloader').button();
$('.showloader').click(function() {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
$('#dismisssidefilter, .overlay').on('click', function() {
$('#sidefilter').removeClass('active');
$('.overlay').removeClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
See results
Working link:
https://clearing.co.uk/dev/universities/
Filter button next to 'search for a university' input field
I've updated my answer with a demo representing your site
$(function() {
var devActions = function(str, clear) {
let output = $('#dev-output');
if (typeof clear === 'boolean' && clear === true) {
output.empty();
}
output.append(' - ' + str + '<br />');
console.log('devActions:', str);
}
$('#sidefilterCollapse').on('click', function() {
var sidebar = $('#sidefilter');
if (!sidebar.hasClass('active')) {
sidebar.addClass('active');
devActions('#sidefilterCollapse clicked', true);
devActions('Adding .active class to #sidefilter');
if ($('#sidefilter').hasClass('active')) {
devActions('#sidefilter now has .active class');
} else {
devActions('somethings went wrong #sidefilter doesn\'t have .active class');
}
} else {
devActions('#sidefilter already has .active class');
}
})
$('.showloader').on('click', function(e) {
e.preventDefault();
var btn = $(this);
// add .loading class so we can prevent spam click
if (!btn.hasClass('loading')) {
btn.addClass('loading');
var saveOriginalText = $(this).html();
var duration = 3000;
btn.html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
if (btn.children('img').length) {
devActions('.showloader clicked and image was added.');
}
btn.stop(true).animate({
opacity: 1
}, {
duration: duration,
start: function() {
devActions('animation started');
},
complete: function() {
devActions('animation done');
// remove .loading class so we can make the button available again
btn.removeClass('loading');
btn.html(saveOriginalText);
if ($(this).html() == saveOriginalText) {
devActions('original button content was added on .showloader');
}
// do custom stuff after 1000ms
$('#sidefilter').removeClass('active');
if (!$('#sidefilter').hasClass('active')) {
devActions('.active class has been removed from #sidefilter');
}
}
})
} else {
devActions('---- don\'t spam click, currently loading ---');
}
});
})
body {
overflow-x: hidden;
font-family: "Segoe UI";
}
#sidefilterCollapse,
.showloader {
padding: 3px 5px;
line-height: 1rem;
width: 100px;
background: red;
color: white;
display: inline-block;
text-align: center;
border-radius: 20px;
cursor: pointer;
text-decoration: none;
}
#sidefilter {
text-align: center;
position: fixed;
right: -200px;
top: 0;
padding: 15px 10px;
box-sizing: border-box;
width: 200px;
height: 100%;
border-left: 1px solid lightgrey;
box-shadow: -2px 0 13px 2px grey;
transition: right 0.2s ease-in-out;
}
#sidefilter.active {
right: 0;
transition: right 0.2s ease-in-out;
}
#sidefilter p {
text-align: left;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidefilterCollapse">
Filter Button
</div>
<div id="sidefilter">
<p>
text text text text text text text text text
</p>
See results
</div>
<div id="dev-output"></div>

JS slider image disappears when clicking Prev/Next arrow

I've tried to look for a solution for this but have failed miserably. It's my first ever time using JS (I'm trying to learn) so the possibility of my just not understanding the answers in the search results properly is quite high - sorry about that.
I am wanting a JS carousel, generated from an array, with Prev/Next buttons (ideally responsive etc but that'll come at a later stage), preferably with captions underneath. I can get the carousel to work but I end up getting a text link when I click on either Prev or Next. And I've no idea how to add the caption array underneath (I've taken out the JS for the captions for now because it was messing everything else up even further).
Relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
#media (max-width:767px){.karu{max-width: 95%;}}
And finally, the dreaded JS:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//J2rgmine
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Eelmine
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I'm sure the solution is dreadfully obvious, I just cannot seem to be able to figure it out...
instead of innerHTML change src attribute of image
document.querySelector('#karussell img').src = eelmine();
And
document.querySelector('#karussell img').src = jargmine();

Categories