We Keep Coding

document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.
I would like to keep the possibility to move the div and to highlight the text in textarea like I want.
Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it's really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn't look good).
Here's the code:
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

This can do like but not perfact：
RollBack selection when focus back it.
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
window.addEventListener('load',function(){
var logTextSelection = function(event) {
var tgItem = event.target;
tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
}
var rollBackSelection = function(event){
var tgItem = event.target;
var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
if((lastSelectionStart !== lastSelectionEnd)){
tgItem.focus();
tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
}
}
var docTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < docTextareas.length; i++) {
docTextareas[i].addEventListener('select', logTextSelection, true);
docTextareas[i].addEventListener('keyup', logTextSelection, true);
docTextareas[i].addEventListener('focus', rollBackSelection, true);
}
});
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

OK I found it, i just created a div that replace document for the addeventListener.
Ps I set the color to rgba(0, 175, 0, 0.3) just for you to see how it react and work you can obviously change it to 0.
function start() {
varNotesWindow.classList.add('show');
}
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');
//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//End Move Notes Window
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.alternativeDocumentForMoveButtonsWindowClass {
display: none;
}
.alternativeDocumentForMoveButtonsWindowClass.use {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 175, 0, 0.3);
}
#notesWindow {
display: none;
}
#notesWindow.show {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<button onclick='start()'>Let's Go</div>
<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

Box hidden when created

On my website I have a button which will create a box when clicked. If that box is visible and the user clicks outside of it, it should be hidden. The problem I have is that the box is hidden right after it is created.
This is the piece of code I use to remove the box if the user clicks outside of it. I struggle understanding why it is triggered when I create the box, because it is not really visible yet.
function createBox(){
var output = "";
output += '<div class="single-box">';
output += '</div>';
$("#list-box").html(output);
document.getElementById('list-box').style.display = 'block';
}
$(document).click(function(event) {
if(!$(event.target).closest('.single-box').length) {
if($('.single-box').is(":visible")) {
var output = "";
$("#list-box").html(output);
document.getElementById('list-box').style.display = 'none';
}
}
});
#list-box{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 500;
position: fixed;
display: none;
}
.single-box{
z-index: 1000;
top: 100px;
position: fixed;
background-color: white;
overflow-y: auto;
overflow-x: hidden;
width: 500px;
height: 500px;
right: calc(50% - 250px);
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p onclick="createBox();">
Create box
</p>
<div id="list-box"></div>

$("#somebutton").click(function () {
$("#container").append('<div class="box">Your hidden box is now visible</div>');
});
var mouse_is_inside = false;
$(document).ready(function(){
$('#container').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.box').hide();
});
});
#container {
width:200px;
height:200px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="somebutton">
Your button
</button>
<div id="container"></div>

A working solution:
let mouse_inside = false ;
$("#somebutton").click(function () {
let div = document.createElement('div');
div.className = 'box';
$("#container").append(div);
$('.box').hover(function(){
mouse_inside=true;
}, function(){
mouse_inside=false;
});
});
$(document).ready(function(){
$("body").mouseup(function(){
mouse_inside || $('.box').hide();
});
});
#container {
width:200px;
height:200px;
background:red;
}
#container .box { background-color: blue; width:40px; height:40px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="somebutton">
ADD A BOX BELOW
</button>
<div id="container"></div>

here you go try using this steps , first check the element clicked id
if the element is the button you want it to creat that box trigger your creatBox() else if element clicked is the box do nothing else empty #list-boxand hide it :
function createBox(){
var output = "";
output += '<div class="single-box">';
output += '</div>';
$("#list-box").html(output);
$('#list-box').show();
}
$(document).click(function(e) {
var target = $(e.target);
var id = target.attr('id');
var eclass = target.attr('class');
if(id == "creatbox"){
createBox();
target.prop("disabled",true);
}
else if(eclass == "single-box")
{
return;
}
else {
$("#list-box").html('');
$('#list-box').hide();
$('#creatbox').prop("disabled",false);
}
});
#list-box{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 500;
position: fixed;
display: none;
}
.single-box{
z-index: 1000;
top: 100px;
position: fixed;
background-color: white;
overflow-y: auto;
overflow-x: hidden;
width: 500px;
height: 500px;
right: calc(50% - 250px);
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="creatbox">
Create box
</button>
<div id="list-box"></div>

How can I set elements in the same line vertically?

Here is my code:
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
left = self.position().left;
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
As you see, that popup is far away than hovered element. While I expect they be in the same line (vertically) on the right side.
How can I do that?

Change this
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.position().right; // Update this
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
Update your left variable with the example code
It was left = self.position().left; Update that to right = self.position().right;
and also this variable too
$(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);
to
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
rightside = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: rightside + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
EDIT
Add this new function
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
And Update this Line
right = self.position().right;
to
right = self.right();
Hope it will helps you.

change left = self.position().left; to right = self.position().right;
change "left" into "right " in css.
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);

Can't overwrite CSS property with jQuery, what's wrong with my code?

