I've 4 boxes of text like in this example here:
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1"><div>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</div></div>
<div class="box box2"><div>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</div></div>
<div class="box box3"><div>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</div></div>
<div class="box box4"><div>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</div></div>
</div>
What I want to do now is that when I start selecting text inside box one, I want to only allow the selection of every text inside this box including child elements but not outside of it.
So with other words, selecting text inside a box should only work if the selection started inside it and should not go out of the box.
Is this possible? If yes, whats the best way to deal with this?
Update
I've posted a minimal example above. The problem is that I can't get it working on my page so I've took some time to build a 1:1 example:
#wrapper {
margin-top: 15px;
margin-bottom: 15px;
padding-top: 20px;
padding-bottom: 20px;
max-height: 200px;
border: 1px solid;
overflow-y: scroll;
outline: 0;
user-select: none;
background: lightgray;
}
#wrapper:active,
#wrapper:focus {
user-select: initial;
color: red; //For debugging
}
#wrapper .message {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 12px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#wrapper .message .content {
background: #ffffff;
}
#wrapper .message .content-header {
margin-bottom: 2px;
}
#wrapper .message .content-header,
#wrapper .message .content-footer {
user-select: none; //Should be always not selectable
}
<div id="outer">
<div>I should not get marked when marking started inside the wrapper.</div>
<div id="wrapper" tabindex="-1">
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
</div>
<div>I should not get marked when marking started inside the wrapper.</div>
</div>
You can use user-select: none; and disable it on focus and active to be able to select only the current element.
html,
body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2>div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2>div>div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box {
margin: 20px;
padding: 15px;
outline:none;
-moz-user-select: none;
user-select: none;
}
.box:active,
.box:focus{
-moz-user-select: initial;
user-select: initial;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: purple;
}
.box4 {
background-color: grey;
}
<div class="grid2x2">
<div class="box box1" tabindex="-1">
<div>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</div>
</div>
<div class="box box2" tabindex="-1">
<div>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</div>
</div>
<div class="box box3" tabindex="-1">
<div>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</div>
</div>
<div class="box box4" tabindex="-1">
<div>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</div>
</div>
</div>
You could try using the combination of the contentEditable attribute and stopping the user from editing with keyboard events.
var elements = document.getElementsByClassName('box');
for (var i = 0, iLen = elements.length; i < iLen; i++) {
elements[i].addEventListener('keydown', function (e) {
e.preventDefault();
});
}
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box2" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box3" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box4" contenteditable spellcheck="false"><div>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</div></div>
</div>
Related
I have a module where 3 cards stack on top of each other and then, on scroll, the cards will unstack one by one. See GIF of desired effect here.
I have tried to emulate the above effect using GSAP and ScrollTrigger, however, my animation is yielding undesirable results.
Here is my code so fare, to be viewed on +1200px screens:
$(function() {
gsap.registerPlugin(ScrollTrigger);
const container = document.querySelector(".cardStacking__cards");
const card = document.querySelector(".stackCard");
const cards = document.querySelectorAll(".stackCard");
const height = 510;
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".cardStacking__cards",
pin: true,
markers: true,
scrub: 1,
start: "bottom-=10% center",
end: "bottom top"
}
});
timeline.from(".stackCard", {
y: (index) => height * (cards.length - (index + 1)),
duration: (index) => 0.6 / (index + 1),
ease: "none",
stagger: (index) => 0.3 * (index),
});
});
:root {
--navy: #0E185F;
--white: #FFFFFF;
}
.background--navy {
background-color: var(--navy);
}
.color--white {
color: var(--white);
}
.spacer {
height: 2000px;
}
.cardStacking {
padding: 120px 0 141px 0;
/*********/
}
.cardStacking__intro {
margin-bottom: 100px;
}
.cardStacking .stackCard {
border-radius: 40px;
background: linear-gradient(90deg, #c7defe 0%, #e7e7f2 100%);
margin-bottom: 50px;
padding: 106px 135px 126px 77px;
/* CONTENT */
}
.cardStacking .stackCard:first-child {
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
}
.cardStacking .stackCard__content-header {
margin-bottom: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="spacer"></div>
<section class="cardStacking background--navy">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-7">
<div class="cardStacking__intro text-center">
<h2 class="cardStacking__intro-header color--white">LOREM IPSUM DOLOR SIT AMET CONSETETUR SADIPSCING</h2>
<div class="cardStacking__intro-copy color--white">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<div class="cardStacking__cards">
<!------------>
<!-- CARD 1 -->
<!------------>
<div class="stackCard" style="z-index: 0;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
<!------------>
<!-- CARD 2 -->
<!------------>
<div class="stackCard" style="z-index: -1;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 2</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
<!------------>
<!-- CARD 3 -->
<!------------>
<div class="stackCard" style="z-index: -2;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 3</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="spacer"></div>
Issue(s)
From the demo you can see that, as soon as the "scroller start" indicator scrolls to and past the "start" indicator, the cards disappear. Upon inspecting the code, for some reason, when the indicators pass, cardStacking__cards has a top value of top: -1334.52px, which I'm unsure why.
The section does not pin when the cards are in view. I'm trying to pin the section until all cards are revealed, and then unpin.
You can do it as below. I created a simplified version of the code you pasted to showcase the feature. Here is a codepen of it as well.
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".cards",
pin: true,
start: "top 10%",
end: "bottom+=1000 bottom",
scrub: true
}
});
tl.to(".first", {
y: "-90vh"
}).to(
".second",
{
y: "-85vh"
},
"-=0.15"
);
body {
text-align: center;
}
.cards {
position: relative;
height: 85vh;
}
.card {
border-radius: 2rem;
position: absolute;
inset: 0;
}
.first {
background: lightblue;
bottom: 10vh;
}
.second {
background: lightgreen;
bottom: 5vh;
}
.third {
background: lightgray;
}
<script src="https://unpkg.com/gsap#3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<div class="cards">
<div class="card third"></div>
<div class="card second"></div>
<div class="card first"></div>
</div>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
Please take a look at working example https://jsfiddle.net/23dz0evy/4/. By modifying const bottom = 40 bottom margin between panels can be changed, works with infinite number of panels.
I'm trying to implement Read More button with animation. Animation working fine after the first click but on the first click, it seems that the animation method doesn't come into consideration.
JSFiddle link for the below code.
Here is my code:
var text = $('.content')
const originalHeight = text.height();
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
var fullHeight = text[0].scrollHeight;
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.addClass('showContent').removeClass('hideContent');
text.animate({
'height': fullHeight
});
} else {
linkText = "Show more";
$content.addClass('hideContent').removeClass('showContent');
text.animate({
'height': originalHeight
});
};
$this.text(linkText);
});
div.text-container {
margin: 0 auto;
width: 75%;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.content {
text-align: justify;
}
.show-more {
text-align: center;
display: inline;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
<div class="content hideContent">
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.
</div>
<div class="show-more">
Show more
</div>
</div>
try this:
var text = $('.content')
const originalHeight = text.height();
//======================
//add this line
text.css("height",originalHeight );
//======================
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
var fullHeight = text[0].scrollHeight;
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.addClass('showContent').removeClass('hideContent');
text.animate({
'height': fullHeight
});
} else {
linkText = "Show more";
$content.addClass('hideContent').removeClass('showContent');
text.animate({
'height': originalHeight
});
};
$this.text(linkText);
});
div.text-container {
margin: 0 auto;
width: 75%;
transition: all 0.15s ease-out;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.content {
text-align: justify;
}
.show-more {
text-align: center;
display: inline;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
<div class="content hideContent">
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.
</div>
<div class="show-more">
Show more
</div>
</div>
Javascript === is a case sensitive comparison. Your code is if (linkText === "SHOW MORE") where your main text is Show more. Thats all.
i need a toggle-tab-section with a vertical tab-menu.
I started with the base script of w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
and customized and improved it.
Now i have the problem, that i need this toggle-section multiple times on one site. So i created a parent div around the section with an unique id.
For the script now i need to get only the elements in this parent, so i tried to call them with the parent instead of "document" but this wont work for me.
function toggleTabs(evt, tabID, itemID) {
var i, tabcontent, tablinks, wrapper;
wrapper = document.getElementById('item' + itemID);
tabcontent = wrapper.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = wrapper.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
wrapper.getElementById(tabID).style.display = "block";
evt.currentTarget.className += " active";
}
Single tabsection (working) https://jsfiddle.net/029mua5h/
Multiple tabsection (not working) https://jsfiddle.net/029mua5h/1/
wrapper.getElementById(tabID).style.display = "block"; does not work. This is because .getElementById is not a prototype of a single element. Since id's are meant to be unique, it does not make sense to look for an id inside an element, because we know that there can only be one element with a spesific id. therefore we have to use the proper
document.getElementById(tabID).style.display = "block";
function toggleTabs(evt, tabID, itemID) {
var i, tabcontent, tablinks, wrapper;
wrapper = document.getElementById('item' + itemID);
tabcontent = wrapper.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = wrapper.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabID).style.display = "block";
evt.currentTarget.className += " active";
}
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
.tabwrapper {
display: flex;
flex-direction: row;
}
/* Style the tab */
.tablinks {
display: flex;
border: 1px solid #ccc;
border-right:0;
background-color: #f1f1f1;
width: 30%;
flex-direction: column;
}
/* Style the buttons inside the tab */
.tablinks button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
display: flex;
text-align: left;
}
/* Change background color of buttons on hover */
.tablinks button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tablinks button.active {
background-color: #fff;
border-right: 0;
}
/* Style the tab content */
.tabcontent {
flex-grow: 1;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: 0;
display: none;
}
.tabcontent.active{
display:block;
}
<div id="item100" class="tabwrapper">
<div class="tablinks">
<button class="tablinks active" onclick="toggleTabs(event, 'tab-item111', '100')">London</button>
<button class="tablinks" onclick="toggleTabs(event, 'tab-item112', '100')">Paris</button>
<button class="tablinks" onclick="toggleTabs(event, 'tab-item113', '100')">Tokyo</button>
</div>
<div id="tab-item111" class="tabcontent active">
<h3>London</h3>
<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.</p>
</div>
<div id="tab-item112" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="tab-item113" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<br />
<!-- ############################################### -->
<br />
<div id="item200" class="tabwrapper">
<div class="tablinks">
<button class="tablinks active" onclick="toggleTabs(event, 'tab-item222', '200')">London</button>
<button class="tablinks" onclick="toggleTabs(event, 'tab-item223', '200')">Paris</button>
<button class="tablinks" onclick="toggleTabs(event, 'tab-item224', '200')">Tokyo</button>
</div>
<div id="tab-item222" class="tabcontent active">
<h3>London</h3>
<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.</p>
</div>
<div id="tab-item223" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="tab-item224" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
When trying to make my slick slider responsive I get a problem with a whitespace between my content/sliding element and dots that I can't remove. When viewing the page on full screen (non responsive view), the dots are gone (I know why, and that's good), the whitespace is gone, but my arrows are in my content. Here is an image (N & O are the arrows, css is temporary missing):
whitespace problem:
arrows problem:
HTML CODE:
<section class="o-container u-mt-x2 u-bgcolor-white">
<div class="o-grid">
<div class="o-grid__col u-12/12">
<section class="o-container u-mt-x12">
<div class="c-card u-mb-x0">
<div class="o-container">
<div class="o-grid">
<div class="o-grid__col u-12/12 u-12/12#lg u-mb-x6 u-text-center"><h2
class=" u-text-center u-color-blue">Weitere Funktionen fur Anbieter</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod.</p>
</div>
</div>
</div>
<div class="o-grid__col u-12/12 u-mb-x6 o-grid--equal-height">
<div class="c-funcslider slick-slider">
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
</div>
</div>
<div class="o-container">
<div class="o-grid__col u-12/12 u-12/12#lg u-text-center "><p
class="p-mini text-center">
* 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.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
CSS:
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
max-width: fixed;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
JS:
if ($('.c-funcslider').length > 0) {
$('.c-funcslider').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
}
I would say I need to edit it in my css or html but already tried a lot of things in those 2 files..
Thanks in advance!
I have a quite complex div layout.
It works on Safari and Firefox without any problem:
But opening the page on chrome gives me the following result:
So the whole screen is divided into two big divs that are placed vertically. The one at the top with the orange dots and the other one at the bottom with the colorful divs inside.
When I add too much text to the pink div the layout starts expanding itself.
The interesting thing is that the div is gets more text than it could show and it really works because of
overflow: hidden;
But starting at a quite high number of lines the div starts expanding itself for some reason
I was trying to reproduce the issue in fiddle.
But I am not able to.
What else could I try to find the problem?
Or does anyone see the mistake I did?
The code I give is for the half at the bottom were the problem probably is.
HTML:
<div class="ThirdSectionTextArea">
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
<div class="Row Row1 uppercase">
<div class="cell cell1">
SOME HEADERTEXT
</div>
<div class="cell cell2">
SOME HEADERTEXT
</div>
<div class="cell cell3">
SOME HEADERTEXT
</div>
</div>
<div class="Row Row2">
<div class="cell cell1">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
<div class="cell cell2">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
<div class="cell cell3">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
</div>
<div class="Row Row3">
<div class="cell cell1">
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.
</div>
<div class="cell cell2">
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.
</div>
<div class="cell cell3">
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.
</div>
</div>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
</div>
</div>
<div class="ThirdSectionBottomLayout">
<table class="layoutTable"><tr><td class="centerDiv">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="ThirdSectionBottomArrow">
</td></tr></table>
</div>
CSS:
.ThirdSectionTextArea {
width:250px;;
height:180px;
background-color: aqua;
}
.ThirdSectionBottomLayout {
width:100%;
height:15%;
background-color: chartreuse;
position:relative;
}
.ThirdSectionBottomArrow {
top:-0%;
height:100%;
width:5%;
object-fit:scale-down;
position: absolute;
}
.ThirdSectionTextAreaCell {
float:left;
overflow: hidden;
text-align: left !important;
height:100%;
}
.ThirdSectionTextAreaCell1{
background-color: aqua;
width: 20%;
}
.ThirdSectionTextAreaCell2{
background-color: fuchsia;
width: 60%;
}
.ThirdSectionTextAreaCell3{
background-color: darkorchid;
width: 20%;
}
.ThirdSectionTextAreaCell2 .Row {
width:100%;
}
.ThirdSectionTextAreaCell2 .Row1 {
background-color: burlywood;
height:20%;
}
.ThirdSectionTextAreaCell2 .Row1 .cell{
width:33.33%;
height:100%;
float:left;
overflow: scroll;
background-color: burlywood;
}
.ThirdSectionTextAreaCell2 .Row2 {
background-color: deepskyblue;
height: 3%;
}
.ThirdSectionTextAreaCell2 .Row2 .cell{
width:33.33%;
height:100%;
float:left;
overflow: scroll;
}
.ThirdSectionTextAreaCell2 .Row3 {
background-color: deeppink;
height:77%;
}
.ThirdSectionTextAreaCell2 .Row3 .cell{
width:33.33%;
height:100%;
float:left;
overflow: hidden;
}