Develop Reference

Avoid text shift as it goes up in a column

I'm making a website where you can send messages in two different columns (for two supposed users).
There is a footsteps system that is adding a <br> every second so you have messages going up as soon as they appears.
SO basically, every time you send a message, it is going up in the column you sent it until it diseapper at the top of the page.
My issue is the following:
Every time a user enter a message it makes all the other messages of the column shift (which is normal I assume) but the other person's column is not affected by this change so it makes a huge shift in the order of messages on screen if it's a big message.
I would like to know if this is possible to compensate that; because I've been trying a lot of things but nothing came to my mind and since I'm still learning, I can't see too far haha...
let identifier = 1;
var maxSteps = 500;
var i = 0;
var nbOfSteps = 0;
var timer;
function incrementDoc() {
nbOfSteps++;
$("<div />", {
"class": "maxSteps"
})
.css({})
.append($("<p>" + nbOfSteps + " pas </p>"))
.appendTo(".one")
$(".pathL").append($("<br>"))
$(".pathR").append($("<br>"))
$(".pathL").animate({scrollTop: $(".pathL")[0].scrollHeight}, 500);
$(".pathR").animate({scrollTop: $(".pathR")[0].scrollHeight}, 500);
$(".maxSteps").prev().remove();
if (++i >= maxSteps) {
clearInterval(timer);
}
}
$( document ).ready(function() {
$(document).on("click", ".add", function() {
maxSteps += 10;
console.log(maxSteps);
})
timer = setInterval(incrementDoc, 1000);
$('#mL').keyup(function(e){
if(e.keyCode == 13){
event.preventDefault();
var message = $('#mL').val()
$(this).parent().parent().append(
$("<p class='messInd'>" + message + "</p>").attr('id', identifier)
);
$('#mL').val("") // retourner à la valeur 0 de #m
identifier++;
var text = $(".pathL").find('#' + identifier);
}
});
$('#mR').keyup(function(e){
if(e.keyCode == 13){
event.preventDefault();
var message = $('#mR').val()
$(this).parent().parent().append(
$("<p>" + message + "</p>").attr('id', identifier)
);
$('#mR').val("") // retourner à la valeur 0 de #m
identifier++;
var text = $(".pathR").find('#' + identifier);
}
});
});
body {
font-family: sans-serif;
font-size: 1.3rem;
margin: 0;
background-color: #5a6c58;
}
.messInd {
margin: 0;
padding: 0;
}
#messL,
#messR{
width: 24vw;
position: fixed;
bottom: 0;
background-color: pink;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0px;
grid-auto-rows: minmax(100vh, auto);
height: 100vh;
}
.pathL,
.pathR
{
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
overflow: scroll;
position: relative;
height: 100%;
background-color: #ffdbf5;
}
.pathL {
background: rgb(255,219,245);
overflow: hidden;
text-align: center;
padding: 0.5rem;
grid-column: 1 / 2;
}
.pathR {
background: rgb(255,255,245);
grid-column: 2 / 2;
}
.pathL::-webkit-scrollbar,
.pathR::-webkit-scrollbar{
display: none; /* Safari and Chrome */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="wrapper">
<div class="pathL" id="droite">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="messL">
<input id="mL" autocomplete="off" name="name"/>
</div>
</div>
<div class="pathR" id="droite">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="messR">
<input id="mR" autocomplete="off" name="name"/>
</div>
</div>
</div>

So the answer I have for now is :
console.log($('#' + identifier).height());
var compensate = $('#' + identifier).height();
$(".pathL").append( // the oposite column
$("<div class ='compensate'></div>").css('height', compensate)
);
It's adding a div of the height of the message sent to the other column.
Works fine!

Button working on chrome but not on firefox

I made a button in HTML that work fine on Google Chrome but does not react at all on Firefox.
My code:
function fbs_click() {
var u = location.href;
var t = document.title;
window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t) + '&s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
function rSign() {
var test = Math.random();
return test > 0.5 ? 1 : -1;
}
var CQuote = "",
CAuthor = "";
function getQuote() {
$.ajax({
jsonp: "jsonp",
dataType: "jsonp",
contentType: "application/jsonp",
url: "https://api.forismatic.com/api/1.0/?",
data: {
method: "getQuote",
lang: "en",
format: "jsonp",
},
success: function(quote) {
// document.getElementById("quote").innerHTML =
CQuote = quote.quoteText;
// document.getElementById("author").innerHTML =
CAuthor = quote.quoteAuthor;
document.getElementById("author").innerHTML = CAuthor;
document.getElementById("quote").innerHTML = CQuote;
}
});
}
$(document).ready(function() {
getQuote();
})
var background = document.getElementById('backimg');
var huetarget = 0;
var huecurrent = 0;
var bright = 1;
function abyssmal() {
background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
if (huecurrent < huetarget) {
huecurrent += Math.abs(huetarget - huecurrent) / 20
}
if (huecurrent >= huetarget) {
huecurrent -= Math.abs(huetarget - huecurrent) / 20
}
}
var interval = setInterval(abyssmal, 25);
$("#btnAnimate").on("click", function() {
huetarget += (Math.random() * 50 + 50) * rSign();
getQuote();
});
$('#tweet').on("click", function() {
window.open("https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + CQuote + '" -' + CAuthor), "_blank")
});
$('#facebook').on("click", function() {
fbs_click();
});
/*#myDiv{
background-color: green;
transition : background-color 2s,opacity 2s;
}
#myDiv:hover{
background-color : red;
opacity : 0.5
} */
#quotebox {
font-size: 30px;
height: auto;
}
#authorbox {
text-align: right;
}
.box {
height: auto;
margin: auto;
}
#btnAnimate {
width: 150px;
}
.share {
width: 50px;
float: right;
}
.button {
height: 50px;
padding: 0px;
vertical-align: middle;
margin-top: 40px;
color: white;
background-color: #333c5b;
border-radius: 3px;
border: none;
}
button:hover {
opacity: .8;
}
.background-tile {
background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
background-size: 1500px 900px;
height: 900px;
width: 1515px;
padding-top: 270px;
z-index: -1;
}
#backimg {
filter: hue-rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="background-tile" id="backimg">
<div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870">
<div id="quotebox">
<i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "></i>
<span id="quote"></span>
<p id=a uthorbox>-<span id="author"></span>
<p>
</div>
<button class="button quotebutton" id="btnAnimate">get quote</button>
<button class=" share button fa fa-facebook" id="facebook"></button>
<button class=" share button fa fa-twitter" id="tweet" style=" margin-right: 25px;"></button>
</div>
</div>
I doublechecked that only phrasing elements were nested inside the button.
Question: Why does the button not react on Firefox.

