How can I stop element at the specific point while scrolling?
Here is my source code that I using.
body {
height: 100vh;
margin: 0;
padding: 0;
}
.s1, .s2, .s3 {
height: 100vh;
}
.s1 {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
}
.s2 {
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
border: 1px solid aqua;
}
.s3 {
background-color: beige;
}
.s1 .p1 {
position: fixed;
}
<html>
<body>
<div class="s1">
<p class="p1">TEST</p>
</div>
<div class="s2">
<p class="p2">STOP HERE</p>
</div>
<div class="s3">
</div>
</body>
</html>
Just simple code. I defined position: fixed to .s1's <p> tag.
So <p> always floating on center of screen while scrolling down or up.
While scrolling down, if .s1's <p> tag meet .s2's <p> tag, it have to stop.
Also if scrolling up, .s1's <p> tag have to move up.
I want to implement this issue with pure html/css/js.
But it is possible, it's ok to use library.
(Maybe it have to use parallax scrolling or other else..I don't know exactly)
Is there any solution here?
Thanks.
I have added a console log so that you can see when .s1 p touches .s2 p while scrolling.
window.onload = function() {
let s1P = document.querySelector('.s1 p');
let s2P = document.querySelector('.s2 p');
let scroll = () => {
let coordS1P = s1P.getBoundingClientRect();
let coordS2P = s2P.getBoundingClientRect();
// touched while scrolling down condition
if(coordS1P.bottom > coordS2P.top && coordS1P.top < coordS2P.bottom) console.log('touched!');
// touched while scrolling up condition
else if(coordS1P.bottom > coordS2P.top && coordS1P.top < coordS2P.bottom) console.log('touched!');
};
window.addEventListener('scroll', scroll, true);
}
body {
height: 100vh;
margin: 0;
padding: 0;
}
.s1, .s2, .s3 {
height: 100vh;
}
.s1 {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
}
.s2 {
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
border: 1px solid aqua;
}
.s3 {
background-color: beige;
}
.s1 .p1 {
position: fixed;
}
<html>
<body>
<div class="s1">
<p class="p1">TEST</p>
</div>
<div class="s2">
<p class="p2">STOP HERE</p>
</div>
<div class="s3">
</div>
</body>
</html>
You mean like this?
let stop = $('#stop').offset().top - $(window).innerHeight() / 2;
$(window).on('scroll', function(){
let depth = $(window).scrollTop();
if ( stop <= (depth) ) {
$('.p1').css('position', 'absolute');
$('#stop').text('TEST');
} else {
$('.p1').css('position', 'fixed');
$('#stop').text('');
}
});
body {
height: 100vh;
margin: 0;
padding: 0;
}
.s1, .s2, .s3 {
height: 100vh;
}
.s1 {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
}
.s2 {
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
border: 1px solid aqua;
}
.s3 {
background-color: beige;
}
.s1 .p1 {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s1">
<p class="p1">TEST</p>
</div>
<div class="s2">
<p class="p2" id="stop"></p>
</div>
<div class="s3"></div>
Related
Just made a simple div slider with navigation arrows. The div slider works just fine, except, I want some sort of CSS styling to be applied to the arrows.
That is, when a user clicks the left or right arrow, up to the last item, apply CSS styling telling the user they've reached the end of the slider.
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>
Simply check to see if you need to disable each button based on the position of the scroll. Then if there is a need to disable a button, add the disabled class to the button, otherwise remove it.
Future enhancements.
Remove the hardcoded 360 value for the scroll end. This should be calculated from the size of the carousel items and the width of the viewport.
Allow more than one carousel to work with the same code. This could be achieved by using a javascript class that would hold the elements inside an object, separate from other carousels.
See the demo:
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
let checkScroll = function() {
if (container.scrollLeft <= 0)
buttonLeft.classList.add("disabled");
else
buttonLeft.classList.remove("disabled");
if (container.scrollLeft >= 360)
buttonRight.classList.add("disabled");
else
buttonRight.classList.remove("disabled");
}
checkScroll();
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90;
checkScroll();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90;
checkScroll();
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
.slide_arrow.disabled {
opacity: 0.2;
cursor: auto !important;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>
a simple solution to this is to actually create a css class that defines the style of arrows when there are no more items and then just add/remove class based on current index of items
I have a simple menu and content div structure. The menu has no fixed size and can expand depending on its content. The content div underneath should take the available space and scroll its own content if overflowing. Unfortunately, flexbox now behaves in such a way that the content div, due to its flex:1 property, expands according to its content instead of scrolling the content.
Is there a way to preserve the dynamic sizes using flex:1 and also have the content of the content div scroll?
function toggleMenu() {
const menu = document.querySelector(".menu");
if(menu.classList.contains("open")) {
menu.querySelector(".text").innerHTML = "<p> small text </p>";
menu.classList.remove("open");
}else {
menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
menu.classList.add("open");
}
}
body {
padding: 0;
margin: 0;
background-color: #17141d;
display: flex;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
background-color: grey;
}
.menu {
background-color: blueviolet;
}
.content {
display: flex;
flex: 1;
background-color: aqua;
}
.segment-wrapper {
flex: 1;
display: flex;
background-color: red;
flex-direction: column;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
.segment {
height: 500px;
background-color: green;
border-radius: 5px;
border: solid 1px black;
width: 100%;
margin-bottom: 10px;
}
<div class="main">
<div class="menu open">
<div class="text"><h1>im the menu</h1></div>
<button onclick="toggleMenu()">Toggle</button>
</div>
<div class="content">
<div class="segment-wrapper">
<div class="segment">
</div>
<div class="segment">
</div>
<div class="segment">
</div>
</div>
</div>
</div>
you are missing
an height on .main to size it according to body or the viewport's height.
overflow on .content, so it overflows, unless you want .main to overflow (which body does already)
and finally flex-shrink:0; on .segment so it doesn't shrink :)
here an example of what i understood you were after:
function toggleMenu() {
const menu = document.querySelector(".menu");
if(menu.classList.contains("open")) {
menu.querySelector(".text").innerHTML = "<p> small text </p>";
menu.classList.remove("open");
}else {
menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
menu.classList.add("open");
}
}
body {
padding: 0;
margin: 0;
background-color: #17141d;
display: flex;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
background-color: grey;
max-height;100%;
}
.menu {
background-color: blueviolet;
}
.content {
display: flex;
flex: 1;
background-color: aqua;
overflow:auto;
}
.segment-wrapper {
flex: 1;
display: flex;
background-color: red;
flex-direction: column;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
.segment {
flex-shrink:0;
height: 500px;
background-color: green;
border-radius: 5px;
border: solid 1px black;
width: 100%;
margin-bottom: 10px;
}
<div class="main">
<div class="menu open">
<div class="text"><h1>im the menu</h1></div>
<button onclick="toggleMenu()">Toggle</button>
</div>
<div class="content">
<div class="segment-wrapper">
<div class="segment">
</div>
<div class="segment">
</div>
<div class="segment">
</div>
</div>
</div>
</div>
I want to change the div size when someone clicks the corresponding button. For example, clicking the small button will make the div width 30%, and clicking the medium button will make the div width 50%.
I found this Javascript: Change Div size on button click, but it's not working for me because I don't know his HTML structure, and he is using ID instead of class.
Below is my code. Please help me:
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 300px;
}
.Button_Container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Medium {
margin: 0 15px;
}
.Content_Container {
width: 100%;
height: 150px;
background-color: blue;
margin-top: 30px;
}
<div class="Button_Container">
<button class=">FULL" onclick="myFunction">FULL</button>
<button class="Medium" onclick="myFunction">Medium</button>
<button class="Small" onclick="myFunction">Small</button>
</div>
<div class="Content_Container"></div>
function myFunction(width){
var all = document.getElementsByClassName('Content_Container');
for (var i = 0; i < all.length; i++) {
all[i].style.width = width;
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 300px;
}
.Button_Container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Medium {
margin: 0 15px;
}
.Content_Container {
width: 100%;
height: 150px;
background-color: blue;
margin-top: 30px;
}
<div class="Button_Container">
<button class=">FULL" onclick="myFunction('100%')">FULL</button>
<button class="Medium" onclick="myFunction('70%')">Medium</button>
<button class="Small" onclick="myFunction('50%')">Small</button>
</div>
<div class="Content_Container"></div>
I am creating a battleship game for my next project to learn javascript and I am attempting to create divs to fill up a container wrapper. I do not want the divs to overflow, only to fill up the remaining space until it is filled. How do I test for the empty space remaining within a div to continue adding in my loop until the container is filled?
My container I am trying to fill is the #wrapper. My loop in javascript is creating the divs. I want to create a condition for the loop to stop filling when the container is full (i = 0; i < ?; i++). How do I test for this?
const body = document.querySelector('body');
const wrapper = document.querySelector('#wrapper')
const box = document.getElementsByClassName('.box');
const div = document.querySelector('div');
for (i = 0; i < 250; i++) {
let div = document.createElement('div');
div.classList = 'squares';
wrapper.appendChild(div);
}
const destroyer1 = document.querySelector('#destroyer1');
const destroyer2 = document.querySelector('#destroyer2');
destroyer1.addEventListener("drag", function(event) {}, false);
destroyer1.addEventListener("dragstart", function(event) {}, false);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(0, 0, 0);
}
h1 {
color: white;
}
#messageBoard {
color: white;
}
#shipContainer {
width: 100%;
height: 15rem;
top: 0;
left: 0;
background-color: rgb(41, 25, 25);
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#wrapper {
width: 100%;
height: 30rem;
padding: 5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.squares {
border: 1px solid blue;
width: 5%;
height: 5%;
}
.destroyer {
border: 1px solid blue;
width: 30%;
height: 30%;
display: flex;
flex-direction: row;
}
.destroyerSquare {
border: 1px solid orange;
width: 33%;
height: 100%;
}
<h1>BattleShip!</h1>
<p id="messageBoard">Place Your Ships!</p>
</div>
<div id="shipContainer" draggable="true">
<div class='destroyer' id='destroyer1'>
<div class='destroyerSquare'></div>
<div class='destroyerSquare'></div>
<div class='destroyerSquare'></div>
</div>
<div class='destroyer' id='destroyer2'>
<div class='destroyerSquare'></div>
<div class='destroyerSquare'></div>
<div class='destroyerSquare'></div>
</div>
<div class="battleship"></div>
<div class="cruiser"></div>
<div class="spyShip"></div>
</div>
<div id="wrapper">
</div>
So I have the following CSS and HTML for a menu bar:
<header>
<div id="name">Unnamed Masterpiece</div>
<div id="close" onclick="closeWindow()">✕</div>
<div id="min" onclick="minWindow()">―</div>
</header>
header {
display: flex;
justify-content: flex-start;
-webkit-app-region: drag;
background: #292929;
flex-direction: row-reverse;
}
Which, with the close and minimize sign individually styled gives me the following:
However I would like the title to be on the far left and centered.
How would I do this?
Without changing the HTML or CSS you already have, you can add this to you CSS:
#name {
flex: 1;
text-align: center;
order: 1;
}
#close, #min {
order: 0;
}
It will change the order of elements, make the text grow and also center it.
You can try this:
header {
display: flex;
justify-content: flex-start;
-webkit-app-region: drag;
background: #292929;
align-items: center;
}
<header>
<div id="name" style="width: 100%;">Unnamed Masterpiece</div>
<div id="min" onclick="minWindow()" style="">―</div>
<div id="close" onclick="closeWindow()">✕</div>
</header>
Hi You can use like this. I suggest you don't use inline style and by the id style.
<div className="window-header">
<div className="left-side">
Logo - icon
</div>
<div className="draggable-bar" id="titleBar">
Title name or names
</div>
<div className="right-side">
<div id="min-btn" className="btn-box">
<div className="min"></div>
</div>
<div id="max-btn" className="btn-box max">
<div className="maxmize"></div>
</div>
<div id="close-btn" className="btn-box">
<div className="close"></div>
</div>
</div>
</div>
Style codes =>
.window-header {
display: flex;
}
.window-header .left-side, .window-header .draggable-bar, .window-header .right-side {
display: flex;
flex: 1;
}
.window-header .draggable-bar {
-webkit-app-region: drag;
flex-grow: 34;
flex-basis: 0;
align-items: center;
justify-content: center;
color: #c3c3c3;
}
.window-header .draggable-bar:hover {
cursor: move;
}
.window-header .left-side img {
display: flex;
width: 15px;
height: 24px;
margin-top: 3px;
margin-left: 4px;
}
.window-header .left-side .title {
align-items: center;
display: flex;
color: #999;
padding-left: 5px;
user-select: none;
}
.window-header .right-side {
justify-items: flex-end;
justify-content: flex-end;
display: flex;
}
.window-header .right-side .btn-box {
display: inline-flex;
justify-content: center;
width: 30px;
height: 30px;
}
.window-header .right-side .btn-box:hover {
background-color: #797979;
}
.window-header .right-side .btn-box:last-child:hover {
background-color: red;
}
.window-header .right-side .btn-box .min {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fTwvc3R5bGU+PC9kZWZzPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiLz48L3N2Zz4=);
width: 15px;
height: 15px;
background-repeat: no-repeat;
position: relative;
top: 50%;
}
.window-header .right-side .btn-box.max .maxmize {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5hLC5je2ZpbGw6bm9uZTt9LmF7c3Ryb2tlOiNkM2QzZDM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fS5ie3N0cm9rZTpub25lO308L3N0eWxlPjwvZGVmcz48ZyBjbGFzcz0iYSI+PHJlY3QgY2xhc3M9ImIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgcng9IjUiLz48cmVjdCBjbGFzcz0iYyIgeD0iMSIgeT0iMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iNCIvPjwvZz48L3N2Zz4=);
width: 13px;
height: 13px;
background-repeat: no-repeat;
position: relative;
top: 25%;
}
.window-header .right-side .btn-box.unmax .maxmize {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSA0MyI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9LmIsLmN7c3Ryb2tlOm5vbmU7fS5je2ZpbGw6I2QzZDNkMzt9PC9zdHlsZT48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwOCAtMTkyKSI+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxNyAxOTIpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVIMTlWMTguMzMzYTQuMTA2LDQuMTA2LDAsMCwwLS4yLTEuNTU5LDIuMjUzLDIuMjUzLDAsMCwwLS44NTgtLjk3Nyw0LjQzNyw0LjQzNywwLDAsMC0yLjYzNC0uOEgwVjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAxMi45OTg2NTkxMzM5MTExMyBMIDE1LjI5NzA5NTI5ODc2NzA5IDEyLjk5ODY1OTEzMzkxMTEzIEMgMTUuMzA4MDE4Njg0Mzg3MjEgMTIuOTk4NTUwNDE1MDM5MDYgMTUuMzIyMjcwMzkzMzcxNTggMTIuOTk4NDYwNzY5NjUzMzIgMTUuMzM5Njk5NzQ1MTc4MjIgMTIuOTk4NDYwNzY5NjUzMzIgQyAxNS45MDQxNzA5ODk5OTAyMyAxMi45OTg0NjA3Njk2NTMzMiAxNy44MDA2MDE5NTkyMjg1MiAxMy4wODcwNzgwOTQ0ODI0MiAxOS4xNDYzMDEyNjk1MzEyNSAxNC4xOTM2OTEyNTM2NjIxMSBDIDE5LjUyMDg4MTY1MjgzMjAzIDE0LjQ1MDA5NjEzMDM3MTA5IDIwLjI0OTQ0ODc3NjI0NTEyIDE1LjA0NDU4OTk5NjMzNzg5IDIwLjY0OTU1OTAyMDk5NjA5IDE2LjAwNjAzMTAzNjM3Njk1IEMgMjEuMDM0MzEzMjAxOTA0MyAxNi45MzA1NjI5NzMwMjI0NiAyMS4wMjI2MjQ5Njk0ODI0MiAxNy45ODcwMTY2Nzc4NTY0NSAyMSAxOC4zOTU1MzgzMzAwNzgxMyBMIDIxIDI4IEwgMjUgMjggQyAyNi42NTQyMDkxMzY5NjI4OSAyOCAyOCAyNi42NTQyMDkxMzY5NjI4OSAyOCAyNSBMIDI4IDUgQyAyOCAzLjM0NTc5MDg2MzAzNzEwOSAyNi42NTQyMDkxMzY5NjI4OSAyIDI1IDIgTCA1IDIgTSA1IDAgTCAyNSAwIEMgMjcuNzYxNDE5Mjk2MjY0NjUgMCAzMCAyLjIzODU4MDcwMzczNTM1MiAzMCA1IEwgMzAgMjUgQyAzMCAyNy43NjE0MTkyOTYyNjQ2NSAyNy43NjE0MTkyOTYyNjQ2NSAzMCAyNSAzMCBMIDE5IDMwIEwgMTkgMTguMzMzMzMwMTU0NDE4OTUgQyAxOSAxOC4zMzMzMzAxNTQ0MTg5NSAxOS4wNjY4Njk3MzU3MTc3NyAxNy40MDgzNDk5OTA4NDQ3MyAxOC44MDMwNzAwNjgzNTkzOCAxNi43NzQ0NTk4Mzg4NjcxOSBDIDE4LjUzOTI3MDQwMTAwMDk4IDE2LjE0MDU2OTY4Njg4OTY1IDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIEMgMTcuMDkzMTE4NjY3NjAyNTQgMTUuMDI3OTQ4Mzc5NTE2NiAxNS41NjgyOTY0MzI0OTUxMiAxNC45OTg0NTY5NTQ5NTYwNSAxNS4zMzk2OTQ5NzY4MDY2NCAxNC45OTg0NTY5NTQ5NTYwNSBDIDE1LjMyMDczMjExNjY5OTIyIDE0Ljk5ODQ1Njk1NDk1NjA1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IEwgMCAxNC45OTg2NjAwODc1ODU0NSBDIDAgMTQuOTk4NjYwMDg3NTg1NDUgMCAxMS40Njc5NTA4MjA5MjI4NSAwIDUgQyAwIDIuMjM4NTgwNzAzNzM1MzUyIDIuMjM4NTgwNzAzNzM1MzUyIDAgNSAwIFoiLz48L2c+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwOCAyMDUpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVINWE1LDUsMCwwLDEtNS01VjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAyNSBDIDIgMjYuNjU0MjA5MTM2OTYyODkgMy4zNDU3OTA4NjMwMzcxMDkgMjggNSAyOCBMIDI1IDI4IEMgMjYuNjU0MjA5MTM2OTYyODkgMjggMjggMjYuNjU0MjA5MTM2OTYyODkgMjggMjUgTCAyOCA1IEMgMjggMy4zNDU3OTA4NjMwMzcxMDkgMjYuNjU0MjA5MTM2OTYyODkgMiAyNSAyIEwgNSAyIE0gNSAwIEwgMjUgMCBDIDI3Ljc2MTQxOTI5NjI2NDY1IDAgMzAgMi4yMzg1ODA3MDM3MzUzNTIgMzAgNSBMIDMwIDI1IEMgMzAgMjcuNzYxNDE5Mjk2MjY0NjUgMjcuNzYxNDE5Mjk2MjY0NjUgMzAgMjUgMzAgTCA1IDMwIEMgMi4yMzg1ODA3MDM3MzUzNTIgMzAgMCAyNy43NjE0MTkyOTYyNjQ2NSAwIDI1IEwgMCA1IEMgMCAyLjIzODU4MDcwMzczNTM1MiAyLjIzODU4MDcwMzczNTM1MiAwIDUgMCBaIi8+PC9nPjwvZz48L3N2Zz4=);
width: 15px;
height: 15px;
background-repeat: no-repeat;
position: relative;
top: 25%;
}
.window-header .right-side .btn-box .close {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMy40MTQgMTMuNDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQyLjc5MyAtMTgyLjc5MykiPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMTIiIHkyPSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQzLjUgMTgzLjUpIi8+PGxpbmUgY2xhc3M9ImEiIHgxPSIxMiIgeTI9IjEyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDMuNSAxODMuNSkiLz48L2c+PC9zdmc+);
width: 12px;
height: 12px;
background-repeat: no-repeat;
position: relative;
position: relative;
top: 30%;
}
This is JS code
function init() {
const window = remote.getCurrentWindow();
document.getElementById("min-btn").addEventListener("click", function (e) {
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
if (!window.isMaximized()) {
this.classList.remove('max')
this.classList.add('unmax')
window.maximize();
} else {
this.classList.remove('unmax')
this.classList.add('max')
window.unmaximize();
}
});
document.getElementById("close-btn").addEventListener("click", function (e) {
window.close();
});
//Listened to the application window sizes and if sizes changed, size icon is changed.
if (remote.getCurrentWindow().isMaximized()) {
document.getElementById("max-btn").classList.remove('max')
document.getElementById("max-btn").classList.add('unmax')
} else {
document.getElementById("max-btn").classList.remove('unmax')
document.getElementById("max-btn").classList.add('max')
}
remote.getCurrentWindow().on('resize', _.debounce(function () {
if (remote.getCurrentWindow().isMaximized()) {
document.getElementById("max-btn").classList.remove('max')
document.getElementById("max-btn").classList.add('unmax')
} else {
document.getElementById("max-btn").classList.remove('unmax')
document.getElementById("max-btn").classList.add('max')
}
}, 100))
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};