Slider goes out of first and last element - javascript

Im new to web development.
What i want to make is a slider for buttons.
How can i prevent it going out of first and last element? Right now i can slide it to the right on click, move it and when i click again it moves back to its initial position.
How can i make it draggable only between the first and last element and not go out of it.
Sorry if anything is unclear.
Any help is appreciated!
Here is my code below.
const track = document.querySelector('.track');
let initialPosition = null;
let moving = false;
let transform = 0;
let firstPosition = window.scrollX + document.querySelector('.track').getBoundingClientRect().left // X
const scrollStart = (e) => {
initialPosition = e.pageX;
moving = true;
const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
if(transformMatrix !== 'none'){
if((parseInt(transformMatrix.split(',')[4].trim())) >= firstPosition){
transform = firstPosition;
} else {
transform = parseInt(transformMatrix.split(',')[4].trim());
}
}
};
const scrollMove = (e) => {
if(moving) {
const currentPosition = e.pageX;
const diff = currentPosition - initialPosition;
if(diff){
track.style.transform = `translateX(${transform + diff}px)`;
}
}
};
const scrollEnd = (e) => {
moving = false;
if(transform >= firstPosition){
track.style.transform = `translateX(${firstPosition})`;
}
};
if(window.PointerEvent) {
window.addEventListener('pointerdown', scrollStart);
window.addEventListener('pointermove', scrollMove);
window.addEventListener('pointerup', scrollEnd);
} else {
window.addEventListener('mousedown', scrollStart);
window.addEventListener('mousemove', scrollMove);
window.addEventListener('mouseup', scrollEnd);
window.addEventListener('touchdown', scrollStart);
window.addEventListener('touchmove', scrollMove);
window.addEventListener('touchup', scrollEnd);
}
body {
margin: 0;
}
.carousel {
width: 100%;
height: 140px;
background: #203290;
position: relative;
overflow: hidden;
}
.carousel .track {
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
touch-action: none;
}
.carousel .track .card {
width: 300px;
height: 120px;
background: #081050;
border-radius: 15px;
margin-right: 10px;
}
.card-button {
width: 100%;
height: 100%;
border-radius: 15px;
}
.card-button-text {
font-size: 4vh;
}
<div class="container">
<div class="carousel">
<div class="track">
<div class="card">
<button class="card-button"><span class="card-button-text">Link1</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link2</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link3</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link4</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link5</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link6</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link7</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link8</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link9</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link10</span></button>
</div>
</div>
</div>
</div>

Related

Show multiple file thumbnail on custom dropzone