Some HTML methodologies are not supported via crossed-browsers.
For example, some features can work on Mozilla and Internet Explorer, but not on Chrome.
However, in this case it's demonstrating the BODY tag is overlapping your content. It may be an error with Mozilla in particular with Codepen.io, as W3schools validated that the button feature works on this browser.

You placed everything inside #backimg, which has z-index: -1, thus sending all its contents below its parent, which is <body>. This means that, even though visible, your contents sit below an invisible click-catcher (<body>).
Firefox seems to apply the z-index, although, AFAIK, the element should be position-ed (have a position value set to anything except static, which is default) for z-index to apply. Chrome doesn't apply it, because #backimg has the implicit position:static.
Closing #backimg before opening #mydiv fixes the problem and makes your HTML valid. It's not really clear how your layout is supposed to look, but here's my attempt at fixing it: https://codepen.io/anon/pen/ZvXXqP
Another problem with your pen had was that it was loading jQuery after Bootstrap's JavaScript, which requires jQuery.

Server request for audio file times out before returning any data

When running the code to retrieve an audio file I recieve this error:
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
I am pretty sure this means that it took to long to load the resource that it timed out. But I am not sure why that would happen. I checked to make sure that it was loading the right file, and it was.
Here is the html code
<html>
<head>
<style>
.titletext {
color: white;
display: block;
position: absolute;
font-size: 50px;
width: 1000px;
margin-left: 150px;
margin-right: 200px;
}
.nametext {
color: white;
display: block;
position: absolute;
font-size: 30px;
width: 600px;
margin-left: 500px;
margin-right: 200px;
margin-top: 600px;
}
.earthphoto {
display: block;
position: absolute;
margin-left: 400px;
margin-top: 150px;
}
</style>
</head>
<body onresize="changeWidth()" onload="changeWidth()">
<script type="text/javascript">
document.body.style.background = "black";
var changeWidth = function() {
screenwidth = window.innerWidth;
screenheight = window.innerHeight;
};
var changescene = function() {
var allvariables = Object.keys(window);
if (page === 1) {
allvariables.splice(9, 4);
}
page++;
};
var page = 1;
document.body.addEventListener("click", function() {
changescene()
});
var update = function() {
if (page === 1) {
document.body.innerHTML = "";
var text = document.createElement("p");
var textclass = document.createAttribute("class");
textclass.value = "titletext";
text.setAttributeNode(textclass);
text.appendChild(document.createTextNode("Welcome to Mikey's Google Earth Presentation!"));
document.body.appendChild(text);
var text2 = document.createElement("p");
text2class = document.createAttribute("class");
text2class.value = "nametext";
text2.setAttributeNode(text2class);
text2.appendChild(document.createTextNode("By Mikey Richards"));
document.body.appendChild(text2);
googleearthimage = document.createElement("img");
googleearthimage.setAttribute("src", "EARTH.png");
googleearthimage.setAttribute("class", "earthphoto");
document.body.appendChild(googleearthimage);
var music = document.createElement("audio");
var musiclink = document.createElement("source");
musiclink.src = "Test.mp3";
music.appendChild(musiclink);
document.body.appendChild(music);
} else if (page === 2) {
document.body.innerHTML = "";
}
}
setInterval(function() {
update();
}, 1000);
</script>
</body>
</html>
The website for this code can be found here.