I'm working on the jQuery project in The Odin Project curriculum. I've managed to create a grid inside a container that changes the color of it's boxes but I want to be able to increase the amount of boxes without popping out of the container. I think I can manage if I overwrite the css properties of the boxes with jQuery but can't figure out why it's not working.
Here's my code:
$(document).ready(function grid(boxes)
{
//Declare how many boxes in the grid.
var boxes = prompt("Choose gridsize");
//Resize boxes assigning css.
var rcsize = Math.floor(400/boxes - 3);
$('.row').css('width: ' + rcsize + 'px');
$('.row').css('height: ' + rcsize + 'px');
//Create grid.
var $row = $('<div class="row"></div>');
var $col = $('<div class="col"></div>');
for (var i = 0; i < boxes; i++) {
$row.append($col.clone());
}
for (var i = 0; i < boxes; i++) {
$("#outerbox").append($row.clone());
}
$('.col').on('hover', function() {
$(this).addClass('colon');
});
//Add functionality to navbar buttons.
$("#g").click(function() {
prompt("Choose gridsize");
});
$("#r").click(function() {
alert("sup");
});
$("#c").click(function() {
prompt("Choose color: black, red or blue");
});
});
Here's my CSS:
.body {
width: 100%;
height: 100%;
background-color: #a79696;
position: absolute;
margin: 0 0 0 0;
overflow-x: hidden;
}
.titlelogo {
background-color: #e38f52;
height: 25px;
width: 100%;
padding: 30px 0 30px 0;
}
#logo {
margin: 0 0 0 0;
width: 30%;
font-size: 20px;
}
#navbar0 {
margin-top: 0;
padding: 0;
background-color: #483f47;
}
.navbar1 {
display: inline;
text-decoration-color: white;
}
button {
margin-left: 45px;
margin-right: 45px;
background-color: #ffffff80;
}
#outerbox {
width: 400px;
height: 400px;
margin: 50px;
border-radius: 10px;
background-color: #e38f52;
padding: 12px 0px 0px 12px;
}
.row {
display: inline-block;
float: left;
padding: 1px;
}
.col {
height: 22px;
width: 22px;
margin: 0px;
outline: 1px solid;
outline-color: #000;
float: left;
background: #e38f52;
display: inline-block;
padding: 1px;
}
.colon {
background: #000;
}
The hover is not working on jsfiddle but it works on my index file for some reason. Thank you in advance.
jsfiddle

use css function as below
$('.row').css('width' , rcsize + 'px');
$('.row').css('height' , rcsize + 'px');
For reference check this link http://api.jquery.com/css/

you have typo in class. right here
//create grid
var $row = $('<div clas="row"></div>');
it should be
//create grid
var $row = $('<div class="row"></div>');

div not retaining CSS attribute on click()

I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). When one hovers over the divs, they highlight (change color). When the user clicks the highlighted div, it changes to black. For some reason, the div that was black reverts back to the original color when I hover over a different div. I'm puzzled as to why that is. Any help or guidance would be greatly appreciated. Here's my jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/79/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).css({
'background-color': '#000000'
});
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});

Once you click on a DIV, you should maintain a flag that tells you hover function to stop changing colors
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).data("clicked", true); //ADDED LINE
$(this).css({
'background-color': '#000000'
});
});

it changed because of hover function.
https://jsfiddle.net/1g9p59bx/82/
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).addClass('active');
$(this).css({
'background-color': '#000000'
});
});

For some reason, the div that was black reverts back to the original color when I hover over a different div
Not quite. It reverts to the original colour when you leave the current div, because that's what you tell it in the second argument to $('.square').hover. You would need to remember that the square was clicked, and build extra logic into the "unhover" function.
Fortunately, there is an easier way: use CSS. Note the very bottom of the CSS definitions.
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.click(function () {
$(this).addClass('clicked');
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
.container {
background-color: #252525;
width: 600px;
height: 700px;
margin: 0 auto;
border-radius: 5px;
}
.inner {
background-color: #C8C8C8;
position: absolute;
width: 580px;
height: 600px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
border-radius: 5px;
}
.knob {
background-color: #575759;
width: 60px;
height: 60px;
border-radius: 60px;
}
#left_b {
position: absolute;
margin-left: 30px;
margin-top: 625px;
margin-bottom: 10px;
}
#button {
position: absolute;
margin-left: 265px;
margin-top: 640px;
margin-bottom: 10px;
}
#right_b {
position: absolute;
margin-left: 510px;
margin-top: 625px;
margin-bottom: 10px;
}
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-radius: 5px;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
margin: 0 auto;
}
.highlight {
background-color: #FFFFFF;
outline: #C8C8C8;
outline: 1px;
outline: solid;
margin: 0 auto;
}
.square {
background-color: #C8C8C8;
}
.square:hover {
background-color: #FFFFFF;
}
.square.clicked {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div id="g_area"></div>
</div>
<div class="knob" id="left_b"></div>
<div id="button">
<button>RESET</button>
</div>
<div class="knob" id="right_b"></div>
</div>
</div>
</body>