I created custom dropzone in order to upload my files as the following example
function readFile(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
for (let i = 0; i < input.files.length; i++) {
reader.onload = function(e) {
var htmlPreview =
'<img width="100" src="' +
e.target.result +
'" />' +
"<p>" +
input.files[i].name +
"</p>";
var wrapperZone = $(input).parent();
var previewZone = $(input)
.parent()
.parent()
.find(".preview-zone");
var boxZone = $(input)
.parent()
.parent()
.find(".preview-zone")
.find(".box")
.find(".box-body");
wrapperZone.removeClass("dragover");
previewZone.removeClass("hidden");
// boxZone.empty();
boxZone.append(htmlPreview);
};
}
reader.readAsDataURL(input.files[0]);
}
}
function reset(e) {
e.wrap("<form>")
.closest("form")
.get(0)
.reset();
e.unwrap();
}
$(".dropzone").change(function() {
readFile(this);
});
$(".dropzone-wrapper").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("dragover");
});
$(".dropzone-wrapper").on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass("dragover");
});
$(".remove-preview").on("click", function() {
var boxZone = $(this)
.parents(".preview-zone")
.find(".box-body");
var previewZone = $(this).parents(".preview-zone");
var dropzone = $(this)
.parents(".form-group")
.find(".dropzone");
boxZone.empty();
previewZone.addClass("hidden");
reset(dropzone);
});
.container {
padding: 50px 100px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
.dropzone-wrapper {
border: 2px dashed #91b0b3;
color: #92b0b3;
position: relative;
height: 150px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 40%;
top: 60px;
font-size: 16px;
}
.dropzone,
.dropzone:focus {
outline: none !important;
width: 100%;
cursor: pointer;
}
.input-file {
position: absolute;
width: 100%;
height: 150px;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="10secs">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">10sec</h4>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>Preview</b></div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> Reset
</button>
</div>
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<div>Choose an image file or drag it here.</div>
</div>
<input type="file" class="dropzone input-file" multiple asp-for="#Model.Files10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see it is a multiple-input file, so you can upload multiple files in the same dropzone.
as you can see in the readFile javascript function, I create the thumbnail, the problem is when selecting more than one file, it only shows one thumbnail, how can I display each of them each next to the other as:
Regards

How to write exitClickHandler function better

There are 3 container classes
Two exit buttons are viewable inside each of their respective containers, where they each take you to a different container when clicked on.
<div class="container1"></div>
<div class="container2 hide"></div>
<div class="container3 hide"></div>
Code I am working on.
How would it be written differently to make it better?
How can this be improved?
https://jsfiddle.net/an23j14r/
function exitClickHandler(e) {
if (e.target.classList.contains("exit")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container1").classList.remove("hide");
console.log('Page1');
}
if (e.target.classList.contains("exitPage2")) {
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container2").classList.remove("hide");
console.log('Page2');
}
if (e.target.classList.contains("exitPage3")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.remove("hide");
console.log('Page3');
}
window.scrollTo(0, 0);
}
Here are the exit buttons that go to their corresponding CSS classes that they go to in the code.
You would click on a button and it should take you to a specific CSS class/page that it goes to.
There are 3 container classes, when 1 of 2 buttons is clicked on, 2 container classes should be hidden, where 1 of them becomes visible.
<div class="container1">
<button class="exit exitpPage2" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>
<div class="container2 hide">
<button class="exit" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>
<div class="container3 hide">
<button class="exit" type="button"></button>
<button class="exit exitpPage2" type="button"></button></div>
Each container/page would be unhidden when a button is clicked on, where the other containers/pages would stay hidden.
When exit button attached to .container1 is clicked on, .container2 and .container3 should be hidden.
When exit button attached to .container2 is clicked on, .container1 and .container3 should be hidden.
When exit button attached to .container3 is clicked on, .container2 and .container1 should be hidden.
Here is my code example:
const manageCover = (function makeManageCover() {
function showCover(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
}
function openCurtain(curtain) {
curtain.classList.add("slide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
showCover(cover);
const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
openCurtain(curtain);
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function init( /*selectors*/ ) {
//config.containers = document.querySelector(selectors.container);
// const allContainers = document.querySelector(".container");
//const playButtons = document.querySelector(selectors.playButton);
const allPlaybuttons = document.querySelectorAll(".cover");
//const allPlaybuttons = document.querySelectorAll(".embed-youtube-play");
addClickToButtons(allPlaybuttons);
}
return {
addCoverHandler,
init
};
}());
const manageUI = (function makeManageUI() {
document.body.scrollTop = 0;
const players = [];
function findPlayers() {
const allCovers = document.querySelectorAll(".cover");
const allWrappers = document.querySelectorAll(".wrap");
allCovers.forEach(function addToPlayers(cover, index) {
players.push({
"cover": cover,
"wrapper": allWrappers[index]
});
});
}
function getWrapper(cover) {
const index = players.findIndex(
(player) => player.cover === cover
);
return players[index].wrapper;
}
function exitClickHandler(e) {
if (e.target.classList.contains("exit")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container1").classList.remove("hide");
console.log('Page1');
}
if (e.target.classList.contains("exitPage2")) {
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container2").classList.remove("hide");
console.log('Page2');
}
if (e.target.classList.contains("exitPage3")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.remove("hide");
console.log('Page3');
}
window.scrollTo(0, 0);
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
findPlayers();
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}
return {
addExitHandlers,
getWrapper,
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let player;
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
}
function onPlayerStateChange(event) {
const player = event.target;
return player;
}
function addPlayer(video, playerOptions) {
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
const player = new YT.Player(video, playerOptions);
return player;
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 1,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function show(el) {
el.classList.remove("hide");
}
function combinePlayerOptions(opts1 = {}, opts2 = {}) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}
function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}
function playerAdder(wrapper, playerOptions) {
return function addPlayerCallback() {
initPlayer(wrapper, playerOptions);
};
}
function removePlayer(wrapper) {
wrapper.player.destroy();
delete wrapper.player;
console.log("removePlayer");
}
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
function initPlayer(wrapper, playerOptions) {
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
}
return {
adder: playerAdder,
removePlayerHandler
};
}());
const players = (function coverUIPlayerFacade() {
function addPlayer(coverSelector, playerOptions) {
const cover = document.querySelector(coverSelector);
const wrapper = manageUI.getWrapper(cover);
const callback = managePlayer.adder(wrapper, playerOptions);
manageCover.addCoverHandler(coverSelector, callback);
}
function init() {
manageCover.init({
playButton: ".cover"
});
manageUI.init({});
manageUI.addExitHandlers(managePlayer.removePlayerHandler);
}
return {
add: addPlayer,
init
};
}());
players.init();
function onYouTubeIframeAPIReady() {
players.add(".playa", {
playerVars: {
loop: 1,
playlist: "djV11Xbc914"
}
});
players.add(".playb", {});
players.add(".playc", {});
players.add(".playd", {});
players.add(".playe", {
playerVars: {
playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE",
"-Xgi_way56U", "CHahce95B1g"
]
}
});
players.add(".playf", {});
players.add(".playg", {});
players.add(".playh", {});
players.add(".playi", {});
players.add(".playj", {
playerVars: {
playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE",
"-Xgi_way56U", "CHahce95B1g"
]
}
});
players.add(".playk", {});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #302b63;
}
.container2 .container {
background: teal;
}
.container3 .container {
background: green;
}
.container1 {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain1 {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
.curtain {
margin: auto auto 40px;
max-width: 640px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play::before {
position: absolute;
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.embed-youtube .embed-youtube-play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
z-index: 1;
}
.embed-youtube-play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.embed-youtube-play:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.embed-youtube-play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.embed-youtube.active .embed-youtube-play {
display: none;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
#keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
clip-path: circle(50%);
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.exit.exitPage2 {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 200px;
left: 0;
border: 5px solid blue;
}
.exit.exitPage2::before,
.exit.exitPage2::after {
background-color: blue;
}
.exit.exitPage3 {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0px;
left: 200px;
border: 5px solid purple;
}
.exit.exitPage3::before,
.exit.exitPage3::after {
background-color: purple;
}
.hide {
display: none;
}
<div class="container1">
<div class="curtain1 remove">
<div class="ratio-keeper">
<div class="video-one"></div>
<div class="wrap embed-youtube ">
<div class="video embed-youtube " data-id="djV11Xbc914">
</div>
<button class="playa cover embed-youtube-play" type="button"></button>
</div>
</div>
<button class="exit exitPage2" type="button"></button>
<button class="exit exitPage3" type="button"></button>
</div>
</div>
<div class="container2 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-two"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playb cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-three"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playc cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-four"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playd cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-five"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playe cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-six"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playf cover embed-youtube-play" type="button"></button>
</div>
</div>
<button class="exit" type="button"></button>
<button class="exit exitPage3" type="button"></button>
</div>
</div>
</div>
<div class="container3 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-seven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playg cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-eight"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playh cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-nine"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playi cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-ten"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playj cover embed-youtube-play" type="button"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-eleven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playk cover embed-youtube-play" type="button"></button>
</div>
</div>
<button class="exit" type="button"></button>
<button class="exit exitPage2" type="button"></button>
</div>
</div>
</div>
If you want something that is similar to a carousel, you only need two buttons outside each container to control the index of the container that should be visible. The index start at 0 and is then changed ±1 steps depending on which button that is clicked.
toggleContainer() checks that the index of the container isn't out of bounce (less than 0 or bigger than the number of containers).
hideAllContainersBut() loops through the container "array" and hides every container except the current index.
document.getElementById('prev-button').addEventListener('click', toggleContainers);
document.getElementById('next-button').addEventListener('click', toggleContainers);
let containers = document.querySelectorAll('.container')
var index = 0;
function toggleContainers(event) {
let indexChange = event.target.dataset.indexChange;
index = index + Number(indexChange);
if (index < 0) { index = containers.length - 1; };
if (index >= containers.length) { index = 0; };
hideAllContainersBut(index);
}
function hideAllContainersBut(index) {
for (let i = 0; i < containers.length; i++) {
containers[i].hidden = index !== i;
}
}
.container {
height: 15vw;
padding: 1rem;
margin-bottom: 1rem;
}
button {
cursor: pointer;
}
.container.one {
background-color: red;
}
.container.two {
background-color: lightgreen;
}
.container.three {
background-color: yellow;
}
<section>
<div class="container one">
Container 1
</div>
<div class="container two" hidden>
Container 2
</div>
<div class="container three" hidden>
Container 3
</div>
<button id="prev-button" data-index-change="-1" type="button">Previous</button>
<button id="next-button" data-index-change="1" type="button">Next</button>
</section>

Making a carousel that slides on mouse scroll

I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the "value" section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.
So far I have been using the flickity API and have created most of the setup necessary.
The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).
My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.
jQuery(document).ready(function( $ ) {
var $carousel = $('.js-carousel');
$carousel.flickity({
prevNextButtons: false,
pageDots: false
});
// Split each word in the cell title into a span.
var $cellTitle = $('.js-cell-title');
// Wrap every letter in the cell title
$cellTitle.each(function() {
var $this = $(this);
var letters = $this.text().split('');
$this = $(this);
$this.empty();
$.each(letters, function(i, el) {
$this.append($('<span class="text-split">')
.append($('<span class="text-split__inner">')
.text(el)));
});
// Dirty way of getting the whitespace
var emptySplits = $this.find('.text-split__inner:contains( )');
emptySplits.addClass('whitespace');
emptySplits.parent().addClass('whitespace');
});
//focus the carousel when it is scrolled to
$(window).scroll(function() {
var carousel = $(".carousel");
var carouselTop = $('.carousel').offset().top;
var carouselHeight = $('.carousel').outerHeight();
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var isScrollMode = carousel.hasClass('scrollMode');
var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
(carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);
if(!isInView && isScrollMode){
carousel.removeClass('scrollMode');
carousel.blur();
console.log('EXIT');
} else if (!carousel.hasClass('scrollMode') && isInView){
carousel.addClass('scrollMode');
carousel.focus();
//NEEDS FUNCTION TO SCROLL THE CAROUSEL
console.log('ENTER');
}
});
//end of carousel event
function carouselEnd() {
var cells = $(".carousel-cell");
var numberOfCells = cells.length;
var lastCell = cells[numberOfCells - 1];
if( lastCell.classList.contains('is-selected') ){
//will add .show class to the hidden content
}
}
$carousel.on( 'settle.flickity', function( event, pointer ) {
carouselEnd();
});
});
.carousel{
.row{
margin:0;
}
.carousel-cell {
width: 66%;
margin-right: 3rem;
}
.cell__wrap {
width: 100%;
margin: 0 auto;
}
.cell__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.cell__title {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%) translateX(-20%);
}
.text-split {
overflow: hidden;
display: inline-block;
&.whitespace {
display: initial;
}
#for $i from 1 through 100 {
&:nth-child(#{$i}) .text-split__inner {
transition-delay: 0.02s * $i;
}
}
}
.text-split__inner {
transform: translateY(100%);
display: inline-block;
transition: transform 0.3s ease;
.is-selected & {
transform: translateY(0);
}
&.whitespace {
display: initial;
}
}
.cell__thumb {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Base styles
html,
body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* background-color: #00011D;
color: #FFF; */
}
.container {
width: 100%;
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<section class="carousel">
<div class="container a">
<div class="carousel js-carousel">
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
</div>
</div>
</section>

ShuffleJS can't get started

I couldn't find any up-to-date example project or guide for this library and what I have done so far (which doesn't work) is here: https://jsfiddle.net/k3g5xtyh/ Am I missing anything? Thanks in advance.
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: sizer // could also be a selector: '.my-sizer-element'
});
Let code it in the simplest possible way. Feel free to toggle show code snippet than execute script by running Run code snippet
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item'
});
addFilterButtons()
function addFilterButtons() {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = Array.prototype.slice.call(
options.children
);
filterButtons.forEach(function(button) {
button.addEventListener('click', handleFilterClick.bind(this), false);
});
};
function handleFilterClick(evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
var filterGroup;
removeActiveClassFromChildren(btn.parentNode)
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
shuffle.filter(filterGroup);
};
function removeActiveClassFromChildren(parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
.aspect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.aspect__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect--16x9 {
padding-bottom: 42%;
}
.picture-item {
height: 100px
}
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: #dac;
}
.col-3\#sm {
width: 33%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
.col-6\#sm {
width: 60%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6#sm">
<div class="filter-options btn-group">
<button class="btn" data-group="photography">Photography</button>
<button class="btn" data-group="wallpaper">Wallpaper</button>
<button class="btn" data-group="3d">3D</button>
</div>
</div>
</div>
<div id="grid" class="row my-shuffle-container">
<figure class="col-3#sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Baseball, [photography]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Tennis, [wallpaper, 3d]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>iMac, [wallpaper, 3d]</figcaption>
</div>
</figure>
</div>
</div>

