javascripthtmlcssscrollbar
There’s a lateral movement when the vertical scrollbar is activated
code: https://jsfiddle.net/0tgo9ud8/
How do I prevent slight shift sideways when the vertical scrollbar kicks in?
1st: Launch the code snippet in full screen mode.
Next: Click the exit button that fades in to see the shift occur.
How do I keep everything aligned at all times?
Before the scroll bar kicks in?
Before clicking the exit button is the 1st image.
After is the 2nd image.
What would need to be adjusted in the code to fix that?
That is all I am trying to do here.
It seems nothing I have tried has worked.
And ideas on what will?
You see the shift occur after the exit button is clicked, right?
How would I keep everything aligned?
So there is no shift.
Image 2 example:
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function () {
const splashScreen = document.querySelector(".splash-screen");
splashScreen.classList.add("hide");
const panel = document.querySelector(".panel");
panel.classList.add("slide");
const wrap = document.querySelector(".wrap");
splashScreen.addEventListener("transitionend", function () {
splashScreen.style.pointerEvents = "none";
wrap.classList.remove("hide");
});
const closeButton = document.querySelector(".exitInitial");
panel.addEventListener("transitionend", function () {
closeButton.classList.add("visible");
});
};
const videoPlayer = (function makeVideoPlayer() {
let players = [];
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) {
const player = event.target;
player.setVolume(100);
if (player === players[0]) {
shufflePlaylist(player);
}
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerStateChange(event) {
const eventPlayer = event.target;
if (eventPlayer !== players[0]) {
if (event.data === 1) {
players.forEach(function pauseOtherVideos(player) {
const hasIframe = player.getIframe();
const isDifferentPlayer = player !== eventPlayer;
const isPlaying = player.getPlayerState() === 1;
if (hasIframe && isDifferentPlayer && isPlaying) {
player.pauseVideo();
console.log("pause");
}
});
}
}
}
function addPlayer(video, playerOptions) {
let id = video.dataset.id;
if (id.startsWith("PL")) {
playerOptions.playerVars = playerOptions.playerVars || {};
playerOptions.playerVars.listType = "playlist";
playerOptions.playerVars.list = id;
} else {
playerOptions.videoId = id;
}
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
players.push(new YT.Player(video, playerOptions));
}
return {
addPlayer,
players
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
//playlist: 1
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
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(parent, playerOptions) {
const wrapper = parent;
return function () {
initPlayer(wrapper, playerOptions);
};
}
function initPlayer(wrapper, playerOptions) {
createPlayer(wrapper, playerOptions);
}
return {
adder: playerAdder
};
}());
const loadPlayer = (function uiLoadPlayer() {
function addPlayer(playerSelector, playerOptions) {
const parent = document.querySelector(playerSelector).parentElement;
const callback = managePlayer.adder(parent, playerOptions);
callback();
}
return {
add: addPlayer
};
}());
function onYouTubeIframeAPIReady() {
// Initialize the first player
loadPlayer.add(".playInitial", {
playerVars: {
loop: 1,
playlist: "s24NT7TFkUw"
}
});
}
(function managePageA() {
function handleModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.remove("open");
}
function addTemplateToContainers() {
const template = document.getElementById("image-templateA");
const curtainContainer = document.querySelector(".panel-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function (container) {
container.appendChild(template.content.cloneNode(true));
});
}
function showExit(panelSelector, exitSelector) {
const panel = document.querySelector(panelSelector);
const closeButton = document.querySelector(exitSelector);
panel.addEventListener("transitionend", function () {
closeButton.classList.add("visible");
});
}
function resetPage() {
handleModal("myModal");
//addTemplateToContainers();
showExit(".panel-container", ".exit");
}
function modalClickHandler() {
// Destroy the first player if it exists
if (videoPlayer.players[0]) {
videoPlayer.players[0].destroy();
}
resetPage();
window.scrollTo(0, 0);
// Initialize the rest of the players when the modal is clicked
loadPlayer.add(".playa", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playb", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playc", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playd", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
loadPlayer.add(".playe", {
videoId: "CHahce95B1g"
});
console.log("hit");
// myModal.classList.remove("open");
}
const closeModal = document.querySelector(".exitInitial");
closeModal.addEventListener("click", modalClickHandler);
}());
(function managePageB() {
function handleModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "none";
modal.classList.add("open");
modal.offsetWidth = modal.offsetWidth;
modal.classList.remove("open");
}
function addTemplateToContainers() {
const template = document.getElementById("image-templateB");
const curtainContainer = document.querySelector(".curtain-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function (container) {
container.appendChild(template.content.cloneNode(true));
});
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showCurtain(curtainSelector) {
const curtain = document.querySelector(curtainSelector);
curtain.classList.remove("hide");
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage() {
handleModal("myModal");
addTemplateToContainers();
hideContainer(".containerA");
showCurtain(".curtain-container");
showContainer(".containerB");
}
function exitClickHandler() {
videoPlayer.players.forEach(function (player) {
player.destroy();
});
resetPage();
window.scrollTo(0, 0);
// Initialize the rest of the players when exit is clicked
loadPlayer.add(".playf", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playg", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playh", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playi", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
loadPlayer.add(".playj", {
videoId: "CHahce95B1g"
});
console.log("hit");
}
const exitButton = document.querySelector(".exit");
exitButton.addEventListener("click", exitClickHandler);
}());svg {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
.modal {
display: none;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 3;
/* Sit on top */
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/* Enable scroll if needed */
background-color: transparent;
}
.modal-content {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
padding: 1px;
}
.modal-content::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
}
.modal-content:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
z-index: 2;
pointer-events: none;
/* just in case*/
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: #222;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px 0;
}
.containerA {
}
.containerB {
}
.container {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.exitInitial {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exitInitial.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.exitInitial::before,
.exitInitial::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitInitial::after {
transform: rotate(-45deg);
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 4;
inset: 0 0 0 0;
background: none;
opacity: 1; /* Fully visible */
cursor: default;
transition: opacity 400ms ease-in;
}
.splash-screen.hide {
opacity: 0; /* Fully transparent */
transition-delay: 400ms;
cursor: default;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 2;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 3s;
}
.panel-left.slide {
left: 0;
}
.panel-right.slide {
right: 0;
}
.panel-left::before,
.panel-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-color: transparent;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
}
.panel-right::before {
left: -100%;
}
.modal:not(.open) ~ .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modal:not(.open) ~ .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
.curtain-left,
.curtain-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 2;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 3s;
}
.curtain-left.slide {
left: 0;
}
.curtain-right.slide {
right: 0;
}
.curtain-left::before,
.curtain-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-color: black;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
}
.curtain-right::before {
left: -100%;
}
.curtain-container.hide {
display: block;
opacity: 0;
pointer-events: none;
}
.curtain-container:not(.hide) > .curtain-left {
transform: translateX(calc(-100% - 1px));
/*visibility: visible;*/
pointer-events: initial;
}
.curtain-container:not(.hide) > .curtain-right {
transform: translateX(calc(100% + 1px));
/*visibility: visible;*/
pointer-events: initial;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
position: absolute;
left: 0;
z-index: 2;
}
.panel-right .inner {
left: -100%;
}
.curtain-right .inner {
left: -100%;
}
.container2 {
max-width: 510px;
border: 1px solid #ccc;
box-sizing: border-box;
max-height: 100vh;
aspect-ratio: 1;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.blog-pager {
max-width: 674px;
height: 52px;
box-sizing: border-box;
border: 1px solid #0059dd;
margin: 30px auto;
background: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.exit {
position: relative;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exit.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.exit::before,
.exit::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.exitB a {
position: relative;
width: 37px;
height: 37px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
}
.exitB a::before,
.exitB a::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitB a::after {
transform: rotate(-45deg);
}
.footer {
box-sizing: border-box;
border-top: 1px solid #1155cc;
background: #121212;
height: 108px;
}
.footer {
margin: 0 -8px;
}
.wrap.hide {
display: none;
}
.containerB.hide {
display: none;
}
.containerA.hide {
display: none;
}<div class="splash-screen">
</div>
<div id="myModal" class="modal open">
<div class="modal-content">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame" data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="panel">
</div>
</div>
<div class="playInitial remove"></div>
</div>
</div>
<!-- end modal -->
<template id="image-templateA">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>
<div class="panel-container">
<div class="slide panel-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide panel-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="outer-container">
<div class="containerA ">
<div class="container">
<div class="ratio-keeper ">
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
<template id="image-templateB">
<img src="https://i.imgur.com/lNH6CGY.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/8bPDWNh.png" alt="Image 2">
<img src="https://i.imgur.com/HgKNKxe.png" alt="Image 3">
<img src="https://i.imgur.com/nCRNnjS.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/1SJgqB8.png" alt="Image 5">
</template>
<div class="curtain-container hide">
<div class="slide curtain-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="containerB hide">
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager">
<div class="exitB">
<a href="#" title="Exit" aria-label="Close"></a> </div>
</div>
</div>
<div class="footer ">
<div class="tyJCtd mGzaTb Depvyb baZpAe">
<div class="zfr3Q CDt4Ke ">
<a class="XqQF9c" href="#" target="_blank">
<span class="text1">text</span>
</a>
<span class="C9DxTc"> </span>
<span class="text2">|</span>
<span class="C9DxTc"> </span>
<a class="XqQF9c" href="#" target="_blank">
<span class="text3">text</span>
</a>
<span class="C9DxTc"> </span>
<span class="text4">|</span>
<span class="C9DxTc"> </span>
<a class="XqQF9c" href="#" target="_blank">
<span class="text5">text</span><span class="text6">text</span>
</a>
</div>
<div class="zfr3Q CDt4Ke">
<span class="jgG6ef text7">text</span>
</div>
<br><br>
<div class="zfr3Q CDt4Ke">
<span class="text8">text</span>
</div>
</div>
</div>
</div>
<script>
const template = document.getElementById("image-templateA");
const curtainContainer = document.querySelector(".panel-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function (container) {
container.appendChild(template.content.cloneNode(true));
});
</script>Solution
The "slight shift" you experienced is simply caused by the scrollbar, so when the modal is opened, the scrollbar of <body> is hidden, and it will not be hidden until the modal is closed.
The easiest way to solve this is by removing the overflow: hidden from the body:has(.modal.open) selector:
body:has(.modal.open) {
overflow: hidden; /* remove only this or along with the selector */
}
EDIT
Since OP wants to keep the body's overflow hidden, we could make the scrollbar hidden instead and show it until the panel opening ended.
First we can add this CSS to prevent layout shift from happening when scrollbar is toggled on/off:
.outer-container {
padding-left: calc(100vw - 100%);
}
Then we can add this CSS to hide the scrollbar:
.hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
Then we can add the hide-scrollbar to <html> tag when the exitInitial is clicked:
function modalClickHandler() {
document.getElementsByTagName('html')[0].classList.add('hide-scrollbar'); // add this
// Destroy the first player if it exists
...
}
Then finally, we can remove the class to show the scrollbar again once the transition of the panel opening ends:
const panelLeft = document.querySelector(".panel-left");
panelLeft.addEventListener("transitionend", function() {
document.getElementsByTagName('html')[0].classList.remove('hide-scrollbar');
});
Result:
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
const splashScreen = document.querySelector(".splash-screen");
splashScreen.classList.add("hide");
const panel = document.querySelector(".panel");
panel.classList.add("slide");
const wrap = document.querySelector(".wrap");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
wrap.classList.remove("hide");
});
const closeButton = document.querySelector(".exitInitial");
panel.addEventListener("transitionend", function() {
closeButton.classList.add("visible");
});
const panelLeft = document.querySelector(".panel-left");
panelLeft.addEventListener("transitionend", function() {
document.getElementsByTagName('html')[0].classList.remove('hide-scrollbar');
});
};
const videoPlayer = (function makeVideoPlayer() {
let players = [];
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) {
const player = event.target;
player.setVolume(100);
if (player === players[0]) {
shufflePlaylist(player);
}
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerStateChange(event) {
const eventPlayer = event.target;
if (eventPlayer !== players[0]) {
if (event.data === 1) {
players.forEach(function pauseOtherVideos(player) {
const hasIframe = player.getIframe();
const isDifferentPlayer = player !== eventPlayer;
const isPlaying = player.getPlayerState() === 1;
if (hasIframe && isDifferentPlayer && isPlaying) {
player.pauseVideo();
console.log("pause");
}
});
}
}
}
function addPlayer(video, playerOptions) {
let id = video.dataset.id;
if (id.startsWith("PL")) {
playerOptions.playerVars = playerOptions.playerVars || {};
playerOptions.playerVars.listType = "playlist";
playerOptions.playerVars.list = id;
} else {
playerOptions.videoId = id;
}
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
players.push(new YT.Player(video, playerOptions));
}
return {
addPlayer,
players
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
//playlist: 1
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
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(parent, playerOptions) {
const wrapper = parent;
return function() {
initPlayer(wrapper, playerOptions);
};
}
function initPlayer(wrapper, playerOptions) {
createPlayer(wrapper, playerOptions);
}
return {
adder: playerAdder
};
}());
const loadPlayer = (function uiLoadPlayer() {
function addPlayer(playerSelector, playerOptions) {
const parent = document.querySelector(playerSelector).parentElement;
const callback = managePlayer.adder(parent, playerOptions);
callback();
}
return {
add: addPlayer
};
}());
function onYouTubeIframeAPIReady() {
// Initialize the first player
loadPlayer.add(".playInitial", {
playerVars: {
loop: 1,
playlist: "s24NT7TFkUw"
}
});
}
(function managePageA() {
function handleModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.remove("open");
}
function addTemplateToContainers() {
const template = document.getElementById("image-templateA");
const curtainContainer = document.querySelector(".panel-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
function showExit(panelSelector, exitSelector) {
const panel = document.querySelector(panelSelector);
const closeButton = document.querySelector(exitSelector);
panel.addEventListener("transitionend", function() {
closeButton.classList.add("visible");
});
}
function resetPage() {
handleModal("myModal");
//addTemplateToContainers();
showExit(".panel-container", ".exit");
}
function modalClickHandler() {
document.getElementsByTagName('html')[0].classList.add('hide-scrollbar');
// Destroy the first player if it exists
if (videoPlayer.players[0]) {
videoPlayer.players[0].destroy();
}
resetPage();
window.scrollTo(0, 0);
// Initialize the rest of the players when the modal is clicked
loadPlayer.add(".playa", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playb", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playc", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playd", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
loadPlayer.add(".playe", {
videoId: "CHahce95B1g"
});
console.log("hit");
// myModal.classList.remove("open");
}
const closeModal = document.querySelector(".exitInitial");
closeModal.addEventListener("click", modalClickHandler);
}());
(function managePageB() {
function handleModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "none";
modal.classList.add("open");
modal.offsetWidth = modal.offsetWidth;
modal.classList.remove("open");
}
function addTemplateToContainers() {
const template = document.getElementById("image-templateB");
const curtainContainer = document.querySelector(".curtain-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showCurtain(curtainSelector) {
const curtain = document.querySelector(curtainSelector);
curtain.classList.remove("hide");
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage() {
handleModal("myModal");
addTemplateToContainers();
hideContainer(".containerA");
showCurtain(".curtain-container");
showContainer(".containerB");
}
function exitClickHandler() {
videoPlayer.players.forEach(function(player) {
player.destroy();
});
resetPage();
window.scrollTo(0, 0);
// Initialize the rest of the players when exit is clicked
loadPlayer.add(".playf", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playg", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playh", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playi", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
loadPlayer.add(".playj", {
videoId: "CHahce95B1g"
});
console.log("hit");
}
const exitButton = document.querySelector(".exit");
exitButton.addEventListener("click", exitClickHandler);
}());svg {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal {
display: none;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 3;
/* Sit on top */
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/* Enable scroll if needed */
background-color: transparent;
}
.modal-content {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
padding: 1px;
}
.modal-content::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
}
.modal-content:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
z-index: 2;
pointer-events: none;
/* just in case*/
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: #222;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px 0;
}
.containerA {}
.containerB {}
.container {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient( 45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient( -45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.exitInitial {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exitInitial.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.exitInitial::before,
.exitInitial::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitInitial::after {
transform: rotate(-45deg);
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 4;
inset: 0 0 0 0;
background: none;
opacity: 1;
/* Fully visible */
cursor: default;
transition: opacity 400ms ease-in;
}
.splash-screen.hide {
opacity: 0;
/* Fully transparent */
transition-delay: 400ms;
cursor: default;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 2;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 3s;
}
.panel-left.slide {
left: 0;
}
.panel-right.slide {
right: 0;
}
.panel-left::before,
.panel-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-color: transparent;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
}
.panel-right::before {
left: -100%;
}
.modal:not(.open)~.panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modal:not(.open)~.panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
.curtain-left,
.curtain-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 2;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 3s;
}
.curtain-left.slide {
left: 0;
}
.curtain-right.slide {
right: 0;
}
.curtain-left::before,
.curtain-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-color: black;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
}
.curtain-right::before {
left: -100%;
}
.curtain-container.hide {
display: block;
opacity: 0;
pointer-events: none;
}
.curtain-container:not(.hide)>.curtain-left {
transform: translateX(calc(-100% - 1px));
/*visibility: visible;*/
pointer-events: initial;
}
.curtain-container:not(.hide)>.curtain-right {
transform: translateX(calc(100% + 1px));
/*visibility: visible;*/
pointer-events: initial;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
position: absolute;
left: 0;
z-index: 2;
}
.panel-right .inner {
left: -100%;
}
.curtain-right .inner {
left: -100%;
}
.container2 {
max-width: 510px;
border: 1px solid #ccc;
box-sizing: border-box;
max-height: 100vh;
aspect-ratio: 1;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.blog-pager {
max-width: 674px;
height: 52px;
box-sizing: border-box;
border: 1px solid #0059dd;
margin: 30px auto;
background: linear-gradient( 45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient( -45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.exit {
position: relative;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exit.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.exit::before,
.exit::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.exitB a {
position: relative;
width: 37px;
height: 37px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
}
.exitB a::before,
.exitB a::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitB a::after {
transform: rotate(-45deg);
}
.footer {
box-sizing: border-box;
border-top: 1px solid #1155cc;
background: #121212;
height: 108px;
}
.footer {
margin: 0 -8px;
}
.wrap.hide {
display: none;
}
.containerB.hide {
display: none;
}
.containerA.hide {
display: none;
}
.outer-container {
padding-left: calc(100vw - 100%);
}
.hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}<div class="splash-screen">
</div>
<div id="myModal" class="modal open">
<div class="modal-content">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame" data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="panel">
</div>
</div>
<div class="playInitial remove"></div>
</div>
</div>
<!-- end modal -->
<template id="image-templateA">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>
<div class="panel-container">
<div class="slide panel-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide panel-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="outer-container">
<div class="containerA ">
<div class="container">
<div class="ratio-keeper ">
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
<template id="image-templateB">
<img src="https://i.imgur.com/lNH6CGY.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/8bPDWNh.png" alt="Image 2">
<img src="https://i.imgur.com/HgKNKxe.png" alt="Image 3">
<img src="https://i.imgur.com/nCRNnjS.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/1SJgqB8.png" alt="Image 5">
</template>
<div class="curtain-container hide">
<div class="slide curtain-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="containerB hide">
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager">
<div class="exitB">
<a href="#" title="Exit" aria-label="Close"></a>
</div>
</div>
</div>
<div class="footer ">
<div class="tyJCtd mGzaTb Depvyb baZpAe">
<div class="zfr3Q CDt4Ke ">
<a class="XqQF9c" href="#" target="_blank">
<span class="text1">text</span>
</a>
<span class="C9DxTc"> </span>
<span class="text2">|</span>
<span class="C9DxTc"> </span>
<a class="XqQF9c" href="#" target="_blank">
<span class="text3">text</span>
</a>
<span class="C9DxTc"> </span>
<span class="text4">|</span>
<span class="C9DxTc"> </span>
<a class="XqQF9c" href="#" target="_blank">
<span class="text5">text</span><span class="text6">text</span>
</a>
</div>
<div class="zfr3Q CDt4Ke">
<span class="jgG6ef text7">text</span>
</div>
<br><br>
<div class="zfr3Q CDt4Ke">
<span class="text8">text</span>
</div>
</div>
</div>
</div>
<script>
const template = document.getElementById("image-templateA");
const curtainContainer = document.querySelector(".panel-container");
const containers = curtainContainer.querySelectorAll(".container2");
containers.forEach(function(container) {
container.appendChild(template.content.cloneNode(true));
});
</script>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices