Develop Reference

Using the duration of mouse press for scrolling

I coded this:
$("#scroll-to-left-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x - 10);
});
$("#scroll-to-right-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x + 10);
});
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button id="scroll-to-left-button">Scroll to left</button>
<button id="scroll-to-right-button">Scroll to right</button>
You need to click the buttons pretty often to navigate through this container. Is there a way to let it based on the duration of the mouse press? Like if you keep the mouse pressed, it continues constantly scrolling? And if you stop, it stops.
Would be happy if someone could help me.

Here's a working solution. Also your code was a bit wet, so I refactored it a bit. You only need one mousedown event listener.
let interval;
$('.scroll-btn').on('mousedown', ({ target }) => {
const type = $(target).attr('id');
interval = setInterval(() => {
var x = $('#scroll-area').scrollLeft();
$('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10);
}, 50);
});
$('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval));
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</div>
</div>
</div>
<button id="left" class="scroll-btn">Scroll Left</button>
<button id="right" class="scroll-btn">Scroll Right</button>

Well, the mousedown and mouseup make a good pair, although you have used only mousedown :)
Here's a sample how it could be done.
Note that there're couple other things that could be done to this code for it to look nicer:
.on(... is not probably needed, you could just write it as .mousedown(...
the code for the right and left buttons look really similar, you could unite these blocks in one and distinguish by an additional attrubute (let's say like move="10" for the right button and move="-10" for the left one, and then just getting this value in order to add it to scrollLeft)
var tmr;
$(".scroll-button").mousedown(function() {
//let's setup the timer here...
move = +$(this).attr("move");
tmr = setInterval(function(){
$("#scroll-area")[0].scrollLeft+=move;
}, 250)
});
$(".scroll-button").mouseup(function() {
// and destroy the timer here
clearInterval(tmr);
});
#container {
width: 50%;
height: 300px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button class="scroll-button" move="-10">Scroll to left</button>
<button class="scroll-button" move="10">Scroll to right</button>

CSS simultaneous transition on multiple elements

So, I have 3 flexbox containers of the same dimension. When I click on one of them, it should stretch to become bigger then the others, and then back to normal if I click on it again.
I've made it using JS, and it works.
The problem is that when I already have one the boxes stretched and I try to stretch another one, the transition duration increases. And I can't figure out why. I thought the different transitions would start simultaneously.
This is the code:
/* HTML */
<div class="flexbox">
<div class="box-1" onclick="box1();">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-2" onclick="box2();">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-3" onclick="box3();">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>
/* CSS */
.flexbox {
display: flex;
width: auto;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 250px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: flex-grow 1s linear 0s;
}
.box-1{
flex-grow: 0;
}
.box-2 {
flex-grow: 0;
}
.box-3 {
flex-grow: 0;
}
/* JS */
function box1(){
const box1 = document.getElementsByClassName('box-1')[0];
if(box1.style.flexGrow != '4'){
box1.style.flexGrow = '4';
} else {
box1.style.flexGrow = '0';
}
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box2(){
const box2 = document.getElementsByClassName('box-2')[0];
if(box2.style.flexGrow != '4'){
box2.style.flexGrow = '4';
} else {
box2.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box3(){
const box3 = document.getElementsByClassName('box-3')[0];
if(box3.style.flexGrow != '4'){
box3.style.flexGrow = '4';
} else {
box3.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
}
How can I have the transition duration to be always the same (1s in this example)?

There are a number of improvements that can be made to your code that will reduce duplication, avoid complications of interacting with the live HTMLCollection that getElementsByClassName returns, allow you to avoid using inline onclick assignments, and will cause the transition to only take 1 second.
The example below implements a single grow() function which is called by listeners attached to each box. The listeners are added by iterating over the NodeList returned by querying the DOM with .querySelectorAll('.box') and calling addEventListener() on each element.
In the CSS we declare classes for each state we want our boxes to be able to have - in this case flex-grow: 0 and flex-grow:4. Then in our grow() function we simply add or remove these styles as necessary based on which box was clicked.
function grow(e){
// if the clicked box already has class 'flexgrow4' return
if (e.currentTarget.classList.contains('flexgrow4')) return;
// otherwise find the element in the flexbox container that has
// class 'flexgrow4' and replace it with 'flexgrow0'
const lastActive = flexbox.querySelector('.flexgrow4');
if (lastActive) lastActive.classList.replace('flexgrow4', 'flexgrow0');
// finally, replace 'flexgrow0' with 'flexgrow4' on the clicked box
e.currentTarget.classList.replace('flexgrow0', 'flexgrow4');
}
const flexbox = document.querySelector('.flexbox');
const boxes = document.querySelectorAll('.box')
boxes.forEach(box => box.addEventListener("click", grow, false));
.flexbox {
display: flex;
width: 100vw;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 100px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: all 1s linear 0s;
}
.flexgrow0 {
flex-grow: 1;
}
.flexgrow4 {
flex-grow: 4;
background-color:tomato;
}
<div class="flexbox">
<div class="box flexgrow0">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>

Replicate input scroll on div

I'm trying to replicate a input horizontal scroll on a div element, so whenever the user move along the input the div element scrolls exactly the same as the input.
My problem is with Chrome as it seems the input has a different scroll behavior, causing the scrollLeft value to be different in both elements. In Firefox it works as expected.
Is there any way to achieve this in Chrome without using jQuery or other libraries? or am I asking the impossible?
var theTextDiv = document.getElementById("the-text");
var theText = document.getElementById("the-text-input");
function keepScroll(txt) {
theTextDiv.scrollLeft = theText.scrollLeft;
}
theText.addEventListener("blur", function() { keepScroll("blur"); });
theText.addEventListener("change", function() { keepScroll("change"); });
theText.addEventListener("focus", function() { keepScroll("focus"); });
theText.addEventListener("input", function() { keepScroll("input"); });
theText.addEventListener("keydown", function() { keepScroll("keydown"); });
theText.addEventListener("keyup", function() { keepScroll("keyup"); });
theText.addEventListener("scroll", function() { keepScroll("scroll"); });
theText.addEventListener("select", function() { keepScroll("select"); });
#the-text {
border: 1px solid red;
max-width: 98px;
font-size: 14px;
overflow-x: scroll;
word-wrap: break-word;
white-space: nowrap;
font-family: "Times New Roman", Times, serif;
padding: 1px;
margin-right: 10px;
}
#the-text-input {
border: 1px solid red;
width: 100px;
font-size: 14px;
font-family: "Times New Roman", Times, serif;
}
<div id="the-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<input type="text" id="the-text-input" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
EDIT:
I tried the above code on Chrome 77 on a Mac and it works as expected, there's no gap between both elements, and I'm starting to think this is a Windows problem rather than a Chrome problem
EDIT(2):
After restarting my PC all work as expected (seriously) maybe some chrome cache was causing to have a weird behavior

This probably has to do with paddings and borders on the input and/or the div, and as it looks like it's working fine in Chrome 77, you either forgot to add some code in the example you posted or the default styles for those elements are also playing a role here.
In any case, my suggestion would be to remove margins, paddings and borders from both elements and adding a wrapping div with those instead (red example).
You can also use box-sizing: border-box, keep those styles and avoid the wrapper, but padding behaves differently in an input, as content in the padding area is not visible (blue example).
Lastly, your code to update the scroll was not working properly on blur, as when the event fires the scroll on the input hasn't been reset to 0 yet. Wrapping it with setTimeout or window.requestAnimationFrame solves the issue. Additionally, the latter will also make the update much smoother and in-sync.
const text = document.getElementById('text');
const input = document.getElementById('input');
function updateScroll() {
// Scroll not updated on blur without requestAnimationFrame
// or setTimeout:
requestAnimationFrame(() => text.scrollLeft = input.scrollLeft);
}
input.addEventListener('blur', updateScroll);
input.addEventListener('change', updateScroll);
input.addEventListener('focus', updateScroll);
input.addEventListener('input', updateScroll);
input.addEventListener('keydown', updateScroll);
input.addEventListener('keyup', updateScroll);
input.addEventListener('scroll', updateScroll);
input.addEventListener('select', updateScroll);
const textAlternative = document.getElementById('text-alternative');
const inputAlternative = document.getElementById('input-alternative');
function updateScrollAlternative() {
// Scroll not updated on blur without requestAnimationFrame
// or setTimeout:
requestAnimationFrame(() => textAlternative.scrollLeft = inputAlternative.scrollLeft);
}
inputAlternative.addEventListener('blur', updateScrollAlternative);
inputAlternative.addEventListener('change', updateScrollAlternative);
inputAlternative.addEventListener('focus', updateScrollAlternative);
inputAlternative.addEventListener('input', updateScrollAlternative);
inputAlternative.addEventListener('keydown', updateScrollAlternative);
inputAlternative.addEventListener('keyup', updateScrollAlternative);
inputAlternative.addEventListener('scroll', updateScrollAlternative);
inputAlternative.addEventListener('select', updateScrollAlternative);
body {
margin: 0;
}
.box {
position: relative;
display: block;
width: 50%;
box-sizing: border-box;
/* Moved styles here: */
border: 3px solid red;
padding: 8px;
margin: 8px auto 0;
}
#text,
#input,
#text-alternative,
#input-alternative {
display: block;
width: 100%;
font-size: 14px;
font-family: monospace;
outline: none;
}
#text,
#input {
/* Removed margin, padding and borders: */
border: 0;
padding: 0;
margin: 0;
}
#text-alternative,
#input-alternative {
width: 50%;
box-sizing: border-box;
/* Keep styles here thanks to box-sizing, but behaves differently: */
border: 3px solid blue;
padding: 8px;
margin: 8px auto 0;
}
#text,
#text-alternative {
word-wrap: break-word;
white-space: nowrap;
/* No need to keep it visible unless you want to scroll manually too: */
overflow-x: hidden;
}
<div class="box">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<label class="box">
<input id="input" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
</label>
<div id="text-alternative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<input id="input-alternative" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />

How to get height of an id-based element div with Javascript?

When hovering an element a div will be shown. I have a couple of this elements. So each div has an unique idand each it's own height. To align the div-class next to the cursor I need to know its individual height.
Here is an extraction of what I got (please note the lines that I have marked with ****):
$('.rsshover').mouseleave(function() {
var id = $(this).attr('id').replace("did_", "");
$("#pre_"+id).hide();
});
// cache the selector
var follower = $(".preview");
var IDHeight = ****???****
var xp = 0, yp = 0;
var loop = setInterval(function(){
xp += (mouseX + 15 - xp) / 12;
yp += (mouseY - ****IDHeight**** - yp) / 12;
follower.css({left:xp, top:yp});
}, 0);
So what I would like to archieve can be seen in that fiddle and when entering a value for a specific height like yp += (mouseY - 200 - yp) / 12;.
The aelements are placed on the bottom of the page. So the hidden divs need to grow upwards what means that the starting reference-point of the div should be the left-bottom-edge and instead building it up downwards it needs to grow upwards.
So I have no clue how to solve this. Would appreciate if there is someone who could help me out. Thanks in advance.
Here is what it should look like and what I want to achieve. I needed to enter two different heights manually by hand in that line yp += (mouseY - **HEIGHTVALUE** - yp) / 12;

Since you're already using jquery, you can get height of any div by $('#someid').height();

The below example provides the functionality you seek.
var mouseX = 0, mouseY = 0, limitX = 320, limitY = 15;
$('.alink').mousemove(function(e){
var id = $(this).attr('id').replace("id_", "");
// get the current hidden div selector
var follower = $("#div_to_id_"+id);
follower.show();
// change 12 to alter damping higher is slower
follower.animate({
left: e.pageX,
top: e.pageY-(follower.height()+30),
height: "auto"
}, 10, function() {
});
});
$('.alink').mouseleave(function() {
$(".hiddendivs").hide();
});
a {
display: inline-block;
width:320px;
height:15px;
position:relative;
margin-top: 150px;
background-color: red;
}
.hiddendivs {
background: green;
color: #fff;
width: 310px;
padding: 15px;
position:fixed;
z-index: 1;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="alink" id="id_1">
<div class="hiddendivs" id="div_to_id_1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temp...</p>
</div>
</a>
<a href="#" class="alink" id="id_2">
<div class="hiddendivs" id="div_to_id_2">
<p>some other content...</p>
</div>
</a>
Updated Fiddle

Dynamically resizing a container containing a Handsontable

This is the HTML I got:
<div class="preview-content">
<h1 class="preview-content-header">Vorschau - Notiz1.txt <img src="icons/cross.png" /></h2>
<div>
<h2>Notiz1.txt</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<img id="preview-toggle" src="icons/preview.png">
<div class="main-content">
<h2 class="main-content-header">Datenbank</h2>
<div id="table">
</div>
</div>
This is the corresponding CSS:
/* General Style */
html, body {
margin: 0px;
padding: 0px;
background: $background-color;
font-family: $font;
overflow-x: hidden;
}
/* Main Content */
div.main-content {
padding: 50px 0px 20px 70px;
width: 45%;
overflow: auto;
h2.main-content-header {
margin: 0;
}
}
#preview-toggle {
display: none ;
position: fixed;
z-index: 3;
top: 50px;
right: 0;
width: 40px;
height: 40px;
padding: 5px;
background-color: $nav-color;
color: $font-color-secondary;
cursor: pointer;
transition: .3s background-color;
-webkit-transition: .3s background-color;
}
#preview-toggle:hover {
background-color: $main-color;
}
/* Preview */
div.preview-content {
position: fixed;
z-index: 3;
right: 0px;
margin: 0;
width: 50%;
height: 100%;
font-size: 70%;
img {
float: right;
height: 25px;
padding: 0px 15px 0px 0px;
cursor: pointer;
}
h1 {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
padding: 5px 5px 5px 10px;
background-color: $preview-header-color;
color: $font-color-secondary;
white-space: nowrap;
}
div {
position: fixed;
z-index: 3;
height: 100%;
margin: 0;
padding: 10px;
background-color: $data-background-color;
overflow-y: auto;
overflow-x: hidden;
white-space: pre-line;
word-wrap: break-word;
}
}
/* Database table */
#table {
z-index: 1;
}
Here is the animation to toggle the preview container on/off:
$(document).ready(function() {
$(' .preview-content-header img').click(function() {
$('.main-content').animate({
width: "100%"
});
$('.preview-content').animate({
width: "0%"
}, 300, function() {
$('#preview-toggle').toggle();
});
$('.preview-content img').toggle();
});
$('#preview-toggle').click(function() {
$('.main-content').animate({
width: "45%"
});
$('#preview-toggle').toggle();
$('.preview-content').animate({
width: "50%"
}, 300, function() {
$('.preview-content img').toggle();
});
});
});
Here is the code for the Handsontable:
$(document).ready(function() {
var data = [
["Dateiname", "Benutzer", "Erstelldatum", "Änderungsdatum", "Erste Zeile", "Kategorie", "Projekt"],
["Rechnung1.doc", "SB", "01.01.2010", "-", "Internetrechnung", "Rechnungen", "Haushalt"],
["Rechnung2.doc", "SB", "01.01.2012", "-", "Stromrechnung", "Rechnungen", "Haushalt"]
];
var container = $('#table');
container.handsontable({
data: data,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
});
The scenario is as follows:
I've got a .main-content which takes up the whole window containing a Handsontable and a .preview-content which expands it width and shows content as soon as you click on the toggle button within the .main-content. The .preview-content is fixed and doesn't scroll with the .main-content.
The problem is that when the screen displaying the website is not big enough the .preview-content will cover parts of the Handsontable within the .main-content.
To prevent this from happening I wanted to change the width and height of the container containing the Handsontable dynamically so that I get scrollbars in case the table gets covered in parts.
I've tried many things so far but nothing seems to work. And it seems like Handsontable only likes absolute pixel dimensions for its width and height, otherwise overflow: hidden doesn't seem to work.
I've tried to change the width of the .main-content from 100% to 45% and added overflow: auto to the .main-content as you can see in the code, but that doesn't work as it behaves very strange.
Maybe someone has any idea how I can change the width of a Handsontable dynamically?
Your help is very appreciated. And if you need any more info to help me just say it I will see if I can provide the right info.

To dynamically change the width of a Handsontable instance you can do:
hotInstance.updateSettings({
width: newWidth
});
Give that a try as this should take care of the CSS pitfalls of manually setting the .main-content width yourself.

Using the HandsonTable.updateSettings() and jQuery to dynamically resize the table whenever the window is resized:
$(document).ready(function(){
$(window).resize(function(){
hotInstance.updateSettings({
width: $('hotWrapperDiv').width()
});
});
});

you can use resize event of Handsontable, and in calculateSize function write code to calculate height and width
Handsontable.Dom.addEvent(window, 'resize', calculateSize);