I looked at some articles on the internet but I couldn't find what I wanted. After the site loads for the first time, when I scroll and scroll to a paragraph, I want the text to scroll from the bottom and come after 1 second.Like on this site:https://www.armoli.com/.
For example I want to apply it here
<h6 style="margin-right: 70px;" class="section-title text-center">Our Solutions</h6>
<h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>
<div class="solutionout1">
<img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="web development logo" >
<div ><p class="solutionhead">Web Development</p><p class="solutiontext">
We offer fast, profitable, safe and effective solutions in the light of the latest innovations to those who entrust us with their companies' showcases in the internet world.</p></div>
</div>
HTML, CSS, and JavaScript scroll reveal animations
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i = 0; i < reveals.length; i++){
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
else{
reveals[i].classList.remove('active');
}
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #1D212B;
}
section{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #fff;
}
section:nth-child(2){
color: #1D212B;
background: #fff;
}
section:nth-child(3){
color: #fff;
}
section:nth-child(4){
color: #1D212B;
background: #fff;
}
section .container{
margin: 100px;
}
section h1{
font-size: 60px;
}
section h2{
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .cards{
display: flex;
}
section .cards .text-card{
background: #2696E9;
margin: 20px;
padding: 20px;
}
section .cards .text-card h3{
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px){
section h1{
font-size: 40px;
}
section .cards{
flex-direction: column;
}
}
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal.active{
transform: translateY(0px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Reveal</title>
</head>
<body>
<section>
<h1>Reveal Elements On Scroll</h1>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
</body>
</html>
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let elem = entry.target;
if (entry.intersectionRatio >= 0.75) {
elem.classList.add("animate");
}
}
});
};
const Animateditems = document.querySelectorAll("div.text");
let options = {
threshold: 1.0,
};
let observer = new IntersectionObserver(intersectionCallback, options);
Animateditems.forEach((item) => {
observer.observe(item);
});
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
html {
font-size: 66.6%;
}
.scrolldown {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 3rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 2rem;
}
.flex-container > div {
flex: 1 1 100%;
border: 0.1rem solid black;
padding: 2rem;
margin: 2rem;
}
.flex-container > div.animate p {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div.animate h2 {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div h2 {
font-size: 2.5rem;
opacity: 0;
transform: translateY(0rem);
}
.flex-container > div p {
font-size: 1.8rem;
opacity: 0;
}
#media screen and (min-width: 650px) {
.flex-container > div {
flex: 1 1 40%;
border: 0.1rem solid black;
}
}
#keyframes fadeIn {
from {
transform: translateY(2rem);
opacity: 0;
}
to {
transform: translateY(0rem);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>animation</title>
</head>
<body>
<div class="scrolldown"><h1>scroll down</h1></div>
<div class="flex-container">
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Here is a complete vanilla solution. (open it in full screen mode)
Related
So I made an accordion for FAQs for a website I am working on. Every time I click on a link(question) a content (answer) should show up.
Everything work as expected other than once I click on the link and when the content shows up the whole page scrolls up which makes it very annoying.
.FAQ {
width: 100%;
height: 80vh;
background-color: var(--main);
display: flex;
align-items: center;
justify-content: center;
}
.container3-5 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.accordion-item {
background-color: #283042;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
box-shadow: 5px 2px 5px rgba(0, 0, 0, .1);
}
.accordion-link {
font-size: 25px;
color: rgba(255, 255, 255, .8);
text-decoration: none;
background-color: #283042;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.accordion-link ion-icon {
color: #e7d5ff;
padding: 5px;
}
.accordion-link .down {
display: none
}
.answer {
max-height: 0;
overflow: hidden;
position: relative;
background-color: #212838;
transition: max-height 650ms;
}
.answer::before {
content: "";
position: absolute;
width: 6px;
height: 90%;
background-color: #8fc460;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.answer p {
color: rgba(255, 255, 255, .6);
font-size: 20px;
padding: 20px;
}
.accordion-item:target .answer {
max-height: 200px;
}
.accordion-item:target .up {
display: none;
}
.accordion-item:target .down {
display: block;
}
<div class="FAQ">
<div class="container3-5">
<h1>FAQs</h1>
<div class="accordion">
<div class="accordion-item" id="qestion1">
<a class="accordion-link" href="#qestion1">
Question 1....?
<ion-icon class="up" name="arrow-forward-outline"></ion-icon>
<ion-icon class="down" name="arrow-down-outline"></ion-icon>
</a>
<div class="answer">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium fugiat dolore esse. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium
fugiat dolore esse.
</p>
</div>
</div>
<div class="accordion-item" id="qestion2">
<a class="accordion-link" href="#qestion2">
Question 1....?
<ion-icon class="up" name="arrow-forward-outline"></ion-icon>
<ion-icon class="down" name="arrow-down-outline"></ion-icon>
</a>
<div class="answer">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium fugiat dolore esse. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium
fugiat dolore esse.
</p>
</div>
</div>
<div class="accordion-item" id="qestion3">
<a class="accordion-link" href="#qestion3">
Question 1....?
<ion-icon class="up" name="arrow-forward-outline"></ion-icon>
<ion-icon class="down" name="arrow-down-outline"></ion-icon>
</a>
<div class="answer">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium fugiat dolore esse. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium
fugiat dolore esse.
</p>
</div>
</div>
<div class="accordion-item" id="qestion4">
<a class="accordion-link" href="#qestion4">
Question 1....?
<ion-icon class="up" name="arrow-forward-outline"></ion-icon>
<ion-icon class="down" name="arrow-down-outline"></ion-icon>
</a>
<div class="answer">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium fugiat dolore esse. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium
fugiat dolore esse.
</p>
</div>
</div>
<div class="accordion-item" id="qestion5">
<a class="accordion-link" href="#qestion5">
Question 1....?
<ion-icon class="up" name="arrow-forward-outline"></ion-icon>
<ion-icon class="down" name="arrow-down-outline"></ion-icon>
</a>
<div class="answer">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium fugiat dolore esse. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, facilis iure! At autem quasi exercitationem laudantium
fugiat dolore esse.
</p>
</div>
</div>
</div>
</div>
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>
My code seems fine (or maybe it's not), when I try it on online platforms it seems to work but it doesn't work when I run it locally. For example, when I put in the exact code in w3school's try it in editor there seems to be no problem.
This is the javascript file I'm using:
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
When I tried looking online I keep getting answers saying that you need a jquery file which I'm sure I have.
Help is very much appreciated.
Edit: Earlier on in my code I used "content2" instead of "content". That was a mistake, I was just messing around with my code and forgot to change it back. It still doesn't work with "content".
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
EDIT: As the problem seems to lie with code on my side that i have not shown here, i will list my .html code here. I am only using a html and css file, and my entire css file has been shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="css/index_styles2.css">
</head>
<body>
<div class="prtbox">
<img src="graphics/tmp/ca.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/logob.eps" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
</html>
Try placing your script toward the bottom of your HTML document, at least after the elements it uses. It's probably running before the DOM has finished loading so the elements haven't been created yet causing it to throw an error.
As already pointed out, jquery is not required over here. The other issue is, this code will not work in online editors also, as the element content2, whose height you are trying to access is not defined. Changing it to the following will also work for you -
content.style.maxHeight = content.scrollHeight + "px";
Try as below:
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
I have try below code in local system and its working fine. Check it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.partnerimg {
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox {
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
</body>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
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 am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.
I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.
I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.
I'm a JS beginner, apologies.
HTML
<div class="fluid-container grey-bg">
<div class="container">
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
</div>
</div>
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam
</div>
</div>
</div>
</div>
CSS
.card-default {
background-color: #fff;
border-radius: 10px;
color: #333333;
min-height: 100px;
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 20px 0px;
text-align: center;
margin-bottom: 20px;
display: block;
float: left;
position: relative;
width: 100%;
}
.card-default.width-25 {
width: 23%;
margin-left: 0px;
margin-right: 0px;
padding: 20px 20px;
}
JS
function cardEqualHeight() {
var maxHeight = -1;
$('.items').each(function() {
maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
});
$('.items .content').each(function() {
$(this).height(maxHeight);
});
}
cardEqualHeight();
https://jsfiddle.net/k3lh4m/7wmfox9m/
Add this to the containter class and don't use your JS function and there you go!
.container {
display: flex;
flex-wrap: wrap;
}
jsfiddle