Midterm_Project_CS20/header.js at main · Auriel-Wish/Midterm_Project_CS20 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
window.addEventListener('scroll', change_navbar);

var a_tags = document.querySelectorAll('.link');

function change_navbar() {
    if (window.innerWidth > 1100) {
        popcorn_color = "rgb(228, 199, 83)";
        var nav = document.getElementById("navbar").style;
        var logo = document.getElementById("logo_link_img").style;

        if (document.documentElement.scrollTop > 80) {
            nav.padding = "15px 0";
            nav.backgroundColor = popcorn_color;
            nav.boxShadow = "0px 2px 4px 0px rgba(0,0,0,0.2)";
            logo.width = "15px";
            logo.height = "15px";
            a_tags.forEach(link => {
                link.style.color = 'white';
            });
        }
        else {
            nav.padding = "30px 0";
            nav.backgroundColor = "white";
            nav.boxShadow = "none";
            logo.width = "20px";
            logo.height = "20px";
            a_tags.forEach(link => {
                link.style.color = popcorn_color;
            });
        }
    }
}

var li_tags = document.querySelectorAll('.li_link');
open_id = document.getElementById("mobile_open");
close_id = document.getElementById("mobile_close");
body = document.getElementsByTagName("body")[0];
navbar = document.getElementById("navbar");

function switch_mobile_nav(opening) {
    if (opening) {
        li_tags.forEach(link => {
            link.style.display = "block";
        });

        open_id.style.display = "none";
        close_id.style.display = "block";
    }
    else {
        li_tags.forEach(link => {
            link.style.display = "none";
        });

        open_id.style.display = "block";
        close_id.style.display = "none";
    }
}

curr_width = window.innerWidth;

function has_switched(old_width) {
    return (old_width > 1100 && curr_width < 1100) || (old_width < 1100 && curr_width > 1100);
}

window.onresize = function resize() {
    old_width = curr_width;
    curr_width = window.innerWidth;
    if (has_switched(old_width)) {
        location.reload();
    }
}