Develop Reference

Only show elements if container is scrollable

This is the code:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").scroll(function() {
if ($(this).scrollLeft() > 0) {
$(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(".right").css("display", "block");
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. 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>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
There should be an if function added. The logic should be:
Show the gradient(s) only if there is something to scroll horizontally. If not, then hide the gradient(s). It should work with different containers independently on the same web page, and should update if the browser size changes.
Has someone an idea how to code that?

One way would be to loop thru all the .scroll-area elements and hide .left and .right elements if the scrollbar is visible. I added couple more containers to demonstrate:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").each(function(index) {
if ($(this)[0].scrollWidth <= $(this)[0].clientWidth) {
$(this).closest(".container").find(".left").css("display", "none");
$(this).closest(".container").find(".right").css("display", "none");
} else {
$(this).scroll(function() {
if ($(this)[0].scrollWidth > $(this)[0].clientWidth) {
if ($(this).scrollLeft() > 0) {
$(this).closest(".container").find(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(this).closest(".container").find(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(this).closest(".container").find(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(this).closest(".container").find(".right").css("display", "block");
}
}
});
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. 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>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. 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>

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." />

Image Slider Javascript won't work

I'm currently working on an image slider for my company's new homepage and just can't figure out the error that seems to lie in the javascript part ..
The slider contains 4 images and should, as soon as the last image is reached, begin at the first image again. The problem is that the images are displayed in that order "1-2-1-2-3-4-1-2-3-4..."
Here the code:
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
$('#next').on('click', nextSlide);
$('#prev').on('click', prevSlide);
// Auto slider
if (options.autoswitch === true) {
setInterval(nextSlide, options.autoswitch_speed);
}
function nextSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.prevActive').next().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
function prevSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.prevActive').prev().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
});
and the corresponding CSS:
#slider-container {
height: 600px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
position: relative;
width: 800px;
}
#sldier {
height: 100%;
width: 100%;
}
#slider .slide img {
height: 100%;
width: auto;
}
#prev, #next {
cursor: pointer;
max-width: 30px;
opacity: 1;
position: absolute;
top: 8%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
z-index: 999;
}
#prev { left: 12px; }
#next { right: 3px; }
#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }
.slide {
position: absolute;
width: 100%;
}
.slide-copy {
background: #777;
background: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
padding: 20px;
position: absolute;
}
#media (min-width: 600px) {
#prev, #next {
top: 45%;
}
}
and the HTML
<div id="slider-container">
<img src="img/arrowprev" id="prev" alt="prev">
<ul id="slider">
<li class="slide">
<div class="slide-copy">
<h2>Placeholder</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
</ul>
<img src="img/arrownext" id="next" alt="next">
</div>
Maybe it has something to do with
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
I just can't figure out the problem and would appreciate any help.
Thank you in advance :)
This is the page I took as source:
https://www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html

I found the fail, the unique thing it wasn't working, is the apply of visibility on each prevActive and active elements on each next/prev actions, so I've added this lines to both functions:
$('.prevActive').hide();
$('.active').show();
(Also I've commented the lines referencing to options variable, as is not defined in the description).
You can see the fiddle working here:
https://jsfiddle.net/a4bssrf5/8/

(Circular) (PowerPoint like) transitions between two div's

I have been searching for hours now. Animate.css seems to be pretty good but it only contains some basic animations like moves and scales. But i need something more difficult.
I would like to create a transition between two div elements. The first div is in the foreground and the second behind it. I would like to achieve some PowerPoint-Like transitions between them. I've posted an example Transition I would like to achieve.

I don't see a way to split or transform a div with text inside in the way shown. But I come up with a similar transition that could give some hints or might be even satisfactory.
How it works
I use an overlay composed of eight triangles. These triangles can be designed in CSS like this:
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 150px solid darkgreen;
border-right: 150px solid transparent;
}
And then arranged like this:
The triangles will appear one after the other to hide the first slide. Then they will disappear in a second turn one after the other to reveal the second slide (two turns is what's different from the OP's transition!). You can use this overlay then again when changing to the third slide or use another one, maybe with other colors for the triangles.
Result
You can check it out and play around in the JSFiddle.
$('#next-slide').click(function() {
var triangles = $('#overlay1 div');
showTriangles(triangles).done(function() {
setTimeout(function() {
$('#slide1').hide();
hideTriangles(triangles);
}, 200);
});
});
function showTriangles(triangles) {
var promises = [];
$(triangles).each(function(i) {
var def = new $.Deferred();
setTimeout(function() {
$(triangles[i]).css('opacity', '1');
def.resolve();
}, 200 * i);
promises.push(def);
})
return $.when.apply(undefined, promises).promise();
}
function hideTriangles(triangles) {
$(triangles).each(function(i) {
setTimeout(function() {
$(triangles[i]).css('opacity', '0');
}, 200 * i);
});
}
#next-slide {
margin-left: 350px;
}
.slide {
position: relative;
background: white;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.slide,
.overlay {
position: absolute;
width: 300px;
height: 300px;
}
#slide1 {
z-index: 2;
}
#slide2 {
z-index: 1;
}
#overlay1 {
z-index: 100;
}
.triangle {
position: absolute;
opacity: 0;
}
.triangle1 {
left: 150px;
}
.triangle2 {
left: 150px;
}
.triangle3 {
left: 150px;
top: 150px;
}
.triangle4 {
top: 150px;
left: 150px;
}
.triangle5 {
top: 150px;
}
.triangle6 {
top: 150px;
}
.triangle-up-right {
width: 0;
height: 0;
border-top: 150px solid white;
border-left: 150px solid transparent;
}
.triangle-up-left {
width: 0;
height: 0;
border-top: 150px solid white;
border-right: 150px solid transparent;
}
.triangle-down-right {
width: 0;
height: 0;
border-bottom: 150px solid white;
border-left: 150px solid transparent;
}
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 150px solid white;
border-right: 150px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide1" class="slide">
Slide 1.
<br>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over
to your dumb ass.
</div>
<div id="overlay1" class="overlay">
<div class="triangle triangle1 triangle-up-left"></div>
<div class="triangle triangle2 triangle-down-right"></div>
<div class="triangle triangle3 triangle-up-right"></div>
<div class="triangle triangle4 triangle-down-left"></div>
<div class="triangle triangle5 triangle-down-right"></div>
<div class="triangle triangle6 triangle-up-left"></div>
<div class="triangle triangle7 triangle-down-left"></div>
<div class="triangle triangle8 triangle-up-right"></div>
</div>
<div id="slide2" class="slide">
Slide 2.
<br>Some wonderful lorem ipsum text. Did you know dolor sit amet? 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.
</div>
<button id="next-slide">Next slide</button>

Try Magic Animations, https://www.minimamente.com/example/magic_animations/. They offer quite a few different animations and transitions.

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);