Warum wird meine Seite ohne CSS geladen?

Also dieses Problem hat mich seit ein paar Tagen nervt. Ich habe versucht, einen funktionierenden Nachtmodus-Schalter auf meiner Seite zu bekommen. Ich habe hier vorher und nachher gefragt, was ich dachte, war die Lösung, mit Hilfe von dieser Seite und Stack-Austausch, fing ich an, ein lästiges Problem zu erfahren. HierWarum wird meine Seite ohne CSS geladen?

ist ein Video von meinem Problem: https://ryan-simms.com/problem

Das Problem tritt nur auf, wenn Nachtmodus aktiviert ist, und ich verstehe nicht, was das eigentliche Problem ist. Ich habe jedes Mal verschiedene JavaScript-Codes mit dem gleichen Ergebnis ausprobiert. Auch bevor jemand sagt, dass es wegen des DOMContentLoaded-Bits ist, habe ich bereits versucht, es zu entfernen, indem ich es nur benutze, wenn ich die EventListener auf meinen Buttons hinzufüge.

Auch ich habe versucht zu ändern, wie getCookie() mit ein paar verschiedenen Methoden funktioniert.

Sind Cookies der richtige Weg oder gibt es einen besseren Weg?

Hier ist mein HTML abgespeckte auf das Wesentliche:

<!DOCTYPE html> 


<html lang="en"> 

    <head> 

    <meta charset="utf-8"/> 

    <title>Ryan Simms</title> 

<link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'> 
<script src="scripts/lightSwitch.js"></script> 
<script src="scripts/cookie.js"></script> 
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'> 


    </head> 

    <body> 
    <script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script --> 

    <button type="button" id="lightSwitchOn">Turn On Night Mode</button> 
    <button type="button" id="lightSwitchOff">Turn Off Night Mode</button> 

    </body> 

</html>

Hier ist mein JavaScript:

document.addEventListener("DOMContentLoaded", handleDocumentLoad); 

function handleDocumentLoad() { 

    var style = document.getElementById("pageStyle"); 
    var offSwitch = document.getElementById("lightSwitchOff"); 
    var onSwitch = document.getElementById("lightSwitchOn"); 

    offSwitch.addEventListener('click', lightsOn); 
    onSwitch.addEventListener('click', lightsOff); 

    function lightsOff() { 
    document.cookie = "lights = off; expires = Fri, 31 Dec 9999 23:59:59 GMT"; 
    style.setAttribute('href', 'css/darkStyle.css'); 
    } 

    function lightsOn() { 
    document.cookie = "lights = on; expires = Fri, 31 Dec 9999 23:59:59 GMT"; 
    style.setAttribute('href', 'css/lightStyle.css'); 
    } 

    function getCookie(name) { 
    var dc = document.cookie; 
    var prefix = name + "="; 
    var begin = dc.indexOf("; " + prefix); 
    var end = null; 
    if (begin == -1) { 
     begin = dc.indexOf(prefix); 
     if (begin != 0) return null; 
     end = document.cookie.indexOf(";", begin); 
    } else { 
     begin += 2; 
     end = document.cookie.indexOf(";", begin); 
     if (end == -1) { 
      end = dc.length; 
     } 
    } 

    return decodeURI(dc.substring(begin + prefix.length, end)).replace(/"/g, ''); 
} 


    function checkCookie() { 
    var nightmode = getCookie("lights"); 
    if (nightmode == "off") { 
     lightsOff(); 
    } else { 
     lightsOn(); 
    } 
    } 

    checkCookie(); 
}

Hier ist mein Standard-CSS:

/*Layout for phones and tablets e.g. iPhone 5 and iPad*/ 

    /*webpage fades in*/ 
    html { 
     animation: fadein 2s; 
     position: relative; 
     min-height: 100%; 
    } 

    /*animation*/ 
    @keyframes fadein { 
     from { opacity: 0; } 
     to { opacity: 1; } 
    } 

    /*main colour settings for page*/ 
    body { 
     font-family: 'Roboto'; 
     font-size: 22px; 
     color: #1C1C1C; 
     background-color: #FFF; 
     margin: 0 0 100px; 
     padding: 25px; 
    } 

    /*List in nav*/ 
    li { 
     list-style-type: none; 
     display: inline; 
    } 

    /*Navigation*/ 
    nav { 
     width: 100%; 
     background-color: #D8D8D8; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 

    ol { 
     text-align: center; 
     margin-right: 10px; 
    } 

    /*Links*/ 
    a, a:link, a:visited, a:hover { 
     color: #1C1C1C; 
     text-decoration: none; 
    } 

    /*Main heading*/ 
    h1 { 
     position: relative; 
     margin: 0 auto; 
     text-align: center; 
    } 

    /*Images*/ 
    img { 
     border: solid 0px #1C1C1C; 
     border-radius: 5px; 
     margin: 0 auto; 
     text-align: center; 
    } 

    label { 
     display: block; 
     margin-bottom: 10px; 
     margin-top: 10px; 
    } 

    textarea { 
     width: 300px; 
     height: 200px; 
     margin-bottom: 10px; 
     padding: 10px; 
     border: solid 1px #1C1C1C; 
     border-radius: 2px; 
     resize: none; 
    } 

    input { 
     border: solid 1px #1C1C1C; 
     border-radius: 2px; 
     padding: 5px; 
    } 

    #logo { 
     border: 0px; 
     display: inline; 
     position: absolute; 
     top: 40px; 
     left: 30px; 
     margin-left: 10px; 
     font-size: 40px; 
    } 

    #enter { 
     margin-top: 40px; 
     max-width: 90%; 
     max-height: 90%; 
    } 

    video { 
     max-width: 80%; 
     margin: 0 auto; 
     display: block; 
    } 

    /*Footer*/ 
    footer { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     height: 100px; 
     width: 100%; 
     overflow: hidden; 
     text-align: center; 
    } 

    /*Main Body*/ 
    #mainContent { 
     padding: 10px; 
     background-color: #D8D8D8; 
     margin-top: 10px; 
    } 

    #mainContent img { 
     display: inline; 
     max-width: 375px; 
     max-height: 375px; 
     float: right; 
     margin-right: 10px; 
     margin-left: 10px; 
    } 

    /*Light Switches*/ 
    #lightSwitchOn { 
     display: inline; 
     position: absolute; 
     top: 40px; 
     right: 30px; 
     margin-right: 10px; 
     font-size: 40px; 
    } 

    #lightSwitchOff { 
     display: none; 
     position: absolute; 
     top: 40px; 
     right: 30px; 
     margin-right: 10px; 
     font-size: 40px; 
    } 

    #cookies { 
     position: fixed; 
     left: 0; 
     bottom: 0; 
     height: 8%; 
     width: 100%; 
     background-color: #D8D8D8; 
     padding-left: 30px; 
    } 