OK. I figured out that he problem was that I was not calling the play function on the audio. Thanks for putting up with my bad programming skills.

Light box pop up form in jquery

Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.

To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});

Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/

Caption text over an image

I am sorry, this a newbie question. I want to display random pictures taken from a directory of my server and I want to display a text associated to each image (txt files in the same directory. Example: 1.jpg -> 1.txt; 2.jpg -> 2.txt...). I want that the text appear above the image, in a frame placed on the top of the image, only upon mouse hover on the image.
The javascript code, css and html codes can be found here:
http://jsfiddle.net/Totoleheros/ES22a/
html code:
<img id="fullSize" onload="fixImage(this)" />
<div id="HOLDER">
<div id="theCaption"></div>
</div>
<img id="showImage" alt="random image" />
CSS code:
/* The first style is to hide the text*/
#theCaption {
position: absolute;
width: 200px;
height: 331px;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
z-index: 3;
}
/*The send style is to show the text on hover*/
#theCaption:hover, #theCaption:active {
position: absolute;
width: 200px;
height: 40px;
background-color: #eeeeee;
color: #000000;
overflow: hidden;
font-family: arial;
font-weight: normal;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 3;
font-size: 10px;
line-height: 0.9em;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}
javascript code:
function fixImage(image) {
// I want an to display an image of 200x331px taken from a directory of image of various dimensions
var show = document.getElementById("showImage");
if (image.height > image.width) {
show.style.height = "331px";
show.style.width = Math.round((image.width / image.height) * 331) + "px";
} else {
show.style.width = "200px";
show.style.height = Math.round((image.height / image.width) * 200) + "px";
}
show.src = image.src;
show.style.visibility = "visible";
}
var MAXPICTURENUMBER = 166; // or whatever you choose
var rn = 1 + Math.floor(MAXPICTURENUMBER * Math.random());
// Here I point to the directory containing the images and the caption
var url = "http://www.test.fr/Images/RandomPictures/" + rn + ".jpg";
var caption = "http://www.test.fr/Images/RandomPictures/" + rn + ".txt";
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", caption, false);
xmlhttp.send();
captionText = xmlhttp.responseText;
window.onload = function () {
document.getElementById("theCaption").innerHTML = captionText;
document.getElementById("fullSize").src = url;
}
I am sure that there is a much cleaner/smarter solution than the one I am using, but remember, I'm a newbie.
My issue: this is almost working except that the text sometimes disappear according to the mouse position. How can I fix that?
Thkx in advance for your help!!

I would put the image and the caption in the same container. Something like
<div class="container">
<img class="image" src="image.png" />
<div class="caption">The caption</div>
</div>
and in css
.caption{position:relative; top:-20px; height:20px; display:none;}
.container:hover .caption{display:block;}
you can obviously style however.
EDIT: here's the final fiddle: http://jsfiddle.net/ES22a/5 part of the problem was a jQuery conflict so there's also a jQuery.noConflict(); in the head.