maybe someone can tell me, how to make it so that when clicking next, the user sees an infinite loop of slider elements? At the moment, I was only able to make the elements move inside the slider.
I'm assuming that I need to create new items inside the carousel on every click.
I would be grateful for advice on what to do next.
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
function sliderNext() {
sliderBox.style.transform += 'translateX(-100px)';
sliderBox.style.transition = '0.3s';
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
}
.slider {
background: #eee;
display: flex;
width: 500px;
border: solid;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
</body>
</html>
I made a simple script based on what you want. You may want to optimize it by removing the object(s) when they are not displayed.
What I have changed:
Instead of transitioning using translateX(-100px), I make the container position relative then moving using left attribute (you're doing it wrong, you have to check for the value first then remove the px suffix)
Make a timeout function to clone the object at index, then put it at the end of the slider object (have to increase the width and set the left style properly). The function sync exactly with the transition duration.
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
let index = 0;
sliderBox.style.width = '500px';
sliderBox.style.left = '0px';
function sliderNext() {
setTimeout(() => {
index++;
let child = sliderBox.querySelector(`div:nth-child(${index})`);
let cloneNode = child .cloneNode(true);
sliderBox.style.width = `${(5 + index) * 100}px`;
sliderBox.appendChild(cloneNode);
}, 300);
// clone and move the element to bottom
let currentLeftPosition = sliderBox.style.left ? parseFloat(sliderBox.style.left.replace('px', '')) : 0;
let nextLeftPosition = currentLeftPosition - 100;
sliderBox.style.left = `${nextLeftPosition}px`;
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
position: relative;
}
.slider {
background: #eee;
display: flex;
min-width: 500px;
border: solid;
position: relative;
transition: left 0.3s;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
If I understood your question you can go with the following elegant solution
I will first explain the principles and advantages:
I won't add/remove any element, working only on your initial sliderBox
in order to create an infinite loop I'm stopping the shift move on this element that would be executed by sliderBox.style.transform += 'translateX(-100px)';
I modified sliderNext() so that the infinite slide effect will be achieved by stealing the color to the next slide, i.e. after clicking the Next button the 2nd slide will steal the color to the 3rd, the 3rd to the 4th and the 4th will be assigned each time a random color to give that endless feeling
I'm assuming that "infinite loop" meant that we don't want to see the border of sliderBox that would be shown with the 5th element, so we will never see it [you can add a "Go to the last element" button should you need that]
I did only minimal adjustments to your original draft, minimizing also any unneeded computational operations
Without further ado here is the final code:
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
let counter = 0;
let firstSlide = document.querySelector('.slide2');
let secondSlide = document.querySelector('.slide3');
let thirdSlide = document.querySelector('.slide4');
function sliderNext() {
if (counter == 0) {
sliderBox.style.transform += 'translateX(-100px)';
sliderBox.style.transition = '0.3s';
} else {
firstSlide.style.background = secondSlide.style.background;
secondSlide.style.background = thirdSlide.style.background;
thirdSlide.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
}
counter++;
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
}
.slider {
background: #eee;
display: flex;
width: 500px;
border: solid;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
</body>
</html>
This should solve your problem, otherwise let me know
Related
Hello, everyone!
Is there a framework or something else that makes it easy to move text (to the left or right) when the user scrolls (for example near the footer)? So a pure scroll animation.
Thank you in advance!
I tried Scrollmagic, but i cant handle it. :/
You can try gsap , however if you want to make it without a framework using scroll event you can try :
const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const container = document.getElementById("container")
const rect = container.getBoundingClientRect()
const animate = (element,position) => {
element.style.transform = `translateX(${position}px)`
}
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
window.requestAnimationFrame(function() {
animate(first,lastKnownScrollPosition*.2)
animate(second,lastKnownScrollPosition*-.2)
animate(third,lastKnownScrollPosition*.2)
});
});
body{
height: 200vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#container{
max-width: 100vw;
overflow: hidden;
}
h1{
transition: transform 0.2s linear;
}
<body>
<div id="container">
<h1 id="first">
this is a text this is a text this is a text
</h1>
<h1 id="second">
this is a text this is a text this is a text
</h1>
<h1 id="third">
this is a text this is a text this is a text
</h1>
</div>
</body>
This is a simple exemple to demonstrate the idea using jquery. gasp like #Chakib said before is a good solution.
function isVisible(el, plus, wrapper = window ){
var winFromTop = jQuery(wrapper).scrollTop();
var currentPosition = winFromTop + jQuery(wrapper).height();
var el = jQuery(`${el}`);
var elFromTop = el.length ? jQuery(el[0]).offset().top : jQuery(el).offset().top;
return (currentPosition + plus) > elFromTop
}
jQuery(window).scroll(function(e) {
var idElement = '.anime';
const visible = isVisible(idElement, -20)
if(visible){
console.log('=> ', idElement)
jQuery(idElement).addClass('resetX')
}
else {
jQuery(idElement).removeClass('resetX')
}
});
body{
overflow-x: hidden
}
.container{
border: solid 1px red;
max-width: 800px;
margin: auto auto;
padding: 5px;
}
.above-the-fold{
background: linear-gradient(180deg, rgba(163,196,243,1) 27%, rgba(142,236,245,1) 100%);
height: calc(100vh + 300px);
margin-bottom: 30px;
}
.boxes{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box{
margin: 10px;
height: 200px;
flex: 0 0 calc(50% - 30px);
background-color: #98f5e1;
}
.text{
font-size: 18px;
margin: 10px;
}
.anime{
transition: all .7s ease-in-out;
}
.left{
transform: translateX(220px);
}
.right{
transform: translateX(-220px);
}
.resetX{
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="above-the-fold"></div>
<div class="boxes">
<div class="box anime right"></div>
<div class="box anime left"></div>
<div class="text anime right">Loren Ipsum</div>
<div class="text anime left">Loren Ipsum</div>
</div>
</div>
Apologies for the not-super-descriptive title, I'm having a hard time verbalizing the problem, so let me try again in more detail.
I am using flexbox to create a 3 column layout, where I'm looking to have the middle column expand when either (or both) of the left / right columns (menu panels) are collapsed.
Here's a screen shot of the problem I'm experiencing.
https://www.dropbox.com/s/d9mcg7q71hwogog/example.jpg?dl=0
When the panels are open (expanded) all three columns fill the width of the screen. This is good. However, when either of the two sidepanels is animated (collapsed), the center column does not expand to fill in the additional space. This is not good.
I'm not sure if it has to do with the fact that I'm using translateX to toggle the left / right panels and this is a just a theory, but perhaps the center column doesn't realize that the left / right columns have shifted position, so it doesn't know there's more space to fill?
Code to follow:
CSS:
<style>
body {
background-color: lightslategrey;
}
.red {
background-color: lightcoral;
}
.green {
background-color: lightgreen;
}
.grey {
background-color: lightslategray;
}
* {
box-sizing: border-box;
}
.ls-toggle, .rs-toggle {
//position: fixed;
z-index: 1;
cursor: pointer;
transition: 0.5s;
}
#left-sidebar, #right-sidebar {
width: 250px;
height: 100vh;
transition: 0.5s;
}
#left-sidebar.is-closed {
transform: translateX(-80%);
}
#right-sidebar.is-closed {
transform: translateX(80%);
}
.ls-top, .rs-top {
display: flex;
width:100%;
height:35px;
align-items: center;
justify-content: flex-end;
background-color: lightslategrey;
}
.rs-top {
justify-content: flex-start;
}
#mw-content {
width: 100%;
height: 100vh;
}
</style>
HTML:
<div class="d-flex">
<div id="left-sidebar" class="col- red">
<div class='ls-top grey'>
<button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
</div>
</div>
<div id="mw-content" class="col green">
<h3> Main Window Content.</h3>
</div>
<div id="right-sidebar" class="col- red">
<div class='rs-top grey'>
<button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var lsToggleBtn = document.querySelector('.ls-toggle');
var lsSidebar = document.querySelector('#left-sidebar');
var rsToggleBtn = document.querySelector('.rs-toggle');
var rsSidebar = document.querySelector('#right-sidebar');
lsToggleBtn.addEventListener('click', function () {
lsToggleBtn.classList.toggle('is-closed');
lsSidebar.classList.toggle('is-closed');
});
rsToggleBtn.addEventListener('click', function () {
rsToggleBtn.classList.toggle('is-closed');
rsSidebar.classList.toggle('is-closed');
});
});
Things I've tried:
Adding flex: 1 1 auto to main content container (mw-content).
Adding flex: 0 to l/r sidebar containers & flex: 1 1 auto to main content container
Setting width to 100% on main content container
Attempting to use translateX on main content container & setting new width when clicking left sidebar
Obviously none of those ideas worked, and I freely admit I'm not the greatest with flexbox, so I'm sure I'm just missing something basic, but I'd appreciate any suggestions you fine folks might have. :)
You need to play with "position: absolute" and add two more classList.toggle functions
$(document).ready(function () {
var mwContent = document.querySelector('#mw-content'); // !!
var lsToggleBtn = document.querySelector('.ls-toggle');
var lsSidebar = document.querySelector('#left-sidebar');
var rsToggleBtn = document.querySelector('.rs-toggle');
var rsSidebar = document.querySelector('#right-sidebar');
lsToggleBtn.addEventListener('click', function () {
lsToggleBtn.classList.toggle('is-closed');
lsSidebar.classList.toggle('is-closed');
mwContent.classList.toggle('ls-pos'); // here
});
rsToggleBtn.addEventListener('click', function () {
rsToggleBtn.classList.toggle('is-closed');
rsSidebar.classList.toggle('is-closed');
mwContent.classList.toggle('rs-pos'); // here
});
});
body {
background-color: lightslategrey;
margin: 0;
overflow: hidden;
}
.red {
background-color: lightcoral;
}
.green {
background-color: lightgreen;
}
.grey {
background-color: lightslategray;
}
* {
box-sizing: border-box;
}
.d-flex {
display: flex;
position: relative;
}
.ls-toggle,
.rs-toggle {
cursor: pointer;
transition: 0.5s;
}
#left-sidebar {
position: absolute;
left: 0;
width: 250px;
height: 100vh;
transition: 0.5s;
}
#right-sidebar {
position: absolute;
right: 0;
width: 250px;
height: 100vh;
transition: 0.5s;
}
#left-sidebar.is-closed {
transform: translateX(-80%);
}
#right-sidebar.is-closed {
transform: translateX(80%);
}
.ls-top,
.rs-top {
display: flex;
width: 100%;
height: 35px;
align-items: center;
justify-content: flex-end;
background-color: lightslategrey;
}
.rs-top {
justify-content: flex-start;
}
#mw-content {
position: absolute;
right: 250px;
left: 250px;
height: 100vh;
transition: 0.5s;
}
.ls-pos {
left: 50px !important;
transition: 0.5s;
}
.rs-pos {
right: 50px !important;
transition: 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex">
<div id="left-sidebar" class="col red">
<div class='ls-top grey'>
<button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
</div>
</div>
<div id="mw-content" class="col green">
<h3> Main Window Content.</h3>
</div>
<div id="right-sidebar" class="col red">
<div class='rs-top grey'>
<button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
</div>
</div>
</div>
Here is an example of how you can achieve this using vanilla javascript.
Two functions, one to track the collapsing of section elements and resize the middle section. It checks click and adds the elements (sections) id to an array, a conditional checks the array and if the array includes the two outer sections id, we resize the middle section using style.transform => scale(). The second function resets the collapsible elements.
More info found in code snippit.
let clicked = [];
const middle = document.querySelector('#sect2')
let section = document.querySelectorAll('.sect')
let reset = document.querySelector('#reset')
// function
const resizeOnCollapse = (els) => {
// loop over the three sections
els.forEach(sect => {
// do not allow the middle section to be collapsed
if (sect.id !== 'sect2') {
// eventlistener to check a click on the outer sections
sect.addEventListener('click', (e) => {
// push the clicked elements into an array
clicked.push(e.target.id)
// set the event targets width to 0
// essentially collapsing it from view
e.target.style.width = '0px';
// conditional that checks if the array
// includes the two outer sections
if (clicked.includes('sect1') && clicked.includes('sect3')) {
// resize the middle section using
// transform: scale()
middle.style.transform = 'scale(1.2)'
// transition animation on the transform
middle.style.transition = 'transform .5s ease-out'
}
})
}
})
}
// function to reset the elements and reset the array
const resetEls = (el, section) => {
// eventlistener on click
el.addEventListener('click', () => {
// reset the array
clicked = [];
// loop over the sections
section.forEach((sect) => {
// reset the width essentially uncollapsing the sections
sect.style.width = '30vw';
// reset the middle transform rule, scale() to 1
sect.style.transform = 'scale(1)';
})
})
}
// call the functions
resetEls(reset, section)
resizeOnCollapse(section)
#main {
display: flex;
justify-content: space-around;
}
.sect {
width: 30vw;
height: 80vh;
}
#sect1 {
background-color: red;
}
#sect2 {
background-color: blue;
}
#sect3 {
background-color: green;
}
<button id="reset">reset</button>
<div id="main">
<div id="sect1" class="sect">
</div>
<div id="sect2" class="sect">
</div>
<div id="sect3" class="sect">
</div>
</div>
I have these 2 divs and when I click on div 1 I want it to go over the second div, and if I click on Div 1 again I want it to go back to its original position (I want Div 1 to increase its width so it goes over the second Div). Here is my code where I have my 2 divs next to each other. Can anyone point me in the right direction on how to accomplish this? Thanks a lot in advance!
NOTE:
- No jQuery please. I'm trying to accomplish this with javascript and css.
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
If you're willing to ditch flex, you can use a combination of float , postion:absolute and transition so that the main div "slides over" the other div
document.querySelector("#wide").onclick = toggleWidth;
function toggleWidth() {
this.classList.toggle("active");
}
#parent {
position: relative;
}
#narrow {
width: 200px;
background: lightblue;
float: right;
}
#wide {
position: absolute;
background: lightgreen;
width: calc(100% - 200px);
transition: width 2s;
}
#wide.active {
width: 100%;
opacity: 0.9;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
Note: Changing the opacity is purely optional, I've only done it to further illustrate the "slide over" effect.
Try this
#parent {
display: flex;
}
#narrow {
width: 20vw;
position: absolute;
left: calc(80vw - 10px);
background: lightblue;
z-index: 1;
margin: 0;
}
#wide {
width: calc(80vw - 10px);
background: lightgreen;
transition: all 0.3s ease-out;
}
.wider {
width: 100vw!important;
z-index: 2;
}
<div id="parent">
<div id="wide" onclick="myFunction()">Div 1</div>
<div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
var element = document.getElementById("wide");
element.classList.toggle("wider");
}
</script>
You can try it using JavaScript.
First, you prepare your CSS:
#narrow {
width: 200px;
transition: 0.32s;
overflow: hidden;
}
#wide.fullwidth ~ #narrow {
width: 0;
opacity: 0;
}
Then, the JavaScript, like this:
document.querySelector("#wide").onclick = changeDivWidth;
var wideFull = false;
function changeDivWidth () {
if (!wideFull) {
this.classList.add("fullwidth");
wideFull = true;
return; // if variable wideFull is false, function stops here
}
wideFull = false;
this.classList.remove("fullwidth");
}
Shorter approach using toggle();
document.querySelector("#wide").onclick = changeDivWidth;
function changeDivWidth () {
this.classList.toggle("fullwidth");
}
Are you looking for something like this : JSFiddle ?
JavaScript (Pure) :
function HideDivOne(){
var wide = document.getElementById("wide");
var narrow = document.getElementById("narrow");
if (wide.style.width == "70%"){
wide.style.width = "100%";
narrow.style.width = "0%";
narrow.style.opacity = "0";
}
else{
wide.style.width = "70%";
narrow.style.width = "30%";
narrow.style.opacity = "1";
}
}
CSS
#parent {
display: flex;
}
#narrow {
width: 30%;
background: lightblue;
height: 20px;
transition: 0.2s;
}
#wide {
width: 70%;
flex: 1;
background: lightgreen;
height: 20px;
transition: 0.2s;
}
HTML
<div id="parent">
<div id="wide" onclick="HideDivOne()">Div1</div>
<div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>
You can change the z-index of the divs based on your desired effect. My suggestion is using jQuery. On click on div 1 add a class to the div that modify the zindex, that is, if the class is not already added, if so, remove it.
I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Please take a look at the snippet below. Notice how the overflow property is used.
You have to scroll mock-body-container to keep its scrolling position.
You're scrolling body instead, so when you scale mock-body-container there is nothing to scroll in body and you loose the scrolling position.
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
overflow:auto;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Once you know the element that was in focus it should be relatively easy. If you need to find which element was last in focus, you can do that with a scroll function. If you need this as well let me know and I will update my answer.
If you know that #mock-body is the last element in focus, just scroll back to it after the resize.
In this example I've used jQuery as it makes this interaction easier, but this can be done (albeit more verbosely) with vanilla JS as well.
$('html, body').animate({
scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number
A simple way to do it is to remember the position of the document scroll and reapply it when you getting back to "normal" view:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
Check it out:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
body {
margin: 0;
background: #000;
}
.body-on-burger {
max-width: 100%;
overflow-x: hidden;
}
.mock-body-container {
height: 100vh;
}
.mock-body-container-on-burger {
height: 100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change {
overflow: scroll;
}
.mock-body {
position: relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height: 50px;
width: 50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height: 500px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Legend: _s(el) returns first match of el and s_(d) checks if d has class body-on-burger.
The simple way to do this is to determine the change in height during the resize, and scroll that much.
const heightChange = newHeight - initialHeight;
scrollableDiv.scrollTop = scrollableDiv.scrollTop - heightChange;
In my case I am using a resize method I wrote, so I do this work inside of a window.addEventListener("mousemove", handleResize); when I know the div in actively being resized by the user.
This will still work fine with native html resizable elements, you just need to figure out how/when to listen for resize/drag events accordingly.
Hy everybody,
My task is to realize a slider with pure HTML / Jquery code.
The template is the follow
and the html code for the upper template is the follow
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="slide"><span></span></article>
<article id="slide-1" class="slide"><span></span></article>
<article id="slide-2" class="slide"><span></span></article>
<article id="slide-3" class="displayed-slide"><span></span></article>
</section>
</div>
<nav id="slider-nav">
</nav>
We start with button {#slide-0} which display article {ID="slide-0"}; when we select another button, let's say {#slide-3} then article with {ID="slide-0"} fade out and article with {ID="slide-3} fade in; when we select another button, let's say {#slide-1} then article with {ID="slide-3"} fade out and article with {ID="slide-1} fade in; and so on.
I started to struggle with this aim a week ago and so I ask your precius help.
Many many thanks
This will get you going.
You will need:
- http://jquery.com/ - JQuery
- http://jqueryui.com/ -JQueryUI
With these two your work is easy.
First reference JQuery in your website then you reference JQueryUI.
Then you will do something like this in your own JQuery Code:
The HTML:
<div id="slider">
<div id="firstSlide">
<img class="active" src="pics/home/1.1.gif"/>
<img src="pics/home/1.2.gif"/>
<img src="pics/home/1.3.gif"/>
</div>
</div>
The CSS:
#slider
{
position: relative;
height: 180px;
border-bottom: 3px solid black;
z-index: 1;
box-shadow: 0px 0px 10px black;
}
#firstSlide
{
position: absolute;
width: 198px;
height: 100%;
left: 0%;
border: 1px solid black;
}
#firstSlide img
{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
}
#firstSlide img.active
{
z-index: 3;
}
The JQuery:
var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';
var timer = setInterval('DoIt1()', timerInterval);
function DoIt1()
{
var $active = $('#firstSlide' + ' .' + 'active');
var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
$next.css('z-index',2);
$active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
setTimeout(function() { DoIt1(); }, slideDelay);
}
In the JQuery, just change the var's to your needs. Also, change the CSS etc to your own needs. The Z-INDEXes are VERY important here - so be careful when you change theCSS I gave you.
Why don't you put a javascript function in your href that can just change the class of your article.
When you change the class of your article, you can display them or not (like we can see, class=slide or displayed-slide)
I don't know if it's what you want to do ?
Have you try some things ?
I did it (phew!!)
Now this is the css
#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#sliding-container {
width: 100%;
}
#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}
#slider-nav a.active {
background: #999;
}
this is the html
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />
</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
and this is the script
<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");
$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");
$navButtons.removeClass("active");
$selectedButton.addClass("active");
crossFading(rawIdSlideToFadeIn);
});
function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");
if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>
Yes, some part of this code has to be improved, but the kernel is built,
Special thanks to SushiBalboha: his hint showed me the right way.
Thank you very much