/*Layout for device with a min-width of 1024px*/ 
@media only screen and (min-width: 1024px) { 

    #enter { 
     max-width: 60%; 
     max-height: 60%; 
    } 
} 

/*Layout for desktop with a min-width of 1280px (720p HD)*/ 
@media only screen and (min-width: 1280px) { 

    #enter { 
     max-width: 40%; 
     max-height: 40%; 
    } 
} 

/*Layout for desktop with a min-width of 1920px (1080p HD)*/ 
@media only screen and (min-width: 1920px) { 

    #enter { 
     max-width: 40%; 
     max-height: 40%; 
    } 
}

Und mein CSS, wenn Nachtmodus ist aktiviert:

/*Layout for phones and tablets e.g. iPhone 5 and iPad*/ 

    /*webpage fades in*/ 
    html { 
     animation: fadein 2s; 
     position: relative; 
     min-height: 100%; 
    } 

    /*animation*/ 
    @keyframes fadein { 
     from { opacity: 0; } 
     to { opacity: 1; } 
    } 

    /*main colour settings for page*/ 
    body { 
     font-family: 'Roboto'; 
     font-size: 22px; 
     color: #FFF; 
     background-color: black; 
     margin: 0 0 100px; 
     padding: 25px; 
    } 

    /*List in nav*/ 
    li { 
     list-style-type: none; 
     display: inline; 
    } 

    /*Navigation*/ 
    nav { 
     width: 100%; 
     background-color: #1C1C1C; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 

    ol { 
     text-align: center; 
     margin-right: 10px; 
    } 

    /*Links*/ 
    a, a:link, a:visited, a:hover { 
     color: #FFF; 
     text-decoration: none; 
    } 

    /*Main heading*/ 
    h1 { 
     position: relative; 
     margin: 0 auto; 
     text-align: center; 
    } 

    /*Images*/ 
    img { 
     max-width: 100%; 
     max-height: 100%; 
     border: solid 0px #FFF; 
     border-radius: 5px; 
     margin: 0 auto; 
     text-align: center; 
    } 

    label { 
     display: block; 
     margin-bottom: 10px; 
     margin-top: 10px; 
    } 

    textarea { 
     max-width: 100%; 
     max-height: 100%; 
     width: 300px; 
     height: 200px; 
     margin-bottom: 10px; 
     padding: 10px; 
     border: solid 1px #FFF; 
     border-radius: 2px; 
     resize: none; 
    } 

    input { 
     border: solid 1px #FFF; 
     border-radius: 2px; 
     padding: 5px; 
    } 

    #logo { 
     border: 0px; 
     display: inline; 
     position: absolute; 
     top: 40px; 
     left: 30px; 
     margin-left: 10px; 
     font-size: 40px; 
    } 

    #enter { 
     margin-top: 40px; 
     max-width: 90%; 
     max-height: 90%; 
    } 

    video { 
     max-width: 80%; 
     margin: 0 auto; 
     display: block; 
    } 

    /*Footer*/ 
    footer { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     height: 100px; 
     width: 100%; 
     overflow: hidden; 
     text-align: center; 
    } 

    /*Main Body*/ 
    #mainContent { 
     padding: 10px; 
     background-color: #1C1C1C; 
     margin-top: 10px; 
    } 

    #mainContent img { 
     display: inline; 
     max-width: 375px; 
     max-height: 375px; 
     float: right; 
     margin-right: 10px; 
     margin-left: 10px; 
    } 

    /*Light Switches*/ 
    #lightSwitchOn { 
     display: none; 
     position: absolute; 
     top: 40px; 
     right: 30px; 
     margin-right: 10px; 
     font-size: 20px; 
    } 

    #lightSwitchOff { 
     display: inline; 
     position: absolute; 
     top: 40px; 
     right: 30px; 
     margin-right: 10px; 
     font-size: 20px; 
    } 

    #cookies { 
     position: fixed; 
     left: 0; 
     bottom: 0; 
     height: 8%; 
     width: 100%; 
     background-color: #1C1C1C; 
     padding-left: 30px; 
    } 

