What I want to do is: when I click on one of the buttons, the paragraph area shows (as it is now). However, I want the next button / div (and the rest of the page below it) to move downwards. To get it simple: when I click on the button, the box shows, while moving the rest of the buttons downwards, so the paragraph area doesn't overlap the others.
I'm sorry for the bad English...
I hope you guys understand what I mean.
( Btw I don't want a frameworks or Jquery, just plain languages ;) )
I have got the following code:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
margin-bottom: 200px;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
So your problem was you were using position : absolute; on your dropdown-content class, because it has an absolute position it means that the element will take its position regardless of any other elements, which is why your other elements didn't move.
To fix this I changed it to position: relative; so other elements will take it's position into account.
I also removed margin-bottom: 200px; in the show class as this was leaving large gaps between each if your elements.
Here is the edited code in a snippet:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: relative;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
Related
As you can see in the image, when I open one accordion, the accordion beside it opens as well. I think its the CSS that's causing the issue, but I'm not sure I expected the accordion to open by itself, not with the accordion beside it, it seems as if the JavaScript is controlling the max height of the accordion beside it too.
Here is the code:
const accordionItemHeaders =
document.querySelectorAll(".accordion-header");
accordionItemHeaders.forEach((accordionItemHeader) => {
accordionItemHeader.addEventListener("click", (event) => {
accordionItemHeader.classList.toggle("active");
//animation
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight =
accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
}
.accordion-card {
background-color: rgba(182, 210, 253, 0.041);
border-radius: 10px;
width: 30vw;
max-width: 385px;
min-width: 350px;
border: 1px solid rgba(153, 196, 239, 0.121);
position: relative;
}
.accordion-header {
color: rgba(255, 255, 255, 0.841);
font-weight: 600;
font-size: 1.25rem;
padding: 1rem 1.5rem 0.8rem 1.3rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-body-content {
color: rgba(255, 255, 255, 0.658);
font-weight: 400;
font-size: 1.1rem;
padding: 0.8rem 1rem 0.8rem 1.3rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, rgba(153, 196, 239, 0.053), rgba(153, 196, 239, 0.201), rgba(153, 196, 239, 0.053)) 1;
letter-spacing: 0.02em;
}
.accordion-header::after {
content: '\003E';
font-size: 2rem;
font-weight: 400;
position: absolute;
right: 1rem;
transition: ease-in 0.3s;
}
.accordion-header.active::after {
transform: rotate(90deg);
transition: ease-in 0.3s;
}
<div class="accordion-wrapper">
<div class="accordion-card">
<div class="accordion-header">Card 1</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos aliquid sint voluptatum deserunt alias iusto excepturi pariatur odio
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 2</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 3</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 4</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 5</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 6</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
</div>
This is caused because display: flex uses align-items: stretch as default value which causes other elements in the row to fill whenever any enlarges the parent they all are contained in. Please set it to flex-start which will prevent this from happening, like this:
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
align-items: flex-start;
}
I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!
The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.
I'm sorry maybe the title make you confused, but it exactly what the title said I want to make a testimony card using table as based but I almost finish it but i can't do the final touch for it, let say I have a pointer so when I click the pointer the card will swipe to the next card but it seems I'm confused as how to implement it using javascript. I get a hunch that I can use array of child for it and move in based on the index but the card testimony still won't move
I read some topic, but the near to what I want is answer in here: Scroll smoothly by 100px horizontally
but I confused as how to implement it.
this is my code:
var slideIndex = 1;
showSlides(slideIndex);
// Thumbnail image controls
function currentTestimony(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider-item");
var pointers = document.getElementsByClassName("pointer");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
// for (i = 0; i < slides.length; i++) {
// slides[i].getElementsById('testimony-3').scrollIntoView()
// }
for (i = 0; i < pointers.length; i++) {
pointers[i].className = pointers[i].className.replace(" active", "");
}
pointers[slideIndex-1].className += " active";
}
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
scroll-behavior: smooth;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr>
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" onclick="currentTestimony(1)"></span>
<span class="pointer" onclick="currentTestimony(2)"></span>
<span class="pointer" onclick="currentTestimony(3)"></span>
<span class="pointer" onclick="currentTestimony(4)"></span>
<span class="pointer" onclick="currentTestimony(5)"></span>
</div>
</div>
</div>
I feel I'm already near the answer but I can't quite know how to solved this, can someone help me to solve this problem?
Is this It?
I have illustrated the code I've added and removed in your stylesheet. And the entire Javascript has also changed. But it's all straight forward.
var PositionPerIndex = {
"1": "0",
"2": "-20%",
"3": "-40%",
"4": "-60%",
"5": "-80%"
};
document.querySelectorAll(".pointer").forEach(
function(pointer){
pointer.addEventListener('click',
function(){
document.getElementById("content").style.left = PositionPerIndex[this.getAttribute("data-index")];
}
);
}
);
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
/* START Removed
scroll-behavior: smooth;
END
*/
/* START Added */
box-sizing: border-box;
overflow: hidden;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
/* START Removed
overflow-x: auto;
scroll-snap-type: x mandatory;
END
*/
/* START Added */
overflow: hidden;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
overflow: hidden;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
overflow: hidden;
display: flex;
flex-direction: row;
/* Added this */
width: 100%;
position: relative;
left: 0%;
transition: left .5s ease;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
/* Added this */
flex-basis: 20%;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr id="content">
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
</div>
</div>
Here is a more Universal Answer that works on a fixed size. You can just change sizing into percentage to make it work for different screen sizes.
I've worked it out on VS Code. You can just copy and paste it and run.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.main-container {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 20px;
}
table.card-space{
width: 100%;
height: auto;
min-height: 400px;
position: relative;
white-space: nowrap;
margin: 0;
padding: 0;
}
tr.card-space_container{
width: 100%;
left: 0; /* Initial Position */
position: relative;
/* Make a Smooth Left Transition */
transition: left .5s ease;
padding: 15px;
margin: 0;
padding: 0;
}
td.card{
box-sizing: border-box;
margin: 0;
width: 400px;
min-height: 390px;
margin: 0;
position: relative;
}
.card-space .card .content{
width: 400px;
min-height: 100%;
background-color: #f5f5f5;
min-height: 390px;
padding: 15px;
}
.pointer-space{
text-align: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.pointer-space .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.pointer-space .pointer:hover {
background-color: #3b73c5;
}
</style>
</head>
<body>
<div class="main-container">
<table class="card-space">
<tr class="card-space_container" id="card-space_container">
<td class="card">
<div class="content">
<h1>Card1</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card2</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card3</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card4</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card5</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card6</h1>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div class="pointer-space">
<span class="pointer" data-index="0"></span>
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
<script>
(function(){
// Get all the Pointers
var PointerList = document.querySelectorAll(".pointer");
// Get the Card container
var container = document.getElementById("card-space_container");
PointerList.forEach(function(pointer){
pointer.addEventListener('click', function(){
// First get the index represented by each pointer
var i = this.getAttribute('data-index');
// Summary:
// Then Calculate the position to which card-space_container must be set.
// examples:
// -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
// -If the pointer return index as 1, then 1 x -400 = -400%;
// - etc...
container.style.left = (i * (-400)).toString().concat('px');
});
});
})();
</script>
</body>
</html>
I seem to be running into a bit of issues with by off canvas navigation.
I'm trying to toggle two classes on one event listener, it's working with the nav menu, but it's not toggling the class on the .Site element. What am I doing wrong?
I'm trying to have the .Site element add a class to set the margin-left to 20% and have a width of 80% while the off canvas menu gets the width of 20% from 0. The Navigation works, but the .Site toggle doesn't work.
let navToggle = document.querySelector('.menuButton');
let nav = document.querySelector('.SiteNavigation');
let site = document.querySelector('.Site');
navToggle.addEventListener('click', (event) => {
nav.classList.toggle("SiteNavigationOpen");
site.classList.toggle("SiteNavOpen");
});
#use postcss-nested;
#use postcss-simple-vars;
html {
background: #fff;
scroll-behavior: smooth;
line-height: 1.15;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
text-shadow: none;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / (7680 - 320)));
}
html,
body {
font-family: 'Lato', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.1rem;
}
h1 {
font-size: 2.25rem
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75em
}
h4 {
font-size: 1.5rem
}
h5 {
font-size: 1.25rem
}
h6 {
font-size: 1rem;
}
p {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 1.1rem;
font-weight: 300;
}
p.--mousePrint {
font-size: 0.8rem;
}
.textCenter {
text-align: center;
}
.Site {
width: 100%;
margin-left: 0;
}
.SiteNavOpen {
width: 80%;
margin-left: 20%;
}
.menuButton {
position: absolute;
top: 1vh;
right: 1vw;
border: none;
background: none;
color: #eaeaea;
}
.SiteHeader {
min-height: 100vh;
background: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center center;
background-size: cover;
background-attachment: fixed;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #eaeaea;
filter: sepia(40%);
}
.siteBranding {
display: flex;
flex-direction: column;
}
.siteBranding a {
color: #eaeaea;
}
.SiteMain {
background: #eaeaea;
color: #353535;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.mainInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.articleMain {
max-width: 33em;
margin: 0 auto;
}
.--textCenter {
text-align: center;
}
.SiteNavigation {
background: #66023c;
color: #eaeaea;
height: 100vh;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.13s;
}
.SiteNavigationOpen {
width: 20%;
}
.SiteNavigation a {
color: #eaeaea;
}
.SiteNavigation li {
transition: all 0.13s;
}
.SiteNavigation li:hover {
transform: scale(1.2, 1.2);
}
.Site {
width: 100%;
margin-left: 0%;
transition: all 0.13s;
}
.SiteColophon {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.colophonInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.SiteFooter {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.footerInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.socialMedia {
text-align: center;
}
.fab:hover {
transform: scale(1.2, 1.2);
}
.--btnLink {
background: none;
color: none;
border: none;
}
.socialMediaButton {
transition: all 0.13s;
}
.socialMediaButton:hover {
transform: scale(1.5, 1.5);
}
<nav class="SiteNavigation">
<ul class="nav">
<li>HOME</li>
<li>SERVICES</li>
<li>THEMES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="Site">
<header class="SiteHeader">
<button class="menuButton">
<i class="fas fa-bars"></i>
</button>
<div class="siteBranding">
<h1 class="textCenter">TEOTIHUACAN DESIGN</h1>
<p class="textCenter">Quality Websmiths</p>
<button class="btn --btnLink alignCenter"><i class="fas fa-arrow-circle-down fa-2x"></i></button>
</div>
</header>
<main id="main" class="SiteMain">
<div class="mainInner">
<article class="articleMain">
<header class="articleHeader">
<h1 class="--textCenter">Niltze! (it means Hello!)</h1>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere molestiae ex qui laudantium, nobis voluptate quaerat suscipit veritatis ducimus animi corporis, perspiciatis aliquam aliquid! Corrupti dicta magnam autem labore quo.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In obcaecati, consequatur sed officiis deleniti maxime reprehenderit possimus fugiat officia quasi, nemo doloremque numquam pariatur doloribus! Tempora facere harum earum provident nulla,
ipsam quos animi minus esse nihil! Tempore officiis possimus facilis sint, vel id ipsam obcaecati dolor dolorem suscipit molestias aliquam quaerat itaque distinctio beatae voluptates nostrum nesciunt voluptate? Quae temporibus vitae molestias
magnam sed, nostrum ducimus nulla, totam ad nihil aut magni asperiores natus esse quasi omnis quod voluptatem? Molestiae, possimus eos quis eveniet rerum tenetur aliquam ullam nemo? Laudantium ratione perspiciatis possimus quos quaerat quibusdam,
labore quod deserunt temporibus assumenda ipsam quasi repudiandae maiores quia sed architecto culpa nam cum veritatis fugiat itaque! Accusantium eos velit sunt quia soluta perspiciatis laudantium iste, neque minus consequuntur tempora incidunt
aliquid!</p>
</article>
</div>
</main>
<section class="SiteColophon">
<div class="colophonInner">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque laborum ipsam dolores nisi nesciunt. Doloribus recusandae rem aliquam veniam, soluta repellat earum, alias accusamus ipsam dolorum quo voluptatum dolor dolore.</p>
</div>
</section>
<footer class="SiteFooter">
<div class="footerInner">
<p class="--mousePrint textCenter">Copyright © 2020 Teotihuacan Design. Powered by WordPress</p>
<div class="socialMedia">
<button class="btn --btnLink socialMediaButton"><i class="fab fa-facebook"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-twitter"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-instagram"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-behance"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-dribbble"></i></button>
</div>
</div>
</footer>
</div>
I've checked your code and the classes apply correctly. If you inspect the divs you can see the classes applying.
The problem is in .SiteNavOpen CSS. Add the !important tag because width and margin-left get overwritten by .Site. Or, to avoid doing that add that CSS to .Site .SiteNavOpen. Like this:
.SiteNavOpen {
width: 80% !important;
margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
width: 80%;
margin-left: 20%;
}
Also I would suggest you start using the DevTools in your browser. If a class CSS gets overwritten and ignored by another class you can see that there and realize where the problems come from.
Hi guys might be a very simple question, but i am playing around with a lightbox found here. I got it on my site and its working, however i want to use it on a different page, but i cant, so i am guesing i might need to change the ID about or something? i am not to sure,
HTML:
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<!-- /lightbox-panel -->
<div id="lightbox"></div>
<!-- /lightbox -->
CSS:
body{
margin:150px 0 0 0;
text-align:center;
background: #f1e7b0;
}
h2{
font-size: 32px;
}
a{
text-decoration: none;
color: #222222;
font-size: 18px;
}
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
So just to just fully be clear, i got it working for a one, but want to use the effect on anther object, i aien't to sure those how to change it so i can have diffrent content in the other one.
Thanks
You could even do it without JavaScript, as seen is this example below. All you need is to address the :target attribute with a corresponding id and href.
.lightbox {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.lightbox:target {
opacity: 1;
pointer-events: auto;
}
.lightbox > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 20px;
background: #fff;
}
.close {
background: black;
color: #fff;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: auto;
text-decoration: none;
font-weight: bold;
}
.close:hover {
background: red;
}
Box 1
<div id="lightbox-1" class="lightbox">
<div>
Close
<p>
Box 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, et deleniti temporibus minus nisi voluptas molestias magni dolore qui, maxime blanditiis dolorem error nostrum, soluta exercitationem hic! Molestiae voluptas necessitatibus quo dignissimos
quis nobis magni eaque veniam rerum nisi laboriosam rem natus sint amet voluptatem voluptatum explicabo voluptatibus animi, et.
</p>
</div>
</div>
Box 2
<div id="lightbox-2" class="lightbox">
<div>
Close
<p>
Box 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad saepe non eos officia sequi, nemo quo ex facilis odio fuga ea eaque dolore perspiciatis obcaecati numquam reprehenderit consequuntur, repudiandae alias.
</p>
</div>