Coin Flip HTML / Javascript | (Help)

I've tried to make my code work with the example below but after multiple hours of trying I'm giving up... Could someone please help me put this all together so it will work fine?
var result,userchoice;
function resetAll(){
var resetHTML = '<div class="tail"><img src="coin_F.png" /></div><div class="head"><img src="coin_G.png" /></div>';
setTimeout(function(){
$('.coinBox').fadeOut('slow',function(){
$(this).html(resetHTML)
}).fadeIn('slow',function(){
$('#btnFlip').removeAttr('disabled');
});
},2500);
}
// Checking User Input
$(document).on('change','#userChoice', function(){
userchoice = $(this).val();
if(userchoice == "") {
$(this).parent('p').prepend("<span class='text text-danger'>Please select a coin side to play the game</span>")
$('#btnFlip').attr('disabled','disabled');
} else {
/**/
$('#btnFlip').removeAttr('disabled');
$(this).siblings('span').empty();
}
return userchoice;
});
// Final result declaration
function finalResult(result,userchoice){
var resFormat = '<h3>';
resFormat += '<span class="text text-primary">You choose : <u>'+userchoice+'</u></span> |';
resFormat += '<span class="text text-danger"> Result : <u>'+result+'</u></span>';
resFormat += '</h3>';
var winr = '<h2 class="text text-success" style="color: #49DF3E;">You Won!!</h2>';
var losr = '<h2 class="text text-danger" style="color: #c34f4f;">You Lost...</h2>';
if(result == userchoice){
$('.coinBox').append(resFormat+winr)
} else{
$('.coinBox').append(resFormat+losr)
}
}
// Button Click Actions
$(document).on('click','#btnFlip',function() {
if($('#userChoice').val() == "") return;
var flipr = $('.coinBox>div').addClass('flip');
var number = Math.floor(Math.random()*2);
$(this).attr('disabled','disabled');
setTimeout(function() {
flipr.removeClass('flip');
//result time
if(number) {
result = 'Global';
//alert('Head = '+number);
$('.coinBox').html('<img src="coin_G.png" /><h3 class="text-primary">Global</h3>');
finalResult(result,userchoice);
resetAll();
} else {
result = 'Fortune';
//alert('Tail = '+number);
$('.coinBox').html('<img src="coin_F.png" /><h3 class="text-primary">Fortune</h3>');
finalResult(result,userchoice);
resetAll();
}
},2000);
return false;
});
#wrapper
{
width: 100%;
height: auto;
min-height: 500px;
}
.btn
{
width: 12%;
background-color: #c34f4f;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 22px;
}
.btn:hover
{
background-color: #A64242;
}
input[type=submit]:hover {
background-color: #A64242;
}
.container
{
padding: 50px 0;
text-align: center;
}
h1
{
margin-bottom: 100px;
}
.head
{
margin-top: -205px;
}
.flip img{animation: flipIt 0.5s linear infinite;}
.head img
{
animation-delay: 0.25s;
}
#keyframes flipIt
{
0%{width: 0px;
height: 200px;}
25%{width: 200px;
height: 200px;}
50%{width: 0px;
height: 200px;}
100%{width: 0px;
height: 200px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Coin Flip | <span>Global or Fortune</span></h1>
</div>
<div class="col-lg-12">
<!--blank-->
<div class="col-lg-4"></div>
<!--coin-->
<div class="col-lg-4">
<div class="coinBox">
<div class="tail">
<img src="coin_F.png" />
</div>
<div class="head">
<img src="coin_G.png" />
</div>
</div>
</div>
<!--user form elements-->
<div class="col-lg-4 text-left">
<p>
<div class="form-control">
<button name="Global" id="userChoice">Global</button>
<button name="Fortune" id="userChoice">Fortune</button>
</div>
<p>
<button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button>
</p>
</div>
</div>
</div>
</div>
</div>
I tried to use this example but couldn't get it to work: https://jsfiddle.net/8jw1ogLd/
I have changed your fiddle:
https://jsfiddle.net/8jw1ogLd/6/
The only change is this:
$(this).addClass("disabled");
on 25-th line. Is this answer solves your problem?
Edit:
This is the fixed jsfiddle with your code:
https://jsfiddle.net/45t3th0n/34/

Categories

Resources