/*Layout for device with a min-width of 1024px*/ 
@media only screen and (min-width: 1024px) { 

    #enter { 
     max-width: 60%; 
     max-height: 60%; 
    } 
} 

/*Layout for desktop with a min-width of 1280px (720p HD)*/ 
@media only screen and (min-width: 1280px) { 

    #enter { 
     max-width: 40%; 
     max-height: 40%; 
    } 
} 

/*Layout for desktop with a min-width of 1920px (1080p HD)*/ 
@media only screen and (min-width: 1920px) { 

    #enter { 
     max-width: 40%; 
     max-height: 40%; 
    }

}

Quelle

2017-12-16 Ryan

Sie möchten wahrscheinlich keine Dinge wie Ihre Privatadresse und Telefonnummer auf dem Video? –

Es ist auf meiner persönlichen Website, ich bin damit einverstanden – Ryan

Er bedeutet, dass Sie in etwa 23,5 Minuten mit Verkaufsanrufen und buchstäblich Bomben vor Ihrer Haustür bombardiert werden, weil Sie Ihre persönlichen Informationen online verschenkten. –

Sind Cookies der richtige Weg, oder gibt es einen besseren Weg?

Da Sie sich nicht um das Cookie auf der Serverseite kümmern, bevorzugen Sie localStorage. Sie können für Ihren Nachtmodus alle Ihres Cookie-Code mit Dingen wie

localStorage.setItem('lights', 'off'); 

if(localStorage.getItem('lights') === 'off') { ... }

Statt Laden einen neuen Sheet ersetzen, sollten Sie eine .dark Klasse Ihren body wenn Nachtmodus Zugabe auf und enthalten die entsprechenden Änderungen in der Haupt Stylesheet.

body { 
    font-family: 'Roboto'; 
    font-size: 22px; 
    color: #1C1C1C; 
    background-color: #FFF; 
    margin: 0 0 100px; 
    padding: 25px; 
} 

body.dark { 
    color: #FFF; 
    background-color: black; 
} 

/*Navigation*/ 
nav { 
    width: 100%; 
    background-color: #D8D8D8; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.dark nav { 
    background-color: #1C1C1C; 
}

Quelle

2017-12-16 01:45:30 AuxTaco

Eine andere Lösung besteht darin, Less.js für die browserseitige Kompilierung von Weniger Stylesheets zu verwenden, sodass Sie neue Variablenwerte an Ihre weniger Dateien übergeben können, um die Farben zu ändern. Geht zu Less.js, wenn euch das interessiert, haben sie ziemlich gute Guides. –

Ich denke, es hat vielleicht funktioniert, ich habe versucht, einen lokalen Speicher früher zu gehen, war aber nicht so vertraut, auch danke für den Tipp, ich werde es überprüfen! – Ryan

Warum wird meine Seite ohne CSS geladen?

Antwort

Verwandte Themen