Search code examples
javascripthtmlcsslinuxwindow

JavaScript Maximize onclick

I want to make a website which looks like a cmd. It's basically done but I think it would looks so much better if I add one more feature. I want to make that, when you click onto the maximize button the cmd should be maximized. It's all done except the thing, when you click again the maximize button it won't get the default size back. Any idea how to fix it?

demonstrate the problem

Code: (I tried to make it in if-else and a do-while statement but not really worked.)

function maxiMize() {
    
    var maximize = document.getElementById("maximize");
    var term_head = document.getElementById("term_head");
    var terminal_main = document.getElementById("terminal_main");
    var main_header = document.getElementById("main_header");
    var x = 0;

    if (maximize.style.height = "800px") {
        terminal_main.style.width = "auto";
        terminal_main.style.height = "100%";
        terminal_main.style.margin = "0";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "0";
        document.getElementById('term_head').style.MozBorderRadius = "0";
        main_header.style.position = "relative";
        main_header.style.width = "99.999%";
        document.body.style.background = "#000";
        x = 1;
    } else if (maximize.style.height != "800px") {
        terminal_main.style.width = "auto";
        terminal_main.style.margin = "0 15%";
        terminal_main.style.height = "800px";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "15px";
        document.getElementById('term_head').style.MozBorderRadius = "15px";
        main_header.style.position = "fixed";
        main_header.style.width = "100%";
        document.body.style.background = "#333";
        x = 0;
    }/*
    do {
        terminal_main.style.width = "auto";
        terminal_main.style.height = "100%";
        terminal_main.style.margin = "0";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "0";
        document.getElementById('term_head').style.MozBorderRadius = "0";
        main_header.style.position = "relative";
        main_header.style.width = "99.999%";
        document.body.style.background = "#000";
        x = 1;
    }while(x !=1); */

}
  1. List item
Solution

  • actually instead of doing all this u could do better than this using classes attaching and removing no headache at all, but i'm assuming the terminal_main is the parent of them all

     var maximize = document.getElementById("maximize"),
    term_head = document.getElementById("term_head"),
    terminal_main = document.getElementById("terminal_main"),
     main_header = document.getElementById("main_header");
    if(maximize.classList.contains('max-width'){
    terminal_main.classList.remove('max-width);    
    }else {
    terminal_main.classList.add('max-width);    
    }

    css:

    .terminal_main{}
.term_head{}
.main_header{}
.maximize{}
//this will override the above lines when you add max-width to parent of them all 
.max-width{} //css styles of terminal main
.max-width .term_head{}//css styles of term head
.max-width .main_header{} //css styles of main header
.max-width  .maxmize{} //css styles of maximize