I am curious...do the CSS scroll-snap properties have a API (events) that can be hooked into via JavaScript?
I am tinkering with the idea of creating a website that uses scroll-snap to move between 100vh "slides". After each slide is done "scroll-snapping" I would like to trigger an animation.
I am sure there are crafty ways I could check each "slide" to see if it is taking 100% of the viewport, but that sort of sucks. It would be far better to fire a function after the scroll event is complete.
Here is a super simple example:
$(document).ready(function() {
let slideNumber = $('.container > .slide').length;
if (slideNumber > 0) {
$('.container > .slide').each(function() {
$('#dotNav').append('<li></li>');
});
}
//DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE.
});
html {
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
scroll-snap-type: y mandatory;
}
.container {
width: 100%;
scroll-snap-type: y mandatory;
position: relative;
.slide {
height: 100vh;
width: 100%;
background: #cccccc;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
&:nth-child(odd) {
background: blue;
h2 {
color: #ffffff;
}
}
h2 {
margin: 0;
font-size: 40px;
text-transform: uppercase;
}
}
ul#dotNav {
position: fixed;
top: 50%;
right: 20px;
list-style: none;
li {
width: 20px;
height: 20px;
margin-bottom: 10px;
cursor: pointer;
a {
display: block;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 50%;
}
}
li.active {
background: #000000;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slide" id="slide0">
<h2>Slide 1</h2>
</div>
<div class="slide" id="slide1">
<h2>Slide 2</h2>
</div>
<div class="slide" id="slide2">
<h2>Slide 3</h2>
</div>
<ul id="dotNav">
</ul>
</div>
You can see it working here:
https://codepen.io/trafficdaddy/pen/BMGBBg
Hope someone out there has an answer! :)
You can do this with an IntersectionObserver:
document.addEventListener("DOMContentLoaded", () => {
(function scrollSpy() {
const targets = document.querySelectorAll(".section"),
options = {
threshold: 0.5
};
// check if IntersectionObserver is supported
if ("IntersectionObserver" in window) {
(() => {
const inView = target => {
const interSecObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
fireyourfunction();
}
});
}, options);
interSecObs.observe(target);
};
targets.forEach(inView);
})();
}
})();
});
Related
I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>
Apologies if this is a repeat question. I've scanned the internet but haven't found a viable solution to this. My website has varying background colours, blue and white. My nav's copy is primarily set to white but I'd like it to change to black when over a div with a white background.
Initially, I found this bit of JS on here:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.desktop-menu').offset().top;
var menuHeight = $('.desktop-menu').height();
var menuPos = $('.logo').offset().top;
var menuHeight = $('.logo').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.desktop-menu').addClass('menu-secondary');
$('.desktop-menu').removeClass('menu-primary');
}
else {
$('.desktop-menu').removeClass('menu-secondary');
$('.desktop-menu').addClass('menu-primary');
}
})
})
But this seems to not work beyond 3 containers. If I continue scrolling to other divs, no matter what id I attach to a div (#light or #dark), the text stops changing after the first 3 div containers on a page.
Thanks to anyone who can help!
EDIT:
Struggled to get codepen to work so here's an example below.
Example HTML:
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
</div>
Example CSS:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
Example JS:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.menu-btn').offset().top;
var menuHeight = $('.menu-btn').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.menu-btn').addClass('dark-color');
$('.menu-btn').removeClass('light-color');
}
else {
$('.menu-btn').removeClass('dark-color');
$('.menu-btn').addClass('light-color');
}
})
})
Ok, I had to change a bit your code because you were checking on ids (you shouldn't have multiple elements with the same ID),
This should be ok for your case,
so basically i create an array of light-sections and then check if scroll position is inside one of them
var $ = jQuery;
$(document).ready(function () {
var lightPos = [];
$(".light-background").each(function () {
lightPos.push({
start: $(this).offset().top,
end: $(this).offset().top + $(this).height()
});
});
$(window).scroll(function () {
var menuPos = $(".menu-btn").offset().top;
var isInLight = !!lightPos.some((light) => {
return light.start < menuPos && light.end > menuPos;
});
if (isInLight) {
$(".menu-btn").addClass("dark-color");
$(".menu-btn").removeClass("light-color");
} else {
$(".menu-btn").removeClass("dark-color");
$(".menu-btn").addClass("light-color");
}
});
});
body {
margin: 0;
font-family: "Poppins", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
</div>
I have a panel which contains some options as shown in the image :
There is a arrow button on header , what I am looking for is , if I click on that button it should expand to the left as shown :
Example : If I have lets suppose 20 options it will open to the left like that showing 5 image in each part and if I again click on it it will collapse like 1st image .
How it could be done using javascript , html and css only provided everything is dynamic in nature. Any help would be appreciated .
Thanks
you can use the flex-flow: column wrap and overflow: hidden to make something like this.
POC:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = ">";
tools.classList.remove("extend");
} else {
expend.innerHTML = "<";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
position: relative;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">></div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>
you can use diraction: rtl
to the left:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = "<";
tools.classList.remove("extend");
} else {
expend.innerHTML = ">";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
direction: rtl;
position: absolute;
right: 10px;
top: 30px;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">
< </div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>
I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>